Bootstrap help

liamcrane

liamcrane

liamcrane

Soldato
Joined
23 Mar 2007
Posts
2,553
Location
Essex
Hi guys,

Just looking for some help with bootstrap, I'm trying to make my navigation but for some reason i cannot center the UL items in it. It seems to float to the left by default. Its driving me mad! I do like what boot strap offers but i find it frustrating to work with at times and I'm contemplating just using this grid system instead http://www.responsivegridsystem.com/. I know it doesnt have the custom classes bootstrap has but maybe doing everything from scratch might help.

If anyone could see from my code below how to center the UL in the navigation id be really grateful.

<body>
<nav class="navbar">
<div class="container-fluid">
<!--ADD NAVBAR HEADER -->
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Tuition & Practice</a></li>
<li><a href="#">Corporate Days</a></li>
<li><a href="#">Shooting Diary</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Gift Vouchers</a></li>
<li><a href="#">Hen & Stag Parties</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
 
Tried the:
PHP: 
text-align: center

for the css on it? You can do it inline if that's easier for you, but better to do it with a css selector. Simplest in that respect to select by class then e.g. class="navbar-linkItem" for each <a> tag.

I don't specialise in CSS and design, so maybe someone knows better :p.
 
Last edited:
I would suggest searching for "How to centre the contents of a div". It comes down to the entity you use to do the centering. It's either the surrounding div or the ul, not sure. However, it is harder than you'd think. You'll need to search and see if you can apply styles to either the surrounding div or ul.
 
For maximum compatilbitiy you can use inline-block for the list items to set them alongside each other then use text-align center on the parent.

So:
Code: 
.navbar-nav {
text-align: center;
}

.navbar-nav li {
display: inline-block;
padding:5px 10px;
}

Added the padding to space out the menu options.

There's always a flexbox approach too, however the above is probably the best method as Flexbox is still a little new and fiddly, and IE10+ only.
 
You must log in or register to reply here.
Back
Top Bottom