Bootstrap 4 – Responsive Web Design

Do a grid again

We have finally finished the navigation bar. Now it's time to the page main content. For that, we must create a page grid. Following how Twitter uses a three-column-based layout, we will do the same. The HTML code for the scaffolding is the one that should be placed after the <nav> element:

<div class="container">
  <div class="row">
    <div id="profile" class="col-md-3 hidden-sm hidden-xs"></div>
    <div id="main" class="col-sm-12 col-md-6"> </div>
    <div id="right-content" class="col-md-3 hidden-sm hidden-xs"> </div>
  </div>
</div>

To understand it, we just created a .container with a single .row. The .row contains three columns, the first and the last being visible only for medium and larger devices. This is because of the .hidden-sm and ...