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 ...
Get Bootstrap 4 By Example now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.