How to center a container in bootstrap 4 at given height?

Question

i want to center a container in bootstrap 4. i have an element of width 300px,

.guide-background{
    background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    /*filter: brightness(50%);*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <section id="guide" class="guide-background">
       
       <!-- I want to center this container with id #center_it -->
       
       <div class="container border border-danger" id="center_it">
           <div class="row">
               <div class="col align-self-center">
                   <h2 class="text-center"> <a href="" class="">Center Me</a></h2>
               </div>
           </div>
       </div>
       
   </section>

and then i put a container in it, then how it is possible to center container inside it. i tried to do it with grid system. but i failed . really need help with this

score 0 · Answer 1 · answered Jul 25 '18 at 15:07

You can use flex display for this, which Bootstrap already provided here at https://getbootstrap.com/docs/4.0/utilities/flex/

.guide-background {
  background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 350px;
  /*filter: brightness(50%);*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="guide" class="guide-background  d-flex align-items-center flex-colum">

  <!-- I want to center this container with id #center_it -->

  <div class="container border border-danger" id="center_it">
    <div class="row n">
      <div class="col  align-self-center ">
        <h2 class="text-center"> <a href="" class="">Center Me</a></h2>
      </div>
    </div>
  </div>

</section>

How to center a container in bootstrap 4 at given height?

1 Answers1