Topic: how to make left logo image and center website name in navbar

Rawan Alaufi free asked 6 years ago

I have this nav bar i want to make it like this(logo      website name           username)I tried to make website name in center  but it does not work

<nav class="navbar navbar-default\\\" style=\\\"font-weight: bold; background-color: white; margin-bottom: 0;border-color: transparent;\\\" role=\\\"navigation\\\"><!-- Brand and toggle get grouped for better mobile display --><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><h3 id=\\\"logo\\\" style=\\\"margin-top: 0;color:#183F66\\\"><img style=\\\" margin:0 !important;;\\\" src=\\\"~/images/logo3_resz.png\\\" alt=\\\"logo\\\" /> Smart archiVe for IT senior project at KAU</h3></div><div class=\\\"collapse navbar-collapse\\\" id=\\\"myNavbar\\\"><ul class=\\\"nav navbar-nav navbar-right\\\" style=\\\"padding-top:10px\\\"><li><a href=\\\"#\\\" style=\\\"color:#183F66\\\"><span class=\\\"glyphicon glyphicon-log-out\\\" style=\\\"color:#183F66\\\"></span> Logout</a></li><li><a href=\\\"#\\\" style=\\\"color:#183F66\\\"><span class=\\\"glyphicon glyphicon-user\\\" style=\\\"color:#183F66\\\"></span> username</a></li></ul></div></nav>

johnwalsh1020 free answered 4 years ago

Here is solution to make center align in Bootstrap. Thq

Jakub Strebeyko staff answered 6 years ago

Hi there Rawan,

Thanks for reaching out! Navbar uses display: flex; for aligning its content, and so, to distribute content within evenly, you could try to do the same with .navbar-header:

.navbar {
 display: flex;
 justify-content: space-around;

I am not sure, if I understand what you want in your navbar, as the three things you mentioned (logo, website name and username) do not include the button necessary for toggling the menu sliding out and back (the insides of navbar-collapse). If you want to have the username displayed at all times, you have to in turn take it out of the navbar-collapse parent element.

With Best Regards,


Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No