How to center items in Bootstrap navbar - html

Question

I've tried my best but unfortunately I am not able to position the Text Center 1 and 2 elements in the middle of the navbar. Hope you can help me out. Thanks.
<div class="navbar navbar-default navbar-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>Left</p>
</div>
<div class="navbar-text ???">
<i>Text Center 1</i>
<i>Text Center 2</i>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</div>

Answer 1

Bootstrap has a predefined centered text class text-center that you can add to any element/div.
example: <div class="navbar-text text-center">
View all bootstrap alignment classes here: http://getbootstrap.com/css/#type-alignment

Answer 2

Just give the div that you want to center the text-align:CENTER; property.
Sometimes it is just easier to use plain CSS instead of Bootstrap.
div.center{
text-align:CENTER;
}
<div class="navbar navbar-default navbar-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>Left</p>
</div>
<div class="navbar-text center">
<i>Text Center 1</i>
<i>Text Center 2</i>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</div>

Answer 3

Class text-center helps you to center Text Center links only when screen-size is less then 768px (but in this case social links fall down!), if screen-size is more 768px, bootstrap's class navbar-text has property float: left and your links will be left side of navbar. To prevent its behavior, you need to apply float: none and display: inline-block properties for middle navbar:
<div class="navbar navbar-default navbar-bottom" role="navigation">
<div class="container text-center">
<div class="navbar-text pull-left">
<p>Left</p>
</div>
<div class="navbar-text myClass">
<i>Text Center 1</i>
<i>Text Center 2</i>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</div>
.myClass {
float: none;
display: inline-block;
}
class text-center in this case is used for div.container
JSFiddle-example