I am creating a angular 2 application using bootstrap. I want to have a navbar on my application so that app menu looks like
When viewed from smaller devices it should look as follows :
I have used following code in my html
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">COMPANY LOGO</a>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul *ngFor="let menu of menus;let first = first;" class="nav navbar-nav">
<li>
<a (click)="menuClicked(menu.categoryId)"
href='#/{{menu.categoryName}}'
style="color: #fff;font-size: 16px;font-weight:bold;cursor:pointer;">
{{menu.categoryName}}
</a>
</li>
</ul>
</div>
</div>
</nav>
Which gives me following output :
Can someone guide how to achieve desired output?
#Mandar Patil, I've linked to a codeply project that should meet your requirements.
For the brand on the collapsed navigation menu, you can just use bootstraps visible and hidden utility classes, and specify the appropriate breakpoints.
HTML
<div class="container hidden-xs visible-sm visible-md visible-lg">
<div class="row">
<div class="col-12">
<a class="navbar-brand" href="#">COMPANY LOGO</a>
</div>
</div>
</div>
...
<div class="navbar-header" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#" style="color: white;">COMPANY LOGO</a>
</div>
You can try For this:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-md-12 clearfix">
<div class="row">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</div>
<div class="col-md-12 clearfix">
<div class="row">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
</div>
Perhaps its my css but my code should show the image in the header at a fixed size. However, it looks like it may be outside of the div. Heres the code.
<div class="row">
<div class="col-md-12 top navbar-fixed-top">
<div class="col-md-6">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="http://dev-httpwwwrestechsyscom.pantheonsite.io/sites/all/themes/myWay/logo.png"></a>
</div></nav></div>
<div class="col-md-6">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<ul class="menu"><li class="first expanded dropdown active">About Us <span class="caret"></span><ul class="dropdown-menu"><li class="first leaf active">Mission Statement</li>
<li class="leaf">Meet Our Team</li>
<li class="leaf">Testimonials</li>
<li class="last leaf">Sample Athletes Profile</li>
</ul></li>
<li class="leaf">Eligibility</li>
<li class="expanded dropdown">Recruiting <span class="caret"></span><ul class="dropdown-menu"><li class="first leaf">Recruiting FAQ</li>
<li class="last leaf">Recruiting Info</li>
</ul></li>
<li class="last leaf">Services</li>
</ul><li class="active"></li>
</ul>
</div>
</div></div></div>
You can fix it in this way. Just add desired height to brand image and width will be auto based on height. For example:
.navbar-brand img {
height: 30px;
}
You can add a max-height: 100% to the .navbar-brand img element and it will contain the image inside of .navbar-brand. The height of .navbar-brand is 50px from bootstrap's css, so to make it bigger than that, change the height of .navbar-brand
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-brand img {
max-height: 100%;
}
/* add/change this if you want to make the navbar brand area bigger */
.navbar-brand {
height: 100px;
}
</style>
<div class="row">
<div class="col-md-12 top navbar-fixed-top">
<div class="col-md-6">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="http://dev-httpwwwrestechsyscom.pantheonsite.io/sites/all/themes/myWay/logo.png"></a>
</div>
</nav>
</div>
<div class="col-md-6">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<ul class="menu">
<li class="first expanded dropdown active">About Us <span class="caret"></span>
<ul class="dropdown-menu">
<li class="first leaf active">Mission Statement</li>
<li class="leaf">Meet Our Team</li>
<li class="leaf">Testimonials</li>
<li class="last leaf">Sample Athletes Profile</li>
</ul>
</li>
<li class="leaf">Eligibility</li>
<li class="expanded dropdown">Recruiting <span class="caret"></span>
<ul class="dropdown-menu">
<li class="first leaf">Recruiting FAQ</li>
<li class="last leaf">Recruiting Info</li>
</ul>
</li>
<li class="last leaf">Services</li>
</ul>
<li class="active"></li>
</ul>
</div>
</div>
</div>
</div>
I have this Bootstrap head menu, and i want the Login anchor, allways on the right, after the UL nav, and collapsed button.
I've tried a .pull-right on that, but didn't work.
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Logo" src=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home</li>
<li class="dropdown">link2</li>
<li class="">link3</li>
<li class="">link4</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
<a href="#" class="btn btn-primary">
Login</a></div>
</nav>
</header>
Because there's problem with jsfiddle currently, I'll paste modified code here:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="pull-right">
<a id="rightAnchor" href="#" class="btn btn-primary">
Login</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home
</li>
<li class="dropdown">link2
</li>
<li class="">link3
</li>
<li class="">link4
</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
Firsltly, you're missing one closing div, just before the nav closing tag. Next, I've added div with pull-right class just before button in navbar-header. Finally, add some margins so that login anchor would look same as menu:
#rightAnchor {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
UPDATE: I did not check how it behaves when we have different resolution. How about this: we create 2 login anchors and controll theirs appearance with media queries? With this HTML would look like this:
<header id="main-header">
<nav class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div id="rightAnchorMobile" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Logo" src=""/></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<div id="rightAnchor" class="pull-right">
<a href="#" class="btn btn-primary">
Login</a>
</div>
<ul id="nav" class="nav navbar-nav nav-pills navbar-right">
<li>home
</li>
<li class="dropdown">link2
</li>
<li class="">link3
</li>
<li class="">link4
</li>
<li class="">link4
<ul class="dropdown-menu">
<li>sublink</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
And CSS:
#media screen and (min-width:768px) {
#rightAnchorMobile {
display: none;
}
}
#media screen and (max-width: 768px) {
#rightAnchor {
display: none;
}
}
#rightAnchorMobile > a {
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
}
#rightAnchor > a {
margin-top: 8px;
margin-left: 15px;
margin-bottom: 8px;
}
I have got a problem with rows which are overlapping in this following code:
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar navbar-fixed-top ">
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
Site.com
</a>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
<li>NL</li>
<li>ENG</li>
<li>SP</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="row">
<div class="col-md-6"><h1>This is my header</h1></div>
<div class="col-md-6"><img src="img/MyPicture.JPG" height="300"></div>
</div>
In my browser the last rows lies over the navbar. Could it be that it has got something to do with the second row being outside the container? If so where should I define the container.
Here is the jsfiddle text: http://jsfiddle.net/L9GJE/
Wrap <div class="row"> with a <div class="container">
e.g.
<div class="container">
<div class="row">
....
</div>
</div>
So whenever you use the navbar you'll need to keep in mind that it is fixed and you will need to add margin or padding from the top so your rows won't overlap.
Your navbar is fixed, so, you need to add margin-top to second row.
Your navbar was not made correctly, here is the correct usage of the navbar class:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>This is my header</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>
In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right?
Here is what I've tried so far, and it ends up being aligned so that Logo A is on the left, menu items next to the logo on the left and Logo B on the right.
<div class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="images/Logo_B.png" class="img-responsive"></li>
</ul>
</div>
</div>
</div>
2021 Update
Bootstrap 5 (beta)
Bootstrap 5 also has a flexbox Navbar, and introduces new RTL support. For this reason the concept of "left" and "right" has been replaced with "start" and "end". Therefore the margin utilities changed for Bootstrap 5 beta:
ml-auto => ms-auto
mr-auto => me-auto
Also note that data-toggle and data-target have changed too:
data-toggle => data-bs-toggle
data-target => data-bs-target
Navbar Demo for Bootstrap 5
Bootstrap 4
Now that Bootstrap 4 has flexbox, Navbar alignment is much easier. Here are updated examples for left, right and center in the Bootstrap 4 Navbar, and many other alignment scenarios demonstrated here.
The flexbox, auto-margins, and ordering utility classes can be used to align Navbar content as needed. There are many things to consider including the order and alignment of Navbar items (brand, links, toggler) on both large screens and the mobile/collapsed views. Don't use the grid classes (row,col) for the Navbar.
Here are various examples...
Left, center(brand) and right links:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
http://codeply.com/go/qhaBrcWp3v
Another BS4 Navbar option with center links and overlay logo image:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto my-2 order-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/120/ccff00" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Or, these other Bootstrap 4 alignment scenarios:
brand left, dead center links, (empty right)
brand and links center, icons left and right
More Bootstrap 4 examples:
toggler left on mobile, brand right
center brand and links on mobile
right align links on desktop, center links on mobile
left links & toggler, center brand, search right
Also see: Bootstrap 4 align navbar items to the right
Bootstrap 4 navbar right align with button that doesn't collapse on mobile
Center an element in Bootstrap 4 Navbar
Bootstrap 3
Option 1 - Brand center, with left/right nav links:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
</ul>
</div>
</nav>
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
http://bootply.com/98314 (3.x)
Option 2 - Left, center and right nav links:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li>Center</li>
<li>Center</li>
<li>Center</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
</ul>
</div>
</nav>
#media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
http://bootply.com/SGYC6BWeBK
Option 3 - Center both brand and links
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
#media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://codeply.com/go/1lrdvNH9GI
More examples:
Left brand, center links
Left toggler, center brand
For 3.x also see nav-justified: Bootstrap center navbar
Center Navbar in Bootstrap
Bootstrap 4 align navbar items to the right
Bootstrap 4
We have many ways to align navBars Items.
For Left Align
class = "navbar-nav mr-auto"
For Right Align
class = "navbar-nav ml-auto"
For Center Align
class = "navbar-nav mx-auto"
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootstrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>
Bootstrap 4 (as of alpha 6)
Navbars are built with flexbox! Instead of floats, you’ll need flexbox and margin utilities.
For Align Right use justify-content-end on the collapse div:
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
Full example here: https://jsbin.com/kemawa/edit?output
I needed something similar (left, center and right aligned items), but with ability to mark centered items as active. What worked for me was:
http://www.bootply.com/CSI2KcCoEM
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">Left 1</li>
<li class="navbar-left">Left 2</li>
<li class="active">Center 1</li>
<li>Center 2</li>
<li>Center 3</li>
<li class="navbar-right">Right 1</li>
<li class="navbar-right">Right 2</li>
</ul>
</div>
</nav>
CSS:
#media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
In bootstrap 5 the classes are changed, so for
ml-auto is changes with ms-auto AND
mr-auto is changes with me-auto
For left we have to use s instead of l, And
For Right we have to use e instead of r
Smack my head, just reread my answer and realized the OP was asking for two logo's one on the left one on the right with a center menu, not the other way around.
This can be accomplished strictly in the HTML by using Bootstrap's "navbar-right" and "navbar-left" for the logos and then "nav-justified" instead of "navbar-nav" for your UL. No addtional CSS needed (unless you want to put the navbar-collapse toggle in the center in the xs viewport, then you need to override a bit, but will leave that up to you).
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-left"><img src="http://placehold.it/150x30"></div>
</div>
<div class="navbar-brand navbar-right"><img src="http://placehold.it/150x30"></div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li>home</li>
<li>about</li>
</ul>
</div>
</nav>
Bootply: http://www.bootply.com/W6uB8YfKxm
For those who got here trying to center the "brand" here is my old answer:
I know this thread is a little old, but just to post my findings when working on this. I decided to base my solution on skelly's answer since tomaszbak's breaks on collaspe. First I created my "navbar-center" and turned off float for the normal navbar in my CSS:
.navbar-center
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-brand{
float:none;
}
However the issue with skelly's answer is if you have a really long brand name (or you wanted to use an image for your brand) then once you get to the the sm viewport there could be overlapping due to the absolute position and as the commenters have said, once you get to the xs viewport the toggle switch breaks (unless you use Z positioning but I really didn't want to have to worry about it).
So what I did was utilize the bootstrap responsive utilities to create multiple version of the brand block:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand visible-xs">Brand That is Really Long</div>
</div>
<div class="navbar-brand visible-sm text-center">Brand That is Really Long</div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm">Brand That is Really Long</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
<li>Right</li>
</ul>
</div>
So now the lg and md viewports have the brand centered with links to the left and right, once you get to the sm viewport your links drop to the next line so that you don't overlap with your brand, and then finally at the xs viewport the collaspe kicks in and you are able to use the toggle. You could take this a step further and modify the media queries for the navbar-right and navbar-left when used with navbar-brand so that in the sm viewport the links are all centered but didn't have the time to vet it out.
You can check my old bootply here: www.bootply.com/n3PXXropP3
I guess having 3 brands might be just as much hassle as the "z" but I feel like in the world of responsive design this solution fits my style better.
this is an update for BS5 and a suggested edit for #Zim's answer. Unfortunately I can't submit the edit as the edit queue is full. It would be good if a user with high reputation could submit the edit once the queue allows new edits.
2021 Update
Bootstrap 5.0.0 beta-1
With the addition of RTL-support, ml-auto and mr-auto become ms-auto and me-auto (left/right to start/end).
Bootstrap 5 also requires the navbar to be contained inside a container div.
This code produces the equivalent of the first Bootstrap 4 example:
Left, center(brand) and right links:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
In bootstrap 5 ms-auto worked for me to move the nav items right
the code of bootstrap was:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
I changed at ul tag <ul class="navbar-nav"> to <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> and it's worked fine for me
my code after editing is :
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand nav-title" href="#">Cooking Master</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
You set the margin left to auto -> ml-auto on the section you want to move to the right.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
I found the following was a better solution depending on the content of your left, center and right items. A width of 100% without a margin caused overlapping of divs and was preventing anchor tags to work correctly - that is without the messy use of z-indexes.
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
margin: auto;
margin-left: 48%;
}
This is a dated question but I found an alternate solution to share right from the bootstrap github page. The documentation has not been updated and there are other questions on SO asking for the same solution albeit on slightly different questions. This solution is not specific to your case but as you can see the solution is the <div class="container"> right after <nav class="navbar navbar-default navbar-fixed-top"> but can also be replaced with <div class="container-fluid" as needed.
<!DOCTYPE html>
<html>
<head>
<title>Navbar right padding broken </title>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Hello
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group navbar-btn" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
The solution was found on a fiddle on this page:
https://github.com/twbs/bootstrap/issues/18362
and is listed as a won't fix in V3.
<div class="d-flex justify-content-start">hello</div>
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>
Put the fields that you want to center, right or left according above division.
In Zim's answer the example 5 left and center only with empty space right is not really centering the navlinks. We can fix it using a few changes:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<p>Zim's original code</p>
<!-- example 5 left and center only with empty space right -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap">
<div class="container-fluid">
<button class="navbar-toggler flex-grow-sm-1 flex-grow-0 me-2" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand flex-grow-1">Navbar 5</span>
<div class="navbar-collapse collapse flex-grow-1 justify-content-center" id="navbar5">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="flex-grow-1">
<!--spacer-->
</div>
</div>
</nav>
<div class="centerMarker">mid</div>
<br><br><br>
<p>Modified solution</p>
<!-- example 5 left and center only -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap">
<!-- 2.5rem is height of the toggler -->
<div class="container-fluid" style="height:2.5rem">
<span class="navbar-brand position-absolute">
<button class="navbar-toggler me-2" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
Navbar 5
</span>
<div class="navbar-collapse collapse mx-auto w-100" id="navbar5">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="centerMarker">mid</div>
<style>
body {
font-family: monospace;
padding: 10px
}
.centerMarker {
margin: 0 auto;
width: fit-content;
background-color: wheat;
}
</style>
Switch to full page and resize browser to see navlinks.
Bootstrap doesn't allow us to set flex-basis:0, so the property remains auto and the spacer doesn't expand equally. So the navlinks are not centered.
We can use class position-absolute on brand container and mx-auto w-100 on navlinks. The toggler sets the min height of the navbar to 2.5rem. That we have to set to the fluid div container.
The simplest solution:
Just divide the navbar into columns: for instance, if you have 24 columns over all, 12 are going to be empty and 12 are going to contrain the navbar:
<nav class="navbar navbar-default">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-12">
<ul class="nav navbar-nav" align="center">
<li>Home</li>
<li>First Link</li>
<li>Second Link</li>
<li>Third Link</li>
<li>Fourth Link</li>
</ul>
</div>
</div>
</nav>