Bootstrap 4 - Responsive cards in card-columns

Question

I m playing with Bootstrap 4 and I can t find a solution to add responsiveness to cards while in a div with class  quot card-columns quot   this class applies a Masonry-like effect to the cards inside the div having this class   In Bootstrap 3 it was easy to style and make  quot cards quot  responsive since it was possible to apply something like class  quot col-md-3 col-sm-6 col-xs-12 quot  to a div containing thumbnail  caption  etc  How to have the same effect while using cards in Bootstrap 4  Here is the HTML   lt body gt    lt div class  quot container-fluid quot  gt       lt div class  quot row quot  gt            lt div class  quot col-md-4 hidden-sm-down quot  id  quot map container quot  gt               lt p gt here we put the map lt  p gt           lt  div gt            lt div class  quot col-md-8 col-sm-12 right box quot  gt                lt div class  quot row quot  gt                      here there s code for navbar               lt  div gt  lt  -- row -- gt                lt div class row quot  gt                   lt div class  quot card-columns quot  gt                       lt  php                        Create and check connection                                          if   result- gt num rows  gt  0                                output card design                         while  row    result- gt fetch assoc                                   echo   lt div class  quot card quot  gt                                       lt img class  quot card-img-top quot  src  quot dance     row  quot id quot       jpg quot  alt  quot      row  quot name quot       quot  gt                                       lt div class  quot card-block quot  gt                                           lt h4 class  quot card-title quot  gt      row  quot name quot       lt  h4 gt                                           lt p class  quot card-text quot  gt Text  Card content  lt  p gt                                       lt  div gt                                       lt div class  quot card-footer text-muted quot  gt                                           lt ul class  quot list-inline quot  gt                                               lt li gt  lt i class  quot fa fa-user quot  gt  lt  i gt  lt  li gt                                               lt li gt 14 lt  li gt                                           lt  ul gt                                       lt  div gt                                     lt  div gt  lt  -- card -- gt                                                    else                           echo  quot 0 results quot                                               conn- gt close                          gt                   lt  div gt  lt  -- container card-columns -- gt               lt  div gt  lt  -- row -- gt           lt  div gt  lt  -- col-md-8 right box -- gt       lt  div gt  lt  -- row -- gt   lt  div gt  lt  -- container-fluid -- gt   lt  body gt   And here is the CSS I ve used   map container   background-image  url map png   height  100vh      right box   -webkit-box-shadow  -2px 0px 2px 0px rgba 0 0 0 0 75   -moz-box-shadow  -2px 0px 2px 0px rgba 0 0 0 0 75   box-shadow  -2px 0px 2px 0px rgba 0 0 0 0 75       card   border-radius  0  important  border  0 none  -webkit-box-shadow  0px 2px 5px 0px rgba 0 0 0 0 5   -moz-box-shadow  0px 2px 5px 0px rgba 0 0 0 0 5   box-shadow  0px 2px 5px 0px rgba 0 0 0 0 5   margin-left  1px  margin-right  1px      card-img-top   width  100   border-radius  0  important      card-columns   padding-top  15px     Given below are two images to make my situation clearer  Large screen Smaller screen I d like cards to stack up vertically on smaller screens  Thanks for your suggestions

User · Answer

I realize this question was posted a while ago; nonetheless, Bootstrap v4.0 has card layout support out of the box. You can find the documentation here: Bootstrap Card Layouts.

I've gotten back into using Bootstrap for a recent project that relies heavily on the card layout UI. I've found success with the following implementation across the standard breakpoints:

_x000D_

<link href="https://unpkg.com/[email protected]/css/tachyons.min.css" rel="stylesheet"/>_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div class="flex justify-center" id="cars" v-cloak>_x000D_
    <!-- RELEVANT MARKUP BEGINS HERE -->_x000D_
    <div class="container mh0 w-100">_x000D_
        <div class="page-header text-center mb5">_x000D_
            <h1 class="avenir text-primary mb-0">Cars</h1>_x000D_
            <p class="text-secondary">Add and manage your cars for sale.</p>_x000D_
            <div class="header-button">_x000D_
                <button class="btn btn-outline-primary" @click="clickOpenAddCarModalButton">Add a car for sale</button>_x000D_
            </div>_x000D_
        </div>_x000D_
        <div class="container pa0 flex justify-center">_x000D_
            <div class="listings card-columns">_x000D_
                <div class="card mv2">_x000D_
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"_x000D_
                        alt="Mazda hatchback">_x000D_
                    <div class="card-body">_x000D_
                        <h5 class="card-title">Card title</h5>_x000D_
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's_x000D_
                            content._x000D_
                        </p>_x000D_
                        <a href="#" class="btn btn-primary">Go somewhere</a>_x000D_
                    </div>_x000D_
                    <div class="card-footer">_x000D_
                        buttons here_x000D_
                    </div>_x000D_
                </div>_x000D_
                <div class="card mv2">_x000D_
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"_x000D_
                        alt="Mazda hatchback">_x000D_
                    <div class="card-body">_x000D_
                        <h5 class="card-title">Card title</h5>_x000D_
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's_x000D_
                            content._x000D_
                        </p>_x000D_
                        <a href="#" class="btn btn-primary">Go somewhere</a>_x000D_
                    </div>_x000D_
                    <div class="card-footer">_x000D_
                        buttons here_x000D_
                    </div>_x000D_
                </div>_x000D_
                <div class="card mv2">_x000D_
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"_x000D_
                        alt="Mazda hatchback">_x000D_
                    <div class="card-body">_x000D_
                        <h5 class="card-title">Card title</h5>_x000D_
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's_x000D_
                            content._x000D_
                        </p>_x000D_
                        <a href="#" class="btn btn-primary">Go somewhere</a>_x000D_
                    </div>_x000D_
                    <div class="card-footer">_x000D_
                        buttons here_x000D_
                    </div>_x000D_
                </div>_x000D_
                <div class="card mv2">_x000D_
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"_x000D_
                        alt="Mazda hatchback">_x000D_
                    <div class="card-body">_x000D_
                        <h5 class="card-title">Card title</h5>_x000D_
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's_x000D_
                            content._x000D_
                        </p>_x000D_
                        <a href="#" class="btn btn-primary">Go somewhere</a>_x000D_
                    </div>_x000D_
                    <div class="card-footer">_x000D_
                        buttons here_x000D_
                    </div>_x000D_
                </div>_x000D_
                <div class="card mv2">_x000D_
                    <img src="https://farm4.staticflickr.com/3441/3361756632_8d84aa8560.jpg" class="card-img-top"_x000D_
                        alt="Mazda hatchback">_x000D_
                    <div class="card-body">_x000D_
                        <h5 class="card-title">Card title</h5>_x000D_
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's_x000D_
                            content._x000D_
                        </p>_x000D_
                        <a href="#" class="btn btn-primary">Go somewhere</a>_x000D_
                    </div>_x000D_
                    <div class="card-footer">_x000D_
                        buttons here_x000D_
                    </div>_x000D_
                </div>_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
</div>

_x000D_

After trying both the Bootstrap .card-group and .card-deck card layout classes with quirky results at best across the standard breakpoints, I finally decided to give the .card-columns class a shot. And it worked!

Your results may vary, but .card-columns seems to be the most stable implementation here.

User · Answer

Update 2019 - Bootstrap 4  You can simply use the SASS mixin to change the number of cards across in each breakpoint   grid tier    card-columns      include media-breakpoint-only xl        column-count  5         include media-breakpoint-only lg        column-count  4         include media-breakpoint-only md        column-count  3         include media-breakpoint-only sm        column-count  2          SASS Demo  http   www codeply com go FPBCQ7sOjX  Or  CSS only like this      media  min-width  576px         card-columns           column-count  2            media  min-width  768px         card-columns           column-count  3            media  min-width  992px         card-columns           column-count  4            media  min-width  1200px         card-columns           column-count  5            CSS-only Demo  https   www codeply com go FIqYTyyWWZ

User · Answer

If you are using Sass    card-column-sizes        xs  2      sm  3      md  4      lg  5       each  breakpoint-size   column-count in  card-column-sizes        include media-breakpoint-up  breakpoint-size           card-columns           column-count   column-count          column-gap  1 25rem            card             display  inline-block            width  100      Don t let them exceed the column width

User · Answer

Another late answer  but I was playing with this and came up with a general purpose Sass solution that I found useful and many others might as well  To give an overview  this introduces new classes that can modify the column count of a  card-columns element in very similar ways to columns with  col-4 or  col-lg-3    import  bootstrap     card-column-counts  1  2  3  4  5    card-columns        each  column-count in  card-column-counts            amp  card-columns-   column-count                column-count   column-count                        each  breakpoint in map-keys  grid-breakpoints             include media-breakpoint-up  breakpoint                 infix  breakpoint-infix  breakpoint   grid-breakpoints                each  column-count in  card-column-counts                    amp  card-columns   infix -   column-count                        column-count   column-count                                                      The end result of this is if you have the following    lt div class  card-columns card-columns-2 card-columns-md-3 card-columns-xl-4  gt          lt  div gt    Then you would have 2 columns by default  3 for medium devices and up and 4 for xl devices and up  Additionally if you change your grid breakpoints this will automatically support those  and the  card-column-counts can be overridden to change the allowed numbers of columns

User · Answer

I have created a Cards Layout - 3 cards in a row using Bootstrap 4   CSS3  of course its responsive   The following example uses basic Bootstrap 4 classes such as container  row  col-x  list-group and list-group-item  Thought to share here if someone is interested in this sort of a layout     HTML   lt div class  container  gt     lt div class  row  gt       lt div class  col-sm-12 col-md-4  gt         lt div class  custom-column  gt           lt div class  custom-column-header  gt Header lt  div gt           lt div class  custom-column-content  gt             lt ul class  list-group  gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Cras justo odio lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Dapibus ac facilisis in lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Morbi leo risus lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Porta ac consectetur ac lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Vestibulum at eros lt  li gt             lt  ul gt           lt  div gt           lt div class  custom-column-footer  gt  lt button class  btn btn-primary btn-lg  gt Click here lt  button gt  lt  div gt         lt  div gt       lt  div gt       lt div class  col-sm-12 col-md-4  gt         lt div class  custom-column  gt                   lt div class  custom-column-header  gt Header lt  div gt           lt div class  custom-column-content  gt             lt ul class  list-group  gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Cras justo odio lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Dapibus ac facilisis in lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Morbi leo risus lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Porta ac consectetur ac lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Vestibulum at eros lt  li gt             lt  ul gt           lt  div gt           lt div class  custom-column-footer  gt  lt button class  btn btn-primary btn-lg  gt Click here lt  button gt  lt  div gt         lt  div gt       lt  div gt       lt div class  col-sm-12 col-md-4  gt         lt div class  custom-column  gt           lt div class  custom-column-header  gt Header lt  div gt           lt div class  custom-column-content  gt             lt ul class  list-group  gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Cras justo odio lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Dapibus ac facilisis in lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Morbi leo risus lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Porta ac consectetur ac lt  li gt               lt li class  list-group-item  gt  lt i class  fa fa-check  gt  lt  i gt  Vestibulum at eros lt  li gt             lt  ul gt           lt  div gt           lt div class  custom-column-footer  gt  lt button class  btn btn-primary btn-lg  gt Click here lt  button gt  lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    CSS   SCSS   primary-color   ccc   col-bg-color   eee   col-footer-bg-color   eee   col-header-bg-color   007bff   col-content-bg-color   fff   body     background-color   primary-color        custom-column       background-color   col-bg-color    border  5px solid  col-bg-color        padding  10px    box-sizing  border-box        custom-column-header     font-size  24px    background-color   007bff      color  white    padding  15px      text-align  center      custom-column-content     background-color   col-content-bg-color    border  2px solid white      padding  20px        custom-column-footer     background-color   col-footer-bg-color       padding-top  20px    text-align  center      Link  - https   codepen io anjanasilva pen JmdOpb

User · Answer

Bootstrap 4  4 0 0-alpha 2  uses the css property column-count in the card-columns class to define how many columns of cards would be displayed inside the div element   But this property has only two values     The default value 1 for small screens  max-width  34em  The value 3 for all other sizes  min-width  34em    Here s how it is implemented in bootstrap min css     media  min-width  34em         card-columns           -webkit-column-count 3          -moz-column-count 3          column-count 3                            To make the card stacking responsive  you can add the following media queries to your css file and modify the values for min-width as per your requirements     media  min-width  34em         card-columns           -webkit-column-count  2          -moz-column-count  2          column-count  2            media  min-width  48em         card-columns           -webkit-column-count  3          -moz-column-count  3          column-count  3            media  min-width  62em         card-columns           -webkit-column-count  4          -moz-column-count  4          column-count  4            media  min-width  75em         card-columns           -webkit-column-count  5          -moz-column-count  5          column-count  5

[html] Bootstrap 4 - Responsive cards in card-columns

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4