Bootstrap NavBar with left center or right aligned items

Question

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    lt div class  navbar navbar-fixed-top navbar-custom   gt     lt div class  container   gt       lt div class  navbar-header  gt         lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt         lt  button gt         lt a class  navbar-brand  href     gt  lt span class  navbar-logo  gt Logo A lt  span gt  lt  a gt       lt  div gt       lt div class  collapse navbar-collapse  gt         lt ul class  nav navbar-nav  gt           lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt           lt li gt  lt a href   about  gt Menu Item 1 lt  a gt  lt  li gt           lt li gt  lt a href   contact  gt Menu Item 2 lt  a gt  lt  li gt           lt li gt  lt a href   about  gt Menu Item 3 lt  a gt  lt  li gt         lt  ul gt         lt ul class  nav navbar-nav navbar-right  gt           lt li gt  lt a href     gt  lt img src  images Logo B png  class  img-responsive  gt  lt  a gt  lt  li gt         lt  ul gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

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>

User · Answer

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

User · Answer

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     lt nav class  navbar navbar-expand-sm bg-dark navbar-dark  gt   lt a routerLink     class  navbar-brand  href     gt Bootsrap 4 lt  a gt   lt ul class  navbar-nav ml-auto  gt   lt li class  nav-item  gt   lt a class  nav-link  href  home  gt Home lt  a gt   lt  li gt   lt li class  nav-item  gt   lt a class  nav-link  href  about  gt About lt  a gt   lt  li gt   lt li class  nav-item  gt   lt a class  nav-link  href  contact  gt Contact us lt  a gt   lt  li gt   lt  ul gt   lt  nav gt

User · Answer

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  lt div class  container  gt  right after  lt nav class  navbar navbar-default navbar-fixed-top  gt  but can also be replaced with  lt div class  container-fluid  as needed    lt  DOCTYPE html gt   lt html gt    lt head gt     lt title gt Navbar right padding broken  lt  title gt     lt script src    code jquery com jquery-2 1 4 min js  gt  lt  script gt     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt     lt link rel  stylesheet  href    maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css    gt   lt  head gt    lt body gt     lt nav class  navbar navbar-default navbar-fixed-top  gt       lt div class  container  gt         lt div class  navbar-header  gt           lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-ex1-collapse  gt             lt span class  sr-only  gt Toggle navigation lt  span gt             lt span class  icon-bar  gt  lt  span gt             lt span class  icon-bar  gt  lt  span gt             lt span class  icon-bar  gt  lt  span gt           lt  button gt           lt a href      class  navbar-brand  gt Hello lt  a gt         lt  div gt         lt div class  collapse navbar-collapse navbar-ex1-collapse  gt            lt ul class  nav navbar-nav navbar-right  gt             lt li gt               lt div class  btn-group navbar-btn  role  group  aria-label       gt                 lt button type  button  class  btn btn-default  data-toggle  modal  data-target   modalLogin  gt Se connecter lt  button gt                 lt button type  button  class  btn btn-default  data-toggle  modal  data-target   modalSignin  gt Cr  er un compte lt  button gt               lt  div gt             lt  li gt           lt  ul gt         lt  div gt       lt  div gt     lt  nav gt   lt  body gt    lt  html gt    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

User · Answer

2021 Update Bootstrap 5  beta  Bootstrap 5 also has a flexbox Navbar  and introduces new RTL support  For this reason the concept of  quot left quot  and  quot right quot  has been replaced with  quot start quot  and  quot end quot   Therefore the margin utilities changed for Bootstrap 5 beta   ml-auto   gt  ms-auto mr-auto   gt  me-auto  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    lt nav class  quot navbar navbar-expand-md navbar-dark bg-dark quot  gt       lt div class  quot navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2 quot  gt           lt ul class  quot navbar-nav mr-auto quot  gt               lt li class  quot nav-item active quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Left lt  a gt               lt  li gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   codeply com quot  gt Codeply lt  a gt               lt  li gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Link lt  a gt               lt  li gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Link lt  a gt               lt  li gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Link lt  a gt               lt  li gt           lt  ul gt       lt  div gt       lt div class  quot mx-auto order-0 quot  gt           lt a class  quot navbar-brand mx-auto quot  href  quot   quot  gt Navbar 2 lt  a gt           lt button class  quot navbar-toggler quot  type  quot button quot  data-toggle  quot collapse quot  data-target  quot  dual-collapse2 quot  gt               lt span class  quot navbar-toggler-icon quot  gt  lt  span gt           lt  button gt       lt  div gt       lt div class  quot navbar-collapse collapse w-100 order-3 dual-collapse2 quot  gt           lt ul class  quot navbar-nav ml-auto quot  gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Right lt  a gt               lt  li gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Link lt  a gt               lt  li gt           lt  ul gt       lt  div gt   lt  nav gt   http   codeply com go qhaBrcWp3v  Another BS4 Navbar option with center links and overlay logo image    lt nav class  quot navbar navbar-expand-lg navbar-dark bg-dark quot  gt       lt div class  quot navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0 quot  gt           lt ul class  quot navbar-nav ml-auto text-center quot  gt               lt li class  quot nav-item active quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Link lt  a gt               lt  li gt           lt  ul gt       lt  div gt       lt div class  quot mx-auto my-2 order-0 order-md-1 position-relative quot  gt           lt a class  quot mx-auto quot  href  quot   quot  gt               lt img src  quot   placehold it 120 ccff00 quot  class  quot rounded-circle quot  gt           lt  a gt           lt button class  quot navbar-toggler quot  type  quot button quot  data-toggle  quot collapse quot  data-target  quot  dual-collapse2 quot  gt               lt span class  quot navbar-toggler-icon quot  gt  lt  span gt           lt  button gt       lt  div gt       lt div class  quot navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2 quot  gt           lt ul class  quot navbar-nav mr-auto text-center quot  gt               lt li class  quot nav-item quot  gt                   lt a class  quot nav-link quot  href  quot   quot  gt Link lt  a gt               lt  li gt           lt  ul gt       lt  div gt   lt  nav gt    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  amp  toggler  center brand  search right  Also see  Bootstrap 4 align navbar items to the right Bootstrap 4 navbar right align with button that doesn  39 t collapse on mobile Center an element in Bootstrap 4 Navbar  Bootstrap 3 Option 1 - Brand center  with left right nav links    lt nav class  quot navbar navbar-default quot  role  quot navigation quot  gt     lt div class  quot navbar-header quot  gt       lt button type  quot button quot  class  quot navbar-toggle quot  data-toggle  quot collapse quot  data-target  quot  navbar-collapse quot  gt         lt span class  quot icon-bar quot  gt  lt  span gt         lt span class  quot icon-bar quot  gt  lt  span gt         lt span class  quot icon-bar quot  gt  lt  span gt       lt  button gt         lt  div gt     lt a class  quot navbar-brand quot  href  quot   quot  gt Brand lt  a gt     lt div class  quot navbar-collapse collapse quot  gt       lt ul class  quot nav navbar-nav navbar-left quot  gt           lt li gt  lt a href  quot   quot  gt Left lt  a gt  lt  li gt           lt li gt  lt a href  quot  about quot  gt Left lt  a gt  lt  li gt       lt  ul gt       lt ul class  quot nav navbar-nav navbar-right quot  gt         lt li gt  lt a href  quot  about quot  gt Right lt  a gt  lt  li gt         lt li gt  lt a href  quot  contact quot  gt Right lt  a gt  lt  li gt       lt  ul gt     lt  div gt   lt  nav gt    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    lt nav class  quot navbar navbar-default quot  role  quot navigation quot  gt     lt div class  quot navbar-header quot  gt       lt button type  quot button quot  class  quot navbar-toggle quot  data-toggle  quot collapse quot  data-target  quot  navbar-collapse quot  gt         lt span class  quot icon-bar quot  gt  lt  span gt         lt span class  quot icon-bar quot  gt  lt  span gt         lt span class  quot icon-bar quot  gt  lt  span gt       lt  button gt         lt  div gt     lt div class  quot navbar-collapse collapse quot  gt       lt ul class  quot nav navbar-nav quot  gt           lt li gt  lt a href  quot   quot  gt Left lt  a gt  lt  li gt       lt  ul gt       lt ul class  quot nav navbar-nav navbar-center quot  gt           lt li gt  lt a href  quot   quot  gt Center lt  a gt  lt  li gt           lt li gt  lt a href  quot   quot  gt Center lt  a gt  lt  li gt         lt li gt  lt a href  quot   quot  gt Center lt  a gt  lt  li gt       lt  ul gt       lt ul class  quot nav navbar-nav navbar-right quot  gt           lt li gt  lt a href  quot   quot  gt Right lt  a gt  lt  li gt       lt  ul gt     lt  div gt   lt  nav gt    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

User · Answer

lt div class  d-flex justify-content-start  gt hello lt  div gt       lt div class  d-flex justify-content-end  gt hello lt  div gt   lt div class  d-flex justify-content-center  gt hello lt  div gt   lt div class  d-flex justify-content-between  gt hello lt  div gt   lt div class  d-flex justify-content-around  gt hello lt  div gt    Put the fields that you want to center  right or left according above division

User · Answer

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    lt div class  collapse navbar-collapse justify-content-end  gt     lt ul class  navbar-nav  gt       lt li class  nav-item active  gt         lt a class  nav-link  href     gt Home lt  a gt       lt  li gt     lt  ul gt   lt  div gt    Full example here  https   jsbin com kemawa edit output

User · Answer

You set the margin left to auto -  ml-auto on the section you want to move to the right      lt nav class  navbar navbar-expand-lg navbar-light bg-light  gt   lt a class  navbar-brand  href     gt Navbar lt  a gt   lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarNavAltMarkup  aria-controls  navbarNavAltMarkup  aria-expanded  false  aria-label  Toggle navigation  gt     lt span class  navbar-toggler-icon  gt  lt  span gt   lt  button gt   lt div class  collapse navbar-collapse  id  navbarNavAltMarkup  gt     lt div class  navbar-nav ml-auto  gt    lt --MARGIN LEFT AUTO HERE  -- gt       lt a class  nav-item nav-link active  href     gt Home  lt span class  sr-only  gt  current  lt  span gt  lt  a gt       lt a class  nav-item nav-link  href     gt Features lt  a gt       lt a class  nav-item nav-link  href     gt Pricing lt  a gt       lt a class  nav-item nav-link disabled  href     tabindex  -1  aria-disabled  true  gt Disabled lt  a gt     lt  div gt   lt  div gt

User · Answer

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   lt nav class  navbar navbar-default  role  navigation  gt     lt div class  navbar-header  gt       lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt       lt  button gt         lt  div gt     lt div class  navbar-collapse collapse  gt       lt ul class  nav navbar-nav  gt         lt li class  navbar-left  gt  lt a href     gt Left 1 lt  a gt  lt  li gt         lt li class  navbar-left  gt  lt a href     gt Left 2 lt  a gt  lt  li gt         lt li class  active  gt  lt a href     gt Center 1 lt  a gt  lt  li gt         lt li gt  lt a href     gt Center 2 lt  a gt  lt  li gt         lt li gt  lt a href     gt Center 3 lt  a gt  lt  li gt         lt li class  navbar-right  gt  lt a href     gt Right 1 lt  a gt  lt  li gt         lt li class  navbar-right  gt  lt a href     gt Right 2 lt  a gt  lt  li gt       lt  ul gt     lt  div gt   lt  nav gt    CSS    media  min-width  768px       navbar-nav       width  100       text-align  center         navbar-nav  gt  li       float  none      display  inline-block         navbar-nav  gt  li navbar-right       float  right  important

User · Answer

You can use this format  lt  -- NAVBAR START -- gt           lt nav class  quot navbar py-3 py-4 text-uppercase nav-over-video navbar-expand-lg navbar-white bg-white quot  gt               lt div class  quot container-fluid d-flex quot  gt                   lt div class  quot justify-content-start quot  gt                       lt a class  quot navbar-brand quot  href  quot   quot  gt                           lt img src  quot img logo png quot  height  quot 50px quot  alt  quot  quot  class  quot img quot  gt                       lt  a gt                   lt  div gt                   lt div class  quot justify-content-end quot  gt                       lt button class  quot navbar-toggler quot  type  quot button quot  data-bs-toggle  quot collapse quot                          data-bs-target  quot  navbarSupportedContent quot  aria-controls  quot navbarSupportedContent quot                          aria-expanded  quot false quot  aria-label  quot Toggle navigation quot  gt                           lt span gt                               lt svg xmlns  quot http   www w3 org 2000 svg quot  width  quot 16 quot  height  quot 16 quot  fill  quot currentColor quot                                  class  quot bi bi-menu-button-wide quot  viewBox  quot 0 0 16 16 quot  gt                                   lt path                                     d  quot M0 1 5A1 5 1 5 0 0 1 1 5 0h13A1 5 1 5 0 0 1 16 1 5v2A1 5 1 5 0 0 1 14 5 5h-13A1 5 1 5 0 0 1 0 3 5v-2zM1 5 1a 5 5 0 0 0- 5 5v2a 5 5 0 0 0  5 5h13a 5 5 0 0 0  5- 5v-2a 5 5 0 0 0- 5- 5h-13z quot    gt                                   lt path                                     d  quot M2 2 5a 5 5 0 0 1  5- 5h3a 5 5 0 0 1 0 1h-3a 5 5 0 0 1- 5- 5zm10 823 323l- 396- 396A 25 25 0 0 1 12 604 2h 792a 25 25 0 0 1  177 427l- 396 396a 25 25 0 0 1- 354 0zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8 5a 5 5 0 0 1  5- 5h9a 5 5 0 0 1 0 1h-9a 5 5 0 0 1- 5- 5zm0 4a 5 5 0 0 1  5- 5h6a 5 5 0 0 1 0 1h-6a 5 5 0 0 1- 5- 5z quot    gt                               lt  svg gt                           lt  span gt                       lt  button gt                        lt div class  quot collapse navbar-collapse quot  id  quot navbarSupportedContent quot  gt                           lt ul class  quot navbar-nav me-auto mb-2 mb-lg-0 quot  gt                               lt li class  quot nav-item quot  gt                                   lt a class  quot nav-link active quot  aria-current  quot page quot  href  quot   quot  gt Home lt  a gt                               lt  li gt                               lt li class  quot nav-item quot  gt                                   lt a class  quot nav-link quot  href  quot   quot  gt Link lt  a gt                               lt  li gt                               lt li class  quot nav-item dropdown quot  gt                                   lt a class  quot nav-link dropdown-toggle quot  href  quot   quot  id  quot navbarDropdown quot  role  quot button quot                                      data-bs-toggle  quot dropdown quot  aria-expanded  quot false quot  gt                                      Dropdown                                  lt  a gt                                   lt ul class  quot dropdown-menu quot  aria-labelledby  quot navbarDropdown quot  gt                                       lt li gt  lt a class  quot dropdown-item quot  href  quot   quot  gt Action lt  a gt  lt  li gt                                       lt li gt  lt a class  quot dropdown-item quot  href  quot   quot  gt Another action lt  a gt  lt  li gt                                       lt li gt  lt a class  quot dropdown-item quot  href  quot   quot  gt Something else here lt  a gt  lt  li gt                                   lt  ul gt                               lt  li gt                           lt  ul gt                       lt  div gt                   lt  div gt               lt  div gt           lt  nav gt            lt  -- As a link -- gt           lt  -- NAVBAR ENDS  -- gt

User · Answer

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     lt nav class  navbar navbar-default  role  navigation  gt     lt div class  navbar-header  gt       lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt       lt  button gt       lt div class  navbar-brand navbar-left  gt  lt a href     gt  lt img src  http   placehold it 150x30  gt  lt  a gt  lt  div gt      lt  div gt     lt div class  navbar-brand navbar-right  gt  lt a href     gt  lt img src  http   placehold it 150x30  gt  lt  a gt  lt  div gt      lt div class  navbar-collapse collapse  gt       lt ul class  nav nav-justified  gt           lt li gt  lt a href     gt home lt  a gt  lt  li gt           lt li gt  lt a href   about  gt about lt  a gt  lt  li gt       lt  ul gt     lt  div gt   lt  nav gt    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    lt nav class  navbar navbar-default  role  navigation  gt   lt div class  navbar-header  gt     lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt       lt span class  icon-bar  gt  lt  span gt       lt span class  icon-bar  gt  lt  span gt       lt span class  icon-bar  gt  lt  span gt     lt  button gt     lt div class  navbar-brand visible-xs  gt  lt a href     gt Brand That is Really Long lt  a gt  lt  div gt   lt  div gt   lt div class  navbar-brand visible-sm text-center  gt  lt a href     gt Brand That is Really Long lt  a gt  lt  div gt   lt div class  navbar-brand navbar-center hidden-xs hidden-sm  gt  lt a href     gt Brand That is Really Long lt  a gt  lt  div gt    lt div class  navbar-collapse collapse  gt     lt ul class  nav navbar-nav navbar-left  gt         lt li gt  lt a href     gt Left lt  a gt  lt  li gt         lt li gt  lt a href   about  gt Left lt  a gt  lt  li gt         lt li gt  lt a href     gt Left lt  a gt  lt  li gt         lt li gt  lt a href   about  gt Left lt  a gt  lt  li gt         lt li gt  lt a href     gt Left lt  a gt  lt  li gt         lt li gt  lt a href   about  gt Left lt  a gt  lt  li gt     lt  ul gt     lt ul class  nav navbar-nav navbar-right  gt       lt li gt  lt a href   about  gt Right lt  a gt  lt  li gt       lt li gt  lt a href   contact  gt Right lt  a gt  lt  li gt       lt li gt  lt a href   about  gt Right lt  a gt  lt  li gt       lt li gt  lt a href   contact  gt Right lt  a gt  lt  li gt       lt li gt  lt a href   about  gt Right lt  a gt  lt  li gt       lt li gt  lt a href   contact  gt Right lt  a gt  lt  li gt     lt  ul gt   lt  div gt      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

User · Answer

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    lt nav class  navbar navbar-default  gt       lt div class  row  gt          lt div class  col-sm-4  gt  lt  div gt          lt div class  col-sm-4  gt  lt  div gt          lt div class  col-sm-4  gt  lt  div gt           lt div class  col-sm-12  gt              lt ul class  nav navbar-nav  align  center  gt                 lt li gt  lt a href     gt Home lt  a gt  lt  li gt                 lt li gt  lt a href     gt First Link lt  a gt  lt  li gt                 lt li gt  lt a href     gt Second Link lt  a gt  lt  li gt                 lt li gt  lt a href     gt Third Link lt  a gt  lt  li gt                 lt li gt  lt a href     gt Fourth Link lt  a gt  lt  li gt              lt  ul gt          lt  div gt       lt  div gt   lt  nav gt

[css] Bootstrap NavBar with left, center or right aligned items

Bootstrap 5.0.0 beta-1

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to navbar

Examples related to bootstrap-5