How do I make card-columns order horizontally?
As documented, the order of the CSS columns is top to bottom, then left to right so the order of the rendered columns will be..
1 3 5
2 4 6
There is no way to change the order of CSS columns. It's suggested you use another solution like Masonry. https://github.com/twbs/bootstrap/issues/17882
Bootstrap 4 order Masonry-like column cards horizontal instead of vertical
The order of the CSS columns is top to bottom, then left to right so the order of the rendered columns will be..
1 3 5
2 4 6
There is no way to change the order of CSS columns. It's suggested you use another solution like Masonry. https://github.com/twbs/bootstrap/issues/17882
Also, enabling flexbox won't help because Bootstrap card-deck
uses CSS columns (not flexbox) for the masonry effect. You can however use the card-deck
and flexbox for equal height cards: http://www.codeply.com/go/YFFFWHVoRB
Another option is to use the grid along with flexbox instead of the card-deck
:
You can use the new d-flex
class to eliminate the extra CSS:
<div class="col-sm-4 d-flex pb-3">
<div class="card card-block">
Card. I'm just a simple card-block.
</div>
</div>
Related:
How do I make card-columns order horizontally?
How to place card-columns in the center of the page when using bootstrap 4.3.1?
You need to set your container div
as a flex-box and then you can apply the bootstrap classes you need.
In this case, you want:<div class="card-columns mx-auto d-flex justify-content-center col-12">
So because you want to center your card-columns
, it's clear that justify-content-center
does the job.
For your card-columns
width, you can play with the class col
from bootstrap. Basically, it offers a maximum grid of 12 columns and that would take the whole page's view. And now you can then tell each card how many col-span you need them to take by adding col-[0 to 12]
to up to a maximum of 12 because you have set their parent tag col-12
.
If it had col-8
instead, your cards could only take up to a maximum of 8 columns.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><main role="main">
<div class="container-fluid"> <div class="mx-auto card bg-light"> <div class="card-body"> <h2 class="card-title text-center text-uppercase text-info">Cards</h2> <hr />
<div class="card-columns mx-auto d-flex justify-content-center col-12">
<div class="card text-center col-4"> <div class="card-body"> <h5 class="card-title">Card 1</h5> <p class="card-text">This card has a regular title and short paragraphy of text below it.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div>
<div class="card text-center col-4"> <div class="card-body"> <h5 class="card-title">Card 2</h5> <p class="card-text">This card has a regular title and short paragraphy of text below it.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div>
</div> </div> </div> </div></main>
How to Get Bootstrap Card Columns?
Based on https://v4-alpha.getbootstrap.com/layout/grid/ you have to add a div with the class row around the columns.
Example here: http://codepen.io/Spreadyy/pen/aprrBG.
<div class="row">
Related Topics
Does a Background-Attachment of Fixed Work in iOS5
How to Find Out When I Can Safely Drop Vendor Prefixes for a CSS3 Property
How to Evenly Distribute Elements in a Div Next to Each Other
Bootstrap 3 - 100% Height of Custom Div Inside Column
Media Query for Devices Supporting Hover
Purpose of *:Before, *:After Rule Without Content Property
:Last-Child Pseudo-Class Mixed with Attribute Selector Not Working
Editing Input Type="Search" Pseudo-Element Button ('X')
CSS Min-Height Not Working on Mozilla Firefox
Bootstrap 4 - No Column Wrapping
Must Bootstrap Container Elements Include Row Elements
Css: on Hover Show and Hide Different Div's at the Same Time
Font Awesome Fonts Show Up as Boxes on IE8