Bootstrap help

liamcrane · 26 Mar 2016 at 23:01

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">

<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>

Scotty123 · 26 Mar 2016 at 23:37

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

.

radderfire · 27 Mar 2016 at 12:55

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.

Dup · 27 Mar 2016 at 13:28

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.

kaku · 27 Mar 2016 at 19:20

This is more of a CSS layout question than a bootstrap-specific issue.

Here are a couple of decent primers for learning the basics:

CSS box model - http://learn.shayhowe.com/html-css/opening-the-box-model/
CSS layout model - http://learnlayout.com/