ndlr/fz/96 🦄

/home

/posts

/tags

/contact-me

Boostrap Grid, Breakpoints, Gutters, and Spacing

#Bootstrap5 #Webdev

Grid is a system for building fully responsive layout in Bootstrap.

You can create layout with Grid via the following classes:

  1. container or container-fluid (width 100%).
  2. row as row inside the container.
  3. cols as column inside the row.

Example:

<div class="container">
   <div class="row">
      <div class="col">
         <div>
            Col 1
         </div>
      </div>
      <div class="col">
         <div>
            Col 2
         </div>
      </div>
   </div>
</div>

6 Grid System for Responsive Layout #

There are 6 grid system in Bootstrap:

  1. Extra small with class col-* with the width auto or <576.
  2. Small with class col-sm-* with the width 576px to 767px.
  3. Medium with class col-md-* with the width 768px to 991px.
  4. Large with class col-lg-* with the width 992px to 1200px.
  5. Extra large with class col-xl-* with the width 1200px to 1400px.
  6. Extra extra large with class col-xxl-* with the width >=1400px.

Keep in mind that the * in column represent number between 1 to 12. And 12 is max of column number that you can have.

So..

How to create two columns with the same width? #

Answer: Create two columns with the class col-6 (6 + 6 = 12).

      <div class="col-6">
         <div>
            Col 1
         </div>
      </div>
      <div class="col-6">
         <div>
            Col 2
         </div>
      </div>

How to create two columns with the different width? #

Answer: Create two columns with the col-8 and col-4 (8 + 4 = 12).

      <div class="col-8">
         <div>
            Col 1
         </div>
      </div>
      <div class="col-4">
         <div>
            Col 2
         </div>
      </div>

Keep in mind that you can create columns max 12 or sum of col-* classes up to 12.

Breakpoint #

Breakpoint is the controller for reponsive design in Bootstrap. It determine when container adapt to the device viewport or width.

As you know there are 6 Grid System. So when container reached the breakpoint of the grid, the container will adapt and columns will change.

How Breakpoint and Grid works? #

  • Breakpoint works to the top.

When you define a single grid column such as col-md-4:

  1. The size will become bigger on Large, Extra Large, and Extra Extra Large.
  2. Columns will be stacked when viewport reached the breakpoint of Small and Extra Small viewport.

Example:

      <div class="row">
        <div class="col-md-4 bg-primary text-white">Column A</div>
        <div class="col-md-4 bg-info text-white">Column B</div>
        <div class="col-md-4 bg-success text-white">Column C</div>
      </div>

Explanation from the above script:

  • Each column will become bigger on Large, Extra Large, and Extra Extra Large viewport.
    • On screen >=768, columns bigger.
  • Each column will be stacked on Small and Extra Small viewport.
    • On screen <=767, columns will be stacked.

How to arrange columns on different viewport? #

Answer: Use multiple grid system on your class.

Example:

      <div class="row">
        <div class="col-lg-6 col-md-4 col-sm-12 bg-primary text-white">Column A</div>
        <div class="col-lg-3 col-md-4 col-sm-6 bg-info text-white">Column B</div>
        <div class="col-lg-3 col-md-4 col-sm 6 bg-success text-white">Column C</div>
      </div>

Explanation of the script above:

  • On lg, xl, and xxl Column A will be bigger col-lg-6 than Column B and C col-lg-3.
  • On md viewport, all columns will have the same size col-md-4.
  • On sm viewport, Column A will be full width col-sm-12, then Column B and C at the bottom with the same size col-sm-6.
  • On xs viewport, all columns will be stacked.

What is Gutters? #

Gutters is padding and provides spacing between your columns.

There are two gutters in Bootstrap:

  1. Horizontal for spacing left and right gx-*.
  2. Vertical for spacing top and bottom gy-*.

The value * for Gutters is between 1-5. You can use g-* to set up Gutters for both Horizontal and Vertical.

Spacing in Bootstrap #

It is Padding and Margin on Bootstrap.

Here the classes:

  • p-* for padding
  • m-* for margin

How about top, bottom, left, and right? Sure:

  • t for top
  • b for bottom
  • s or start
    • LTR: margin left or padding left
    • RTL: margin right or padding right
  • e or end
    • LTR: margin right or padding right
    • RTL: margin left or padding left
  • x for horizontal left and right
  • y for vertical top and bottom

Now you can use something like this:

  • pt-3 means Padding top is set to 3.
  • pt-md-2 means Padding top will become 2 on md viewport.

Keep in your mind that the * is value between 0-5 or auto.

How to create Responsive Layout without Overflow? #

Most people struggle for this with bootstrap (because so many questions about this on Stackoverflow and others), espcially when combining with gutters and spacing.

Answer: Here the step-by-step:

  1. Create container or container-fluid and expand the horizontal padding px-2 or px-0 to get full width.
  2. On your row class, add the gutters g-2 for spacing between columns.
  3. Wrap your the column content with new div.
  4. Optional, add py-2 for padding top and bottom on your content div.

Example:

    <div class="container-fluid px-0 text-center text-white">
      <div class="row g-2">
        <div class="col-lg-6 col-md-4 col-sm-12">
          <div class="bg-primary py-2">Column A</div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
          <div class="bg-info py-2">Column B</div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
          <div class="bg-success py-2">Column C</div>
        </div>
      </div>
    </div>

I believe this is the most important concept in Bootstrap for creating responsive layout. You can implement this tips on every containers.

bye.

←
Python Function Fundamentals
How to Center Element Problem in webdev
→
back to top