How do i shift the text in twitter bootstrap navbar to center?
Depending on where you want the Brand link to appear, here are two possiblities
http://jsfiddle.net/panchroma/cW9sA/
or
http://jsfiddle.net/panchroma/GWMnF/
EDIT: A third variation where the iPolice brand link is always centered, even at narrow viewports
http://jsfiddle.net/panchroma/F5x5Z/
Note that in the second example I've added a copy of the brand link into the main menu, and used the utility classes of .hidden-desktop and .visible-desktop to fine tune how this is displayed at different viewports
Important CSS is
#twitterbootstrap .navbar .nav,
#twitterbootstrap .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
#twitterbootstrap .navbar-inner {
text-align:center;
}
Some of this CSS is based on an answer from Andres Ilich
Good luck!
Centering my text in Bootstrap navbar
add text-center
class to <div class="container-fluid-nav text-center">
Center content in responsive bootstrap navbar
I think this is what you are looking for. You need to remove the float: left
from the inner nav to center it and make it a inline-block.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
http://jsfiddle.net/bdd9U/2/
Edit: if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query.
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
http://jsfiddle.net/bdd9U/3/
Center an element in Bootstrap Navbar
In Bootstrap 4, there is a new utility known as .mx-auto
. You just need to specify the width of the centered element.
Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
Diffferent from Bass Jobsen's answer, which is a relative center to the elements on both ends, the following example is absolute centered.
Here's the HTML:
<nav class="navbar bg-faded">
<div class="container">
<ul class="nav navbar-nav pull-sm-left">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-logo mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Brand</a>
</li>
</ul>
<ul class="nav navbar-nav pull-sm-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 6</a>
</li>
</ul>
</div>
</nav>
And CSS:
.navbar-logo {
width: 90px;
}
How can I center Twitter-Bootstrap 3 navbar links?
Bootstrap 3 has a nav-justified
class that can be used on nav
. No extra CSS required:
<div class="container">
<h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Demo: http://bootply.com/72519
Based on the comments, to have full-width centered links using the navbar-nav
class, use flexbox...
.navbar-center {
width:100%;
display: flex;
}
.navbar-center>li {
flex:1 1 auto;
}
<div class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-center text-center">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>
https://www.codeply.com/go/6ZE3obnpuP
Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap
Text can't center in Bootstrap navbar-toggle
Try it without Float:
.navbar-nav {
margin:0 auto;
display: block;
text-align: center;
}
Bootstrap navbar-brand causing navbar-nav items to shift right from centered position in nav bar?
There are a few different ways to do this, and I guess it depends on what you are going to do further down the track, but the easiest thing is probably to take the .navbar-brand out of the document flow, so that the .navbar-nav ignores it when centering.
You can do this quite easily by adding something like this:
.navbar-brand {
position: absolute;
}
You can check it out over here: http://codepen.io/anon/pen/PNMBQx
Hope that helps, and good luck!
Related Topics
How to Remove a CSS Class from a Jqgrid Cell
How to Add Linear-Gradient Color to Mui Chip Background
CSS Transition on an Initially Hidden Elemement
Target First Letter of Each Word in CSS
Vertically Center HTML Element Within a Div of Dynamic Height
Differencebetween :Where() and :Is()
CSS :After Input Placeholder Not Working in Mozilla
Less Class Name String Interpolation Not Working
Article Push/Pull Alignment Using Bootstrap 3
How to Use Pseudo-Elements (:After, :Before) Inside a Table Row
Ie Z-Index Trouble on Element with Transparent Background
How to Round-Off an Image with CSS
Horizontal and Vertical Center Text in HTML
CSS Media Query Not Working in Ie 9