Filling the main fluid content

After the navigation bar, we must fill the main content using a fluid layout. For that, we create a .container-fluid, just as we did in the <nav>. Inside the container, we create a single .row and two columns with spacing three and nine, respectively:

<div class="container-fluid">
  <div class="row">
    <div id="side-menu" class="col-md-3 hidden-xs">
    </div>

    <div id="main" class="col-md-9">
    </div>
  </div>
</div>

It is a common grid, containing one row. In the row, the first column, #side-menu, is shown from small viewports up to larger ones, while the #main column fills 9 out of 12 grids for medium resolutions.

However, we must not forget that #side-menu is actually an affix component. So, let's add the data properties to make it stitch to the top of the page, as we did in the web application example when you were learning this plugin:

<div class="container-fluid">
  <div class="row"&gt...