3

I am using the latest version of Bootstrap (2.02) and I want to center all of the links in the navbar and still have a responsive layout. I cannot find a solution to having a centered and fixed layout let alone a responsive as well.

Can anyone point me in the right direction?

madth3
  • 7,275
  • 12
  • 50
  • 74
Somk
  • 11,869
  • 32
  • 97
  • 143

2 Answers2

4

If you don't care about IE<8 you can add the following CSS

.navbar .nav{
    float: none;
    text-align: center;
}
.navbar .nav > li{
    float: none;
    display: inline-block;
}
basaundi
  • 1,725
  • 1
  • 13
  • 20
  • Thank you this has worked for fixed and I am going to test with responsive. Do you have any suggestions for how I could make this work with older IE browsers – Somk Jan 25 '13 at 23:13
  • Also I will accept your answer in a few hours if there are no other better solutions – Somk Jan 25 '13 at 23:13
  • You can take a look here http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to see if you can use inline-block in old IEs. I did not put that in the answer as I don't have access to IE at home. edit: Better http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6 – basaundi Jan 25 '13 at 23:18
0

The following should work for the center alignment:

.navbar .nav > li > a {
  padding: 15px 20px; 
  text-align: center;
  float: none;
  display: inline-block;
}

It seems that IE 8 and versions below don't support media queries.

avneet723
  • 84
  • 3