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 ...