26

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

dippas
  • 58,591
  • 15
  • 114
  • 126
CamelHump
  • 273
  • 1
  • 3
  • 6
  • It works well here: https://jsfiddle.net/qmt26y5d/. Maybe you have some CSS which is interfering with it? More code should be supplied. – Keith Anderson Mar 08 '16 at 22:59
  • Works for me https://jsfiddle.net/7oe5kh9L/ – Adam Buchanan Smith Mar 08 '16 at 23:00
  • I am not sure why the fonts on the right hand side go down a bit is well, is there a way to make it on the same line – CamelHump Mar 08 '16 at 23:04
  • Future readers using **Bootstrap 4 or Bootstrap 5** see: [Bootstrap Center Vertical and Horizontal Alignment](https://stackoverflow.com/questions/42388989/bootstrap-center-vertical-and-horizontal-alignment/44801382#44801382) – Carol Skelly Jul 13 '21 at 12:12

2 Answers2

32

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <p>Hello there</p>
      </div>
      <div class="col-xs-4 text-center">
        <a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
        <a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
      </div>
      <div class="col-xs-4 text-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>
</div>

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container footer">
  <div class="d-flex justify-content-between">
    <div class="p-1">
      <p>Hello there</p>
    </div>
    <div class="p-1">
      <a href="#" class="btn btn-warning" onclick="changeLook()">Re</a>
      <a href="#" class="btn btn-warning" onclick="changeBack()">Rs</a>
    </div>
    <div class="p-1">
      <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>
Community
  • 1
  • 1
dippas
  • 58,591
  • 15
  • 114
  • 126
  • Thats great, also do u know why the fots on the right hand side go down? is there a way to make it all on the same line? – CamelHump Mar 08 '16 at 23:05
31

When I align elements in center I use the bootstrap class text-center:

<div class="text-center">Centered content goes here</div>

Benargee
  • 162
  • 1
  • 2
  • 8
Dimitar Popov
  • 686
  • 5
  • 12