Center an element in Bootstrap 4 Navbar

Question

No matter what I try  I can t center something in Bootstrap navbar  any solutions for it    I ve tried adding a div  using margin 0 auto  or margin-right auto  margin-left auto   used center-block class  Nothing works  why is so hard to achieve something so simple I can t understand  what I m doing wrong   Here s the current code     lt nav class  navbar navbar-fixed-top navbar-dark main-nav  gt   lt div class  container  gt       lt ul class  nav navbar-nav pull-left  gt           lt li class  nav-item active  gt               lt a class  nav-link  href     gt Home lt  a gt           lt  li gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Download lt  a gt           lt  li gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Register lt  a gt           lt  li gt       lt  ul gt        lt ul class  nav navbar-nav text-center  gt           lt li class  nav-item  gt  lt a class  nav-link  href     gt Website Name lt  a gt  lt  li gt       lt  ul gt        lt ul class  nav navbar-nav pull-right  gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Rates lt  a gt           lt  li gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Help lt  a gt           lt  li gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Contact lt  a gt           lt  li gt       lt  ul gt   lt  div gt

User · Accepted Answer

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    lt nav class  navbar bg-faded  gt     lt div class  container  gt       lt ul class  nav navbar-nav pull-sm-left  gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link 1 lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link 2 lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link 3 lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link 4 lt  a gt         lt  li gt       lt  ul gt       lt ul class  nav navbar-nav navbar-logo mx-auto  gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Brand lt  a gt         lt  li gt       lt  ul gt       lt ul class  nav navbar-nav pull-sm-right  gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link 5 lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link 6 lt  a gt         lt  li gt       lt  ul gt     lt  div gt   lt  nav gt    And CSS    navbar-logo     width  90px

User · Answer

I had a similar problem  the anchor text in my Bootstrap4 navbar wasn t centered  Simply added text-center in the anchor s class

User · Answer

See  https   stackoverflow com a 14146967 1596547  now you can use    lt nav class  navbar navbar-light main-nav  gt   lt div class  container text-xs-center  gt       lt ul class  nav navbar-nav pull-xs-left  gt           lt li class  nav-item active  gt               lt a class  nav-link  href     gt Home lt  a gt           lt  li gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Download lt  a gt           lt  li gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Register lt  a gt           lt  li gt       lt  ul gt        lt ul class  nav navbar-nav  style  display  inline-block   gt           lt li class  nav-item  gt  lt a class  nav-link  href     gt Website Name lt  a gt  lt  li gt       lt  ul gt        lt ul class  nav navbar-nav pull-xs-right  gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Rates lt  a gt           lt  li gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Help lt  a gt           lt  li gt           lt li class  nav-item  gt               lt a class  nav-link  href     gt Contact lt  a gt           lt  li gt       lt  ul gt   lt  div gt   lt  nav gt    apply text-xs-center on your container and set display  inline-block  for your list

User · Answer

Try this     nav-tabs  gt  li      float none  important      display inline-block  important      nav-tabs       text-align center  important

User · Answer

from the docs     Navbars may contain bits of text with the help of  navbar-text  This class adjusts vertical alignment and horizontal spacing for strings of text    i applied the  navbar-text class to my  lt li gt  element  so the result is    lt li class  nav-item navbar-text  gt    this centers the links vertically with respect to my navbar-brand img

User · Answer

use mx-auto will do the job   lt ul class  navbar-nav mx-auto  gt

User · Answer

Updated for Bootstrap 4 1   Bootstrap 4 the navbar now uses flexbox so the Website Name can be centered using mx-auto  The left and right side menus don t require floats     lt nav class  navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav  gt       lt div class  container  gt           lt ul class  nav 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 li class  nav-item  gt                   lt a class  nav-link  href     gt Download lt  a gt               lt  li gt               lt li class  nav-item  gt                   lt a class  nav-link  href     gt Register lt  a gt               lt  li gt           lt  ul gt           lt ul class  nav navbar-nav mx-auto  gt               lt li class  nav-item  gt  lt a class  nav-link  href     gt Website Name lt  a gt  lt  li gt           lt  ul gt           lt ul class  nav navbar-nav  gt               lt li class  nav-item  gt                   lt a class  nav-link  href     gt Rates lt  a gt               lt  li gt               lt li class  nav-item  gt                   lt a class  nav-link  href     gt Help lt  a gt               lt  li gt               lt li class  nav-item  gt                   lt a class  nav-link  href     gt Contact lt  a gt               lt  li gt           lt  ul gt       lt  div gt   lt  nav gt    Navbar center with mx-auto Demo  If the Navbar only has a single navbar-nav  then justify-content-center can also be used to center   EDIT  In the solution above  the Website Name is centered relative to the left and right navbar-nav so if the width of these adjacent navs are different the Website Name is no longer centered     To resolve this  one of the flexbox workarounds for absolute centering can be used     Option 1 - Use position absolute   Since it s ok to use absolute positioning in flexbox  one option is to use this on the item to be centered    abs-center-x       position  absolute      left  50       transform  translateX -50        Navbar center with absolute position Demo  Option 2 - Use flexbox nesting  Finally  another option is to make the centered item also display flexbox  using d-flex  and center justified  In this case each navbar component must have flex-grow 1  As of Bootstrap 4 Beta  the Navbar is now display flex  Bootstrap 4 1 0 includes a new flex-fill class to make each nav section fill the width    lt nav class  navbar navbar-expand-sm navbar-dark bg-dark main-nav  gt       lt div class  container justify-content-center  gt           lt ul class  nav navbar-nav flex-fill w-100 flex-nowrap  gt               lt li class  nav-item active  gt                   lt a class  nav-link  href     gt Home lt  a gt               lt  li gt               lt li class  nav-item  gt                   lt a class  nav-link  href     gt Download lt  a gt               lt  li gt               lt li class  nav-item  gt                   lt a class  nav-link  href     gt Register lt  a gt               lt  li gt               lt li class  nav-item  gt                   lt a class  nav-link  href     gt More lt  a gt               lt  li gt           lt  ul gt           lt ul class  nav navbar-nav flex-fill justify-content-center  gt               lt li class  nav-item  gt  lt a class  nav-link  href     gt Center lt  a gt  lt  li gt           lt  ul gt           lt ul class  nav navbar-nav flex-fill w-100 justify-content-end  gt               lt li class  nav-item  gt                   lt a class  nav-link  href     gt Help lt  a gt               lt  li gt               lt li class  nav-item  gt                   lt a class  nav-link  href     gt Contact lt  a gt               lt  li gt           lt  ul gt       lt  div gt   lt  nav gt    Navbar center with flexbox nesting Demo  Prior to Bootstrap 4 1 0 you can add the flex-fill class like this      flex-fill      flex 1     As of 4 1 flex-fill is included in Bootstrap     Bootstrap 4 Navbar center demos More centering demos Center links on desktop  left align on mobile  Related  How to center nav-items in Bootstrap  Bootstrap NavBar with left  center or right aligned items How move   39 nav  39  element under   39 navbar-brand  39  in my Navbar

User · Answer

Why Not using bootstrap utilities  here is the code       lt nav class  navbar navbar-expand-md bg-light navbar-light fixed-top  gt     lt  -- Brand -- gt     lt a class  navbar-brand  href     gt  lt img src  your-logo   gt  lt  a gt      lt  -- Toggler collapsibe Button -- gt     lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   collapsibleNavbar  gt       lt span class  navbar-toggler-icon  gt  lt  span gt     lt  button gt      lt  -- Navbar links -- gt     lt div class  collapse navbar-collapse mx-auto justify-content-md-center  id  collapsibleNavbar   gt       lt ul class  navbar-nav col-md-auto  gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link lt  a gt         lt  li gt         lt li class  nav-item  gt           lt a class  nav-link  href     gt Link lt  a gt         lt  li gt        lt  ul gt     lt  div gt    lt  nav gt

User · Answer

make new style   container       position  relative     center-nav       position  absolute      left  0      right  0      margin  0 auto      width  auto      max-width  200px      text-align  center     center-nav li    text-align  center    width 100       Replace website name UL with below   lt ul class  nav navbar-nav center-nav  gt           lt li class  nav-item  gt  lt a class  nav-link  href     gt Website Name lt  a gt  lt  li gt    lt  ul gt    Hope this helps

[css] Center an element in Bootstrap 4 Navbar

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to navbar