CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
Sarah xa
Sarah xa

Reputation: 21

How to center bootstrap nav bar?

I have a bootstrap navbar, I want to center home page1 page2 page3 . I've searched all related questions in stackoverflow but I couldn't find any suiting my purpose, I've used padding and it works but when I shrink the browser, the selected items get displayed having inappropriate size. This is my code:

http://jsfiddle.net/wr3t003r/

Upvotes: 0

Views: 112

Answers (2)

Danny T
Danny T

Reputation: 112

an easy way is to add a text-center class to your nav bar. like this:

<ul class="nav navbar-nav navbar-right text-center">

Upvotes: 2

Robert Hosking
Robert Hosking

Reputation: 134

You just needed a couple of styles to get the behaviour that I think you wanted. It looks like you were going the display:inline-block route to center the elements, so I'll just continue along that approach. To your existing styles, add/modify definitions so that these styles are included:

.nav.nav-center {
    margin:0;
    float:none;
}

.navbar-inner{
    text-align:center;
}

With that, the two options should move to the exact center of your navigation bar. Here's a JSFiddle example to show you what this would look like. I hope this is what you were looking for! If not, let me know and I'll be happy to help further.

Upvotes: 0

Related Questions