What is the Bootstrap grid system?

The grid divides the width of a row into 12 columns. You put columns (.col-*) inside a row (.row), and the row inside a container. The numbers of one line should add up to 12. With breakpoints (col-md-6) the layout changes on different screen sizes.

<div class="container text-center">
  <div class="row">
    <div class="col-12 col-md-8 border bg-light py-2">col-md-8</div>
    <div class="col-12 col-md-4 border bg-light py-2">col-md-4</div>
  </div>
</div>
Live preview

See Grid System.


Learn more about the similar topics:
Tutorials
No Content Found.
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.