CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Beginner16
Beginner16

Reputation: 11

How to center items in Bootstrap navbar

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 ???">
      <a href="#"><i>Text Center 1</i></a>
      <a href="#"><i>Text Center 2</i></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>
    </div>
  </div>
</div>

Upvotes: 1

Views: 678

Answers (3)

Igor Ivancha
Igor Ivancha

Reputation: 3451

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">
      <a href="#"><i>Text Center 1</i></a>
      <a href="#"><i>Text Center 2</i></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>
    </div>
  </div>
</div>

.myClass {
  float: none;
  display: inline-block;
}

class text-center in this case is used for div.container

JSFiddle-example

Upvotes: 0

BrainHappy
BrainHappy

Reputation: 432

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

Upvotes: 2

Wowsk
Wowsk

Reputation: 3675

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">
	  <a href="#"><i>Text Center 1</i></a>
	  <a href="#"><i>Text Center 2</i></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>
	</div>
  </div>
</div>

Upvotes: 0

Related Questions