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>
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.
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>
Currently i am working on a eCommerce site (i am newbie).
i am using bootstrap for basic styling.
the structure is given below.
The div Of class "nl-row" is dynamic.depending upon the no of items in the db it will increase.
so i am trying to dynamically center the divs in a ".container" div.
the "nl-row" is given the width of 300px, so if the ".container" had the width of 1000px, there should be 3 "nl-row" in a row and if the ".container" had the width of 700px there should be 2 "nl-row" in a row and should center themselves in the row.
-Please help Me with this issue.
<div id="nl-container-1" class="nl-container">
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<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 class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<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 class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<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>
For the parent use (display:flex;justify-content:center)for the children use :width 300px)
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 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.