title: Overlay a bootstrap 4 transparent navbar over an image using flexbox
body: <p>I need to place a transparent bootstrap 4 navbar over a full screen image utilising flexbox. I need to be able to expand a carousel container (swiper.js) to fill the view port.</p>
  
  <p>I have managed to expand the carousel container to fill the view port but the navbar does not appear transparently over it. To view what it currently does [click here][1]. To view what I would like to achieve [click here][2]</p>
  
  <pre><code>        &lt;nav class="navbar navbar-expand-md navbar-light bg-transparent"&gt;
              &lt;div class="navbar-brand pr-5"&gt;
                  &lt;a class="d-inline-block" routerLink="/home"&gt;
                      &lt;img src="assets/logo-dark.png" alt="" height="43"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse navbars" id="navbar-navigation"&gt;
                  &lt;div class="navbar-nav"&gt;
                      &lt;a class="nav-item nav-link text-uppercase" href="#&gt;Home&lt;/a&gt;
                      &lt;a class="nav-item nav-link text-uppercase" href="#&gt;Service&lt;/a&gt;
                      &lt;a class="nav-item nav-link text-uppercase" href="#&gt;Product&lt;/a&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="d-flex flex-fill"&gt;
          &lt;div class="swiper-container"&gt;
              &lt;div class="swiper-wrapper"&gt;
                  &lt;div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');"&gt;
                      Slide 1&lt;/div&gt;
                  &lt;div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');"&gt;
                      Slide 2&lt;/div&gt;
                  &lt;div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');"&gt;
                      Slide 3&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
              &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
              &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;main class="page-content content-boxed"&gt;
      Page content goes here ...
  &lt;/main&gt;
  
  
    [1]: https://i.stack.imgur.com/1eB42.png
    [2]: https://i.stack.imgur.com/2fr9H.png
  </code></pre>