Bootstrap Grid System

The grid system is the most important part of Bootstrap. It uses a 12 column layout and flexbox to make responsive pages. You divide the width of the row in up to 12 parts, and say how many parts each column takes.

The structure

• A .container (or .container-fluid) is the outer wrapper.
• A .row goes inside it. It makes a flex row, and removes the side padding problems.
• Columns .col go inside the row. Their total should be 12 or less in one line. More than 12 wraps in the next line.

Equal width columns

<div class="container text-center">
  <div class="row">
    <div class="col border bg-light py-2">Column</div>
    <div class="col border bg-light py-2">Column</div>
    <div class="col border bg-light py-2">Column</div>
  </div>
</div>

The class .col without a number divides the row equally between all the columns.

Column sizes with numbers

<div class="container text-center">
  <div class="row mb-2">
    <div class="col-4 border bg-light py-2">col-4</div>
    <div class="col-8 border bg-light py-2">col-8</div>
  </div>
  <div class="row mb-2">
    <div class="col-3 border bg-light py-2">col-3</div>
    <div class="col-6 border bg-light py-2">col-6</div>
    <div class="col-3 border bg-light py-2">col-3</div>
  </div>
  <div class="row">
    <div class="col-12 border bg-light py-2">col-12 (full row)</div>
  </div>
</div>

Responsive columns with breakpoints

You can add a breakpoint to the class: col-sm-*, col-md-*, col-lg-*, col-xl-* and col-xxl-*. The rule works from that screen width and up. Smaller screens get the full width (stacked).

Class	Meaning
col-6	6 of 12 columns on all screen sizes
col-md-6	Stacked on small screens, 6 of 12 from 768px and up
col-12 col-md-6 col-lg-4	Full width on phones, half on tablets, one third on big screens

<div class="container text-center">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4 mb-2"><div class="border bg-light py-3">1</div></div>
    <div class="col-12 col-md-6 col-lg-4 mb-2"><div class="border bg-light py-3">2</div></div>
    <div class="col-12 col-md-12 col-lg-4 mb-2"><div class="border bg-light py-3">3</div></div>
  </div>
</div>

The preview is narrow, so the columns are stacked. Open this page on a big screen to see the three columns side by side.

The breakpoints

Name	Prefix	Starts at
Extra small	(no prefix)	0
Small	sm	576px
Medium	md	768px
Large	lg	992px
Extra large	xl	1200px
Extra extra large	xxl	1400px

Mobile first

Bootstrap is mobile first. A class without a breakpoint (like col-6) is used on all screens. A class with a breakpoint (like col-md-6) is used from that size and up. So start with the small screen, and add the changes for the bigger screens.

One column fills the rest

<div class="container text-center">
  <div class="row">
    <div class="col-3 border bg-light py-2">col-3</div>
    <div class="col border bg-light py-2">col (takes the rest)</div>
  </div>
</div>

Common mistakes

• Putting columns directly in a container, without a row.
• Using more than 12 columns in a row on purpose, and not knowing why they wrap.
• Forgetting the mobile layout. Always check the page on a small screen.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.