I want to make a responsive card deck using Bootstrap 4 fixed-width cards. Here I have posted the code below, but it's not responsive. Why?
<div class="card-deck">
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 1</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 2</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 3</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
<div class="card-body">
<h4 class="card-title">Title 4</h4>
<p>Small text here</p>
<small class="text-muted">3 mins ago</small>
</div>
</div>
For a Bootstrap 4 card deck with fixed-width cards, do this:
Put each card into a column with the classes col-auto mb-3 (auto-width column + margin-bottom with three units).
To center them, add the justify-content-center class to the row.
Here's a working code snippet (click "run code snippet" below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
In here it is mentioned, these layout options are not yet responsive. So I have found a simple solution. Change the parent <div class="card-deck">...</div> to <div class="row">...</div>.
Deck makes cards equal height.
Adding a row-deleting deck was correct. Adding col-lg-3 col-md-2 col-sm-12 will give a four-cards desktop, etc. down to one on a phone.
Set the height using the height of the largest number so an "OK" looks straight.
Related
I'm trying to make them closer like the picture that is attached. How can I change that property?
Expected output:
I need them to be more close with one another and to make them in the center of the page but I find it hard to do. I've tried the column-gap but its not working. please help this is my first time.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="row">
<div class="col">
<div class="card" style="width: 16.5rem">
<img src="https://via.placeholder.com/300x100" class="card-img-top" alt="..." />
<div class="card-body">
<center>
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Go somewhere
</center>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 16.5rem">
<div class="card-body">
<center>
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</center>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 16.5rem">
<div class="card-body">
<center>
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</center>
</div>
</div>
</div>
<div class="col">
<div class="card" style="width: 16.5rem">
<div class="card-body">
<center>
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</center>
</div>
</div>
</div>
</div>
Don't put sizes on the cards. Use the grid to control sizing.
Rows require containers around them.
Don't use inline styles. That makes work harder for everyone, and much of what you might do with it can be done with Bootstrap features anyway. If you need custom styles, use a custom class.
The center element is deprecated. Don't use it. Use Bootstrap's text alignment or flex layout features instead.
.col.mw-16_5 {
max-width: 16.5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col mw-16_5">
<div class="card">
<img src="https://via.placeholder.com/300x100" class="card-img-top" alt="..." />
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Go somewhere
</div>
</div>
</div>
<div class="col mw-16_5">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</div>
</div>
</div>
<div class="col mw-16_5">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</div>
</div>
</div>
<div class="col mw-16_5">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
All that said, you might just want to use basic flexbox layout instead of rows and columns. You can use Bootstrap's margin classes for card spacing.
.card.minw-10 {
min-width: 10rem;
}
.card.maxw-16_5 {
max-width: 16.5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="d-flex flex-wrap justify-content-center">
<div class="card m-2 minw-10 maxw-16_5">
<img src="https://via.placeholder.com/300x100" class="card-img-top" alt="..." />
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Go somewhere
</div>
</div>
<div class="card m-2 minw-10 maxw-16_5">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</div>
</div>
<div class="card m-2 minw-10 maxw-16_5">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</div>
</div>
<div class="card m-2 minw-10 maxw-16_5">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</div>
</div>
<div class="card m-2 minw-10 maxw-16_5">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</div>
</div>
<div class="card m-2 minw-10 maxw-16_5">
<div class="card-body text-center">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
Card link
Another link
</div>
</div>
</div>
<div class="card" style="width: 16.5rem; margin-left: 20px;>
i use px but you can use rem, cm, etc.
I need to arrange some cards, in a web page with Boostrap 4.
Can you help me?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 03
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 04
</div>
</div>
</div>
</div>
I'm Tried to make bootstrap 4 card like a below image , but my card is not perfect, any idea for how to do correctly this one?
My code:
<div class="row">
<div class="col-md-12 ">
<div class="row">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
<div class=" col-xl-3 col-lg-4 ">
<div class=" col-xl-3 col-lg-6 "><div class="card shadow-sm mb-0 bg-primary">
card 01
</div>
</div>
</div>
</div>
You can try as below snippet in Bootstrap-v4.
[Check on Full Page]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container py-3">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3 py-3">
<div class="card text-white bg-primary h-100 rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-8 col-lg-9">
<div class="row">
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 py-3">
<div class="card text-white bg-primary rounded-0 shadow-sm">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should use container and row which based bootstrap grid system. To makes sure your cards are placed right position, Here my sample code (Please run as full screen) the result should be like this image
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<div class="container" style="width: 1240px !important; max-width: 960px !important;">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem; height: 100%">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
<div class="row">
<div class="card" style="width: 200px;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">text</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If I understand correctly, you can use flex classes to achieve what you described.
<style>
.box-1 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-bottom: 10px;
}
.box-2 {
width: 200px;
height: 210px;
border: 1px solid red;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="d-flex">
<div class="mr-3">
<div class="box-2">card 01</div>
</div>
<div class="d-flex">
<div class="mr-3">
<div class="box-1">card 02</div>
<div class="box-1 mb-0">card 05</div>
</div>
<div class="mr-3">
<div class="box-1">card 03</div>
<div class="box-1 mb-0">card 06</div>
</div>
<div>
<div class="box-1">card 04</div>
<div class="box-1 mb-0">card 07</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should refer the grid system of bootstrap
(Run as full size)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-5">
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary h-100 p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To get that grid system you will need to create a grid of your own. You can do this with columns and rows. You can have columns inside of rows, and move each column or row to where you want it. I outlined the basic structure in the snippet below (I used some sample content from G.W Kalpa Sathjana De Silva's code)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-5">
<div class="row">
<div class="col-md-3">
<div class="card text-white bg-primary h-100 p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-white bg-primary p-2 m-1">
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Currently my prototype Website looks like this, with justify-content-around:
What I would like is, that when there is an uneven amount of cards, that the last card is in line with the others. Is there a way to do it? I know, that it works with justify-space-between, but what about around?
Here's my source code:
<div class="container-fluid">
<div class="container-fluid row justify-content-around cards ml-0">
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
what I added in an extra css file is the following:
.cards::after{
content: '';
flex: auto;
}
So that at least the last item is on the left side and not in the middle!
Thanks in advance!
Change your col-md-5 to col-md-4 . Below I've done for one of your small snippet
<div class="card col-12 col-md-4 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
I'm trying to center a set of Bootstrap cards that are aligned to the left.
I need to have the container div center into the main grid and then have the cards aligned to the left.
I have tried to use "justify-content-center" in the main row but it doesn't work.
<div class="container-fluid" style=" background-color: #999;" >
<div class="row">
<div class=col-1></div>
<div class=col-10>
<div class="container-fluid mt-4" style=" background-color: #ff0;" >
<div class="row justify-content-left">
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</div>
<div class=col-1></div>
</div>
</div>
Here is the code:
https://jsfiddle.net/Gozaro/hq6y0z8m/36/
Here is what I get as a result:
Here is what I would like to have:
updated code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.card{margin-top: 10px;margin-bottom: 10px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk
of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
As per my understanding what you want is grid to be centered and cards to left align in the column.
so just add the following CSS to row:
.col-centered {
float: none;
margin: 0 auto !important;
width: 80%;
background: lightblue;
}
and replace your HTML line:
<div class="row justify-content-left">
With with this:
<div class="row col-centered">
And to left align card add CSS:
.card {
float: left;
}
Here is fiddle to view the result of my answer:
I had an idea base in the code of Jeetan and I found a solution using media queries which I know is the best solution but works:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid" style=" background-color: #999;" >
<div class="row">
<div class=col-1></div>
<div class=col-10>
<div class="container mt-4" style=" background-color: #ff0;" >
<div class="row justify-content-left">
<div class="col-auto mb-3">
<div class="card" style="width: 250px;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 250px;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 250px;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 250px;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
</div>
</div>
</div>
<div class=col-1></div>
</div>
</div>
https://jsfiddle.net/Gozaro/xw786kL0/
The solution is fix the width of the container depending of the viewport width.
I have a quick question.
I am going to loop through DB records and print one card for each record. The problem is, if I can't set a new row for each, I end up with this horrible squashed layout between the two rows of cards
How can I loop through, make a card for each & still make it look nice?
Thanks!!
<div class="row">
<div class="col-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
<div class="col-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Card link
Another link
</div>
</div>
</div>
</div>
Just use the spacing utils. For example:
<div class="col-4 py-3">
<div class="card" style="width: 18rem;">
...
</div>
</div>