I am trying to display a list of card width boostrap. I made my html like so :
<div class="card-deck">
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div>
etc...
</div>
</div>
The problem is, margin seems to expand the cards' width. So it makes someting like that... (it should display 4 cols)
screen 1
If I remove margins, it makes something like...
screen 2
Thanks for your help !
Thanks for your answers. However it does not solve my problem :(
First solution :
I cannot do that easily because I get them from a database so I don't know how many elements will be returned and I do really want to make a new deck card every 4 cards.
The justify-content-center is not really elegant and it shifts the problem
Second solution :
It looks like my second screen : https://i.stack.imgur.com/erkcT.jpg
You must use padding, don't margin if you don't want any cards size change.
change
<div class="card card-widget col-sm-2 m-2">
with this
<div class="card card-widget col-sm-2 p-2">
<div class="card-deck">
<div class="card card-widget col-sm-2 p-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div>
etc...
</div>
</div>
Margin can not increase the width of card like that. However, it will definitely increase container's width.
APPROACH 1: Check the code below. It will assign equal widths to the cards.
NOTE : It is working like row-column feature of bootstrap. So you have to add n number of card elements in a card-deck for n number of columns.
<div class="card-deck mx-2 mt-2">
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
</div>
<div class="card-deck mx-2">
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
</div>
APPROACH 2: In case you don't want to change card's width :
<div class="card-deck m-2 mb-0 justify-content-center">
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
<div class="card card-widget col-sm-2 m-2">
<div class="card-body text-center">
TEXT
</div>
</div>
</div>
(Bootstrap 5)
I was able to solve the problem by wrapping the card in a column first (which is what the documentation recommends). This appears to apply an mx-2 margin as a default, though I can't actually find out why this is the case. In any case it allowed me to get a margin between cards without breaking the grid.
<div class="container">
<div class="row">
<div class="col-lg-4 my-2">
<div class="card">
</div>
</div>
<div class="col-lg-4 my-2">
<div class="card">
</div>
</div>
...etc
</div>
</div>
Related
I'm implementing code where I dynamically display flex items where each one takes 1/2 the display width, so after two items I need to start a new row.
class="d-flex flex-row" doesn't seem to do that for me. How can I essentially as a after every two items displayed?
<div class="d-flex mb-3">
<div class="card col-6 m-3">
<p>Card 1</p>
</div>
<div class="card col-6 m-3">
<p>Card 2</p>
</div>
<div class="d-flex flex-row"></div>
<div class="card col-6 m-3">
<p>Card 3</p>
</div>
<div class="card col-6 m-3">
<p>Card 4</p>
</div>
</div>
You are very close! I think the issue is flex calculating margins in the width of the element, so you effectively have a (50% + margin) element specified in your col-6 m-3 classes. This pushes the elements to the next row.
The solution is to apply a wrapper containing the layout class col-6 and leave the margin on the children.
You also do not have a row class on the parent of your columns, so be sure to add that as well!
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row d-flex flex-row mb-3">
<div class="col-6">
<div class="card m-3">
<p>Card 1</p>
</div>
</div>
<div class="col-6">
<div class="card m-3">
<p>Card 2</p>
</div>
</div>
<div class="col-6">
<div class="card m-3">
<p>Card 3</p>
</div>
</div>
<div class="col-6">
<div class="card m-3">
<p>Card 4</p>
</div>
</div>
</div>
use row to make row instead of d-flex flex-row your code should be like:
<div class="row">
<div class="card col-6">
<p>Card 1</p>
</div>
<div class="card col-6">
<p>Card 2</p>
</div>
<div></div>
<div class="card col-6">
<p>Card 3</p>
</div>
<div class="card col-6">
<p>Card 4</p>
</div>
</div>
(card 3 and 4 will automatically go to a new row as there's no remaining space for them)
I removed the margin as if you added margins the card space will be more than 50%
if you want to add space around the card you can make the cards inside divs and give the divs col-6 and then give the divs p-3 like that:
<div class="row w-100 mx-auto">
<div class="col-6 p-3">
<div class="card">
<p>Card 1</p>
</div>
</div>
<div class="col-6 p-3">
<div class="card">
<p>Card 2</p>
</div>
</div>
<div></div>
<div class="col-6 p-3">
<div class="card">
<p>Card 3</p>
</div>
</div>
<div class="col-6 p-3">
<div class="card">
<p>Card 4</p>
</div>
</div>
</div>
I have an issue with Bootstrap 5. I'm trying to round my .card-img-top with the class rounded, but the class doesn't work at all. Anyone know why?
Here is my code:
<div class="container w-100">
<div class="row">
<div class="col-md-3 mx-auto my-5">
<div class="card bg-secondary text-line">
<div class="card-body rounded">
<img src="./images/image-equilibrium.jpg" alt="Image Equilibrum" class="card-img-top rounded p-2">
</div>
</div>
</div>
</div>
</div>
I'm really confused by the columns system in Bootstrap. Here is what I have:
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Cards</h1>
</div>
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-2 col-md-2 mb-2">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Stop</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
</div>
<div class="col-auto">
<span class="material-icons">
pan_tool
</span>
</div>
</div>
</div>
</div>
</div>
I have 8 cards total and 2 of them fall in the second line, because of spacing. How can I achieve a professional view with my cards? I need to show 12 different status of machines we have, start, stop, and run.
Here is the link of jsFiddle:
https://jsfiddle.net/rbk27ote/1/
You just need put class 'col' for all your div element those you want to make equal.just like as below:-
<div class="col"></div>
<div class="container">
<div class="row no-gutters">
<div class="col m-2">
<div />
</div>
<div class="col m-2">
<div />
</div>
<div class="col m-2">
<div />
</div>
...
</div>
</div>
So in this width it looks well aligned
When i go slightly wide i see that the div's in the second row are not close to each other. Is there a way to align the cols in the last column to be close to each other (and aligned with column 2,3,4 of row 1)?
Here is a jsfiddle for the same.
Use col-auto instead of *col, because you use fixed width for the boxes so that they takes as much space as necessary. And use justify-content-center for the row to align the columns in the center. Most importantly, use p-2 instead of m-2.
.box {
width: 200px;
height: 100px;
background: lightblue;
}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters justify-content-center">
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2" >
<div class="box mx-auto">
hello
</div>
</div>
</div>
http://jsfiddle.net/6bx12u5w
You use an older version of Bootstrap. Better to use the latest one since there are a few new classes has been added.
Update
col takes all the available space while col-auto takes as much as space as it needs: it takes as much space as the natural width of it content.
Here are a few different options for last row alignment.
Align last row to center
I see that you want the last row cols aligned under 2,3,4, so in this case you can simply use justify-content-center along with the col-auto columns. The col-auto uses flexbox shrink to make the column width fit the content.
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
..
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
</div>
</div>
https://www.codeply.com/go/iwL7PW77En
Align last row to left
Aligning the last row to the left is a flexbox issue that has been addressed before. If you don't mind having the entire layout not centered, just use col-auto to shrink the width of the columns to fit the boxes and justify-content-start.
<div class="row no-gutters justify-content-start">
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
....
</div>
https://codeply.com/go/LZkOF9zexh (align start)
If you need the entire layout centered, as you can see from the other answers there are various workarounds to align the last row left. IMO, the simplest, most reliable way in Bootstrap 4 is using a empty spacer elements at the end. You'll need 4 empty spacers since the max in any row is 5 cols.
<div class="row no-gutters justify-content-center">
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
...
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
</div>
https://codeply.com/go/F7pGyqIIT6 (spacers at end)
I'm using Bootstrap 4 alpha 6, and attempting to use flexbox to vertically center the content of equal height cards. I've used the h-100 util class to make the cards full height with the columns..
The problem is that I want the content of each card to be aligned in the middle (centered vertically). I tried the use the .align-items-center class in the row, which works to center the cards, but then the cards are no longer equal height...
HTML
<div class="container">
<div class="row align-items-center bg-faded">
<div class="col-md-2">
<div class="card card-block h-100">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100">
I have a little bit.
</div>
</div>
</div>
</div>
Demo of problem
Here is a simpler solution for you:
using only justify-content-center utility class because .card has already flex-direction: column property
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<code>normal .row with .card inside .col-*</code>
<h6>Problem is that card content is not centered</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a little bit.
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<code>.align-items-center.row with .card inside .col-</code>
<h6>Problem is that cards are no longer full height</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
One way I've found to solve the centering issue is using the flex-column utility class. Since each card is display: flex, flex-column can be used to set flex-direction: column. Then, justify-content-center vertically aligns the content...
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="card card-block h-100 flex-column justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 flex-column justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 flex-column justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
Demo