Menu
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
768
To center div both vertically and horizontally use flexbox utilities. See the examples. Add d-flex align-items-center justify-content-center classes to the parent element to center its content vertically and horizontally.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
You can use text-center for the row and can make sure the internal divs have display:inline-block (with not float ).
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
