CODEWITHSUNDEEP
bootstrap-4
Elcid_91
Elcid_91

Reputation: 1681

Bootstrap4 Stacking Cards

New to bootstrap and I am trying to learn how to stack cards. I have the following code:

<div id="home">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 1</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 2</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 3</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="card">
                <div class="card-title">Card 4</div>
                <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
                <div class="btn-cntr"><button class="float right">Read More...</button></div>
            </div>                      
        </div>
    </div>
</div>

which produces 3 cards on one row and a single card on the second row. I am looking to establish 4 cards on a single row (lg), 2 cards on one row and 2 cards on the second row (md) and finally single cards stacked on top of each other (sm).

When I resize my browser, I notice the the cards resize as well and I need the cards to remain the same size and stack accordingly as the screen resizes. Need some help, please.

Upvotes: 1

Views: 84

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

You would use this for each column:

<div class="col-md-6 col-lg-3">
      <div class="card">
           ..
      </div>
</div>

Demo: https://www.codeply.com/go/nnBMQjZA3R

How it works:

  • col-lg-3 - use 3/12 on lg and up
  • col-md-6 - use 6/12 on md
  • (below md cols will stack and become full-width)

Alternately, you could use the auto-layout cols on lg since col-* will evenly fill the row...

<div class="col-md-6 col-lg"></div>

Upvotes: 1

Related Questions