Bootstrap 4 – Responsive Web Design

The last navigation bar with flexbox

You may be bored of doing navigation bars; however, because of the acquired experience, we will do this one very quickly, taking advantage of the code written in previous examples.

Create a <nav> element, and inside it, create a .container-fluid and a .row:

<nav class="navbar navbar-fixed-top">
  <div class="container-fluid">
    <div class="row">
    </div>
  </div>
</nav>

This .row element will have two columns, just as we mentioned that will be done for the main container. On the first one, let's create the dashboard title and a refresh button, as follows:

<nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 top-left-menu"> <div class="navbar-header"> <a class="navbar-brand" ...