title: Bootstrap 4 - justify content center on flexbox child (override flex parent container)
body: <p>Using Bootstrap 4, I'm trying to center an img at the botton middle of the main div. However, it does not center.</p>
  
  <p>How it should be:
  <a href="https://i.stack.imgur.com/b1qbA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b1qbA.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;!doctype html&gt;
            &lt;html lang="en"&gt;
              &lt;head&gt;
                &lt;title&gt;Hello, world!&lt;/title&gt;
                &lt;!-- Required meta tags --&gt;
                &lt;meta charset="utf-8"&gt;
                &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
                &lt;!-- Bootstrap CSS --&gt;
                &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
  
  
                 &lt;style&gt;
  
                   section.masthead2{
                      background-color:orange;
                      background-repeat: no-repeat;
                      background-attachment: scroll;
                      background-position: center center;
                      -webkit-background-size: cover;
                      -moz-background-size: cover;
                      -o-background-size: cover;
                      background-size: cover;
                      height:80vh;
                    }
                    .gear {
                      height: 50px;
                    }
                    .botonhome{
                      background-color:#eb6626;
                      color: #ffffff;
                      padding-left:2em;
                      padding-right:2em;
                      font-family:'Josefin Sans', sans-serif;
                      font-weight:500;
                      border-radius:0.5em;
                      font-size:1.2em;
                    }
                 &lt;/style&gt;
  
              &lt;/head&gt;
              &lt;body&gt;
                &lt;section class="container-fluid masthead2  d-flex align-items-center justify-content-center"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-12 d-flex justify-content-center"&gt;
                          &lt;h1 class="textoprincipal "&gt;Lorem Ipsum is simply dummy text of the printing&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="col-12 d-flex justify-content-center"&gt;
                        &lt;a class="btn botonhome mr-3" routerLink="/backoffice/job" routerLinkActive="active" role="button"&gt;Testing1&lt;/a&gt;
                        &lt;a class="btn  botonhome" routerLink="/backoffice/jobs" routerLinkActive="active" role="button"&gt;Testing2&lt;/a&gt;
                      &lt;/div&gt;         
                  &lt;/div&gt;
                  &lt;div class="row d-flex align-self-end "&gt;
                  &lt;div class="col-12"&gt;
                  &lt;img class="gear text-center" src="https://upload.wikimedia.org/wikipedia/commons/1/13/Cog%2C_Web_Fundamentals.svg"&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
                &lt;!-- Optional JavaScript --&gt;
                &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
                &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
                &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"&gt;&lt;/script&gt;
                &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
                &lt;!-- &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"&gt;&lt;/script&gt; --&gt;
              &lt;/body&gt;
            &lt;/html&gt;
  </code></pre>
  
  <p>Since the main container-fluid has d-flex both subsequents div rows are place one beside each other horizontally.
  Below is how it would look like without d-flex in the main container-fluid (used a background color for the gear to differentiate)
  <a href="https://i.stack.imgur.com/uSW68.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uSW68.png" alt="enter image description here"></a></p>
  
  <p>After d-flex is applied in the main container-fluid (since I need to align and justify the main title and buttons centered) the gear icon image is positioned on the left corner due to d-flex in main container. 
  <a href="https://i.stack.imgur.com/9IV9k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9IV9k.png" alt="enter image description here"></a>
  How would I made this element d-block override from it's main container-fluid so I can then move it at the bootom middle of the div?
  Can this be achieved via Bootstrap classes?</p>
  
  <p>I can not make two main container-fluid, since the background will be an image. </p>