BOOTSTRAP 4 BUTTONS ALIGN-MIDDLE OF PAGE

By: Saurav

2017-10-10 20:54:00 UTC

One of the recent problems someone was facing was how to make bootstrap work with respect to aligning buttons in the middle. I had been there. Trying to learn bootstrap and using it in my projects efficiently was a challenge back then. The only way I was able to comprehend bootstrap to use it efficiently now was to use it again and again in my front end projects. Whether it be work or personal projects.

Few very important points I feel one should care about are:

1. Use < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> src before bootstrap src as bootstrap depends on jquery to work. You can place it in head or body. For performance, place in body, for loading scripts before DOM load, use it in head.
2. Consider bootstrap as automatically handling your div divisions: Bootstrap has 12 grid columns. If you want three divs in one div, aligned side by side, divide 12 by 3, which would be 4. So each div would have 4 columns.Similarly, if you want a div twice the size of another, and align it side by side, where the ratio is 2:1, divide 12 by 3, which is 4. Give 4X2 columns to bigger div and 4X1 to smaller div.
3. To avoid weird problems, always specify lg, sm, md, xs width at the same time for ever div. e.g. use < div col-xs-12 col-sm-12 col-md-12 col-lg-12 > instead of < div col-lg-12 >. This way, you have a habit of following a mobile first design methodology, think responsive and save time writing code right from start.
4. Wrap div row in a div col-lg-12 itself. A row should be inside a column. Columns should always be inside a row.

Now about the question, how can one align three buttons in the middle? The first reply I would give is "please give a clear requirement". What do you mean by middle? Middle as in all are stacked on top of each other and are in the middle OR all are side by side, having a 1/3 width?

Stackovrbootstrap

For middle, as in each button have 1/3 width, the process is: You want three divs aligned side by side in 100% width. Divide 12 by 3, we get 4.

So, have three divs with bootstrap column width 4 and wrap your elements inside.

< div id="content">
   < div class="container text-center">
    < div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
   < div class="row">
    < div class="col-lg-4 col-sm-4 col-xs-4 col-md-4">
      < a class="btn btn-dark btn-lg" a 
     href="Sanchez_Bootstrap_about.html" >A</a>
    < /div>

    < div class="col-lg-4 col-sm-4 col-xs-4 col-md-4">
      < a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_portfolio.html" >B</a>
    < /div>

    < div class="col-lg-4 col-sm-4 col-xs-4 col-md-4">     
      < a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_contact.html" >C</a>     
    < /div>

      < /div>

    < /div>
    < /div>
  < /div>

Stackovrbootstrap2

For the case of each stacked on top of each other, we would have bootstrap width as 12 columns for each: 12/1

< div id="content">
   < div class="container text-center">
    < div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
   < div class="row">
    < div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
      < a class="btn btn-dark btn-lg" a 
     href="Sanchez_Bootstrap_about.html" >Web 
     Developer</a>
    < /div>

    < div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">
      < a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
    < /div>

    < div class="col-lg-12 col-sm-12 col-xs-12 col-md-12">    
      < a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_contact.html" >Contact</a>     
    < /div>

      < /div>

    < /div>
    < /div>
  < /div>

Finally, if you want to align the buttons in the middle of the page/div, give a line height to the parent (row here) and give a vertical-align: middle to the children (col-lg-4...)

< div id="content">
   < div class="container text-center" style = "vertical-align:middle;
     < div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" >
   < div class="row" style = "line-height: 20em;">     
    < div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
      < a class="btn btn-dark btn-lg" a 
     href="Sanchez_Bootstrap_about.html" >Web 
     Developer</a>
    < /div>

    < div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">
      < a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_portfolio.html" >Portfolio</a>
    < /div>

    < div class="col-lg-4 col-sm-4 col-xs-4 col-md-4" style = "vertical-align: middle;">     
      < a class="btn btn-dark btn-lg" a 
      href="Sanchez_Bootstrap_contact.html" >Contact</a>     
    < /div>

      < /div>
    < /div>
    < /div>
< /div>

Here is a link to the codepen

Owned & Maintained by Saurav Prakash

If you like what you see, you can help me cover server costs or buy me a cup of coffee though donation :)