Bootstrap get div to align in the center

Question

I am trying to get some buttons on my footer to align to the center but for some reason it does not seem to work.

<div class="footer">
  <div class="container">   
    <div class="navbar-text pull-left">
      <p> Hello there </p>
    </div>
        <div class="Button" align="center">  
            <a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
            <a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
        </div>
    <div class="navbar-text pull-right">
      <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a>
      <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
      <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
    </div>
  </div>
</div>

I am not sure if I need to use CSS to make it go in the middle or if I should just use align, but nothing is working

This question is related to html twitter-bootstrap css twitter-bootstrap-3

User · Accepted Answer

In bootstrap you can use  text-centerto align center  also add  row and  col-md-  to your code  align  is deprecated  Added  col-xs-  for demo  x000D   x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 5 0 css font-awesome min css  rel  stylesheet    gt   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet    gt   lt div class  footer  gt     lt div class  container  gt       lt div class  row  gt         lt div class  col-xs-4  gt           lt p gt Hello there lt  p gt         lt  div gt         lt div class  col-xs-4 text-center  gt           lt a href     class  btn btn-warning  onclick  changeLook    gt Re lt  a gt           lt a href     class  btn btn-warning  onclick  changeBack    gt Rs lt  a gt         lt  div gt         lt div class  col-xs-4 text-right  gt           lt a href     gt  lt i class  fa fa-facebook-square fa-2x  gt  lt  i gt  lt  a gt           lt a href     gt  lt i class  fa fa-twitter fa-2x  gt  lt  i gt  lt  a gt           lt a href     gt  lt i class  fa fa-google-plus fa-2x  gt  lt  i gt  lt  a gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D   UPDATE OCT 2017  For those who are reading this and want to use the new version of bootstrap  beta version   you can do the above in a simpler way  using Boostrap Flexbox utilities classes  x000D   x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 5 0 css font-awesome min css  rel  stylesheet    gt   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  rel  stylesheet    gt   lt div class  container footer  gt     lt div class  d-flex justify-content-between  gt       lt div class  p-1  gt         lt p gt Hello there lt  p gt       lt  div gt       lt div class  p-1  gt         lt a href     class  btn btn-warning  onclick  changeLook    gt Re lt  a gt         lt a href     class  btn btn-warning  onclick  changeBack    gt Rs lt  a gt       lt  div gt       lt div class  p-1  gt         lt a href     gt  lt i class  fa fa-facebook-square fa-2x  gt  lt  i gt  lt  a gt         lt a href     gt  lt i class  fa fa-twitter fa-2x  gt  lt  i gt  lt  a gt         lt a href     gt  lt i class  fa fa-google-plus fa-2x  gt  lt  i gt  lt  a gt       lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

When I align elements in center I use the bootstrap class text-center    lt div class  text-center  gt Centered content goes here lt  div gt

[html] Bootstrap get div to align in the center

The answer is

UPDATE(OCT 2017)

Examples related to html

Examples related to twitter-bootstrap

Examples related to css

Examples related to twitter-bootstrap-3

Tags