Twitter Bootstrap 4 : Grid System

You can use a container class to hold all contents in a page. It renders the contents of a page to a fixed width. Add the following code within the body section of the html page we created in the previous article.

<div class="container">
    <h1>Hello Container</h1>
</div>
<div>
    <h1>I am outside the container</h1>
</div>

<p>You can also use class='container-fluid'</p>

Container fluid takes up the full-width of the viewport, except for 15 pixels padding left and right. Inside the container, you can have as many rows as you want.

<div class="container">
  <h1>Inside Container</h1>
  <div class="row">
      <div>Row 1</div>
  </div>
  <div class="row">
      <div>Row 2</div>
  </div>
  <div class="row">
      <div>Row 3</div>
  </div>
</div>

<div>
  <h1>Outside Container</h1>
</div>  

You can define columns within a row like this:

<div class="container">
  <h1>Columns within a Row</h1>
  <div class="row">
    <div class="col-sm-1">Col 1</div>
    <div class="col-sm-1">Col 2</div>
    <div class="col-sm-1">Col 3</div>
    <div class="col-sm-1">Col 4</div>
    <div class="col-sm-1">Col 5</div>
    <div class="col-sm-1">Col 6</div>
    <div class="col-sm-1">Col 7</div>
    <div class="col-sm-1">Col 8</div>
    <div class="col-sm-1">Col 9</div>
    <div class="col-sm-1">Col 10</div>
    <div class="col-sm-1">Col 11</div>
    <div class="col-sm-1">Col 12</div>
  </div>
</div>

<p>Smaller view ports revert to a stacked view</p>

The twelve columns will render within one row on desktop, if the device is small to display all the columns you will see the columns stacked over each other. You can define columns that add up to 12 within a row like this:

<div class="container">
  <h1>Breaking News</h1>
  <div class="row">
    <div class="col-sm-3">Section 1</div>
    <div class="col-sm-3">Section 2</div>
    <div class="col-sm-3">Section 3</div>
    <div class="col-sm-3">Section 4</div>
  </div>
</div>

Twitter Bootstrap 4

If you want the elements to take up a different number of columns as the viewport size changes, you can define the column widths for all breakpoints, and Bootstrap will decide which rule to apply.

<div class="container">
  <h1>Breaking News</h1>
  <div class="row">
    <div class="col-xs-6 col-sm-3">Section 1</div>
    <div class="col-xs-6 col-sm-3">Section 2</div>
    <div class="col-xs-6 col-sm-3">Section 3</div>
    <div class="col-xs-6 col-sm-3">Section 4</div>
  </div>
</div>

Twitter Bootstrap 4

You can nest the rows and columns like this:

<div class="container">
  <h1>Breaking News</h1>
  <div class="row">
    <div class="col-xs-6 col-sm-3">
      <h5>Headline 1</h5>
      <div class="row">
        <div class="col-sm-4">Section 1</div>
        <div class="col-sm-4">Section 2</div>
        <div class="col-sm-4">Section 3</div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3">
      <h5>Headline 2</h5>
      <div class="row">
        <div class="col-sm-4">Section 4</div>
        <div class="col-sm-4">Section 5</div>
        <div class="col-sm-4">Section 6</div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3">
      <h5>Headline 3</h5>
      <div class="row">
        <div class="col-sm-4">Section 7</div>
        <div class="col-sm-4">Section 8</div>
        <div class="col-sm-4">Section 9</div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3">
      <h5>Headline 4</h5>
      <div class="row">
        <div class="col-sm-4">Section 10</div>
        <div class="col-sm-4">Section 11</div>
        <div class="col-sm-4">Section 12</div>
      </div>
    </div>
  </div>
</div>    

Twitter Bootstrap 4

In this article, we saw how the Twitter Bootstrap 4 grid works by experimenting with the rows, columns and viewport related classes to layout the webpage.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.