my bootstrap playground

by Leolloyd Andrade

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/6a831f2fb3.js"></script>
<div id="zs-root">
  <header class="navbar navbar-light bg-white border-bottom shadow-sm py-0 px-md-4 mb-3">
      <h5 class="my-0 mr-md-auto font-weight-normal py-3">
        Acme Inc 
      </h5>
      
      <nav class="my-2 my-md-0 mr-md-3">
        <a href="#" class="text-dark px-2 py-3 zs-navitem-border"><i class="fas fa-bomb"></i> Dynamites</a>
        <a href="#" class="text-dark p-2"><i class="fas fa-radiation"></i> Traps</a>
        <a href="#" class="text-dark p-2"><i class="fas fa-skull-crossbones"></i> Bait</a>
        <a href="#" class="text-dark p-2"><i class="fas fa-rocket"></i> Rockets</a>
      </nav>      
  </header>
  <div class="container">
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie tristique nisl, a finibus augue ornare a. Aenean cursus, enim quis mollis molestie, nibh elit dapibus risus, et eleifend turpis orci in leo. Aenean posuere facilisis est, quis tincidunt lacus auctor eget. Phasellus eu facilisis dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam feugiat eros sit amet congue tincidunt. Nulla pellentesque, dui in luctus rutrum, mi augue blandit lectus, quis facilisis nisi quam non odio. Proin a pretium purus.    
    </p>
    
    <footer class="my-md-5 pt-4 pt-md-5 border-top">
      <div class="row">
      
        <div class="col-md">
          <h5>
            Pricing
          </h5>
          
          <ul class="list-unstyled text-small">
            <li>
              <a href="#" class="text-muted">Cool Stuff</a>
            </li>
          </ul>
          
        </div>
        
        
      </div>
    </footer>
  </div>
</div>

SCSS

#zs-root {
  height: 100%;
}

.zs-navitem-border {
  border: 1px solid red;
}