Create a Bootstrap4 grid with cards in 2 mins

Let’s get started

Bootstrap4 grid is the most widely used feature in the framework. How do we use it effectively and in the best way possible?  Let’s check it out

What all do we need?

  • add Bootstrap framework to you project
  • Understanding of how html and css works

classes required

All our html structuring will include css classes provided by bootstrap. The following are the classes to look out for:

  • row
  • col-{breakpoint}-{value}
  • d-{breakpoint}-{value} (i mostly use flex as value)
  • m-{breakpoint}-value, mx-{value}, my-{value},mt-,mb-,ml-,mr- classes for margin adjustments
  • p-{breakpoint}-value, px-{value}, py-{value},pt-,pb-,pl-,pr- classes for margin adjustments.
  • card component.
  • flex classes like justify-content-{breakpoint}-{value}, align-items-{breakpoint}-{value}
note:

If you need knowledge of much such utility classes, have a look at my last post where i have listed all the utlity classes available in bootstrap. click here.

{breakpoint} : this is where you add the viewport in which you want the class to be applied

{value}: number of columns by which you want to divide the webpage. A webpage by default has 12 column. If you need 2 column section,  divide 12 by 2 i.e 6 and add class col-md-6  to you element. The usage will be more clear when you have a look at the examples below.

structure

<main>
<div class="container">
<div class="row my-5">
<div class="d-flex justify-content-center align-items-center col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="d-flex justify-content-center align-items-center col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</main>

 

Breakdown

  • Add a div element with class ‘row’
  • add a div inside as many as you want with the following classes
    • col-md-{value} (value for medium devices viewport can be 2,3,4,6,12)
    • col-{value} (value for mobile devices. for my example i am using col-12)
    • d-flex (element becomes a flexbox)
  • add a card component inside every col element. find more details here.

Conclusion

Once you follow the steps, You will have the result something like shown in the pen below.

Hope you guys will have the grid structure implemented for your usecase. Do let me know your experiences and issues you faced while developing grid structure in the comment sections below.

0
0