Centering brand logo in Bootstrap Navbar

by

Try this:

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

Centering your logo by 50% and minus half of your logo width so that it won’t have problem when zooming in and out.

See fiddle

More Related Contents:

  1. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  2. How to change the bootstrap primary color?
  3. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  4. Bootstrap 3: pull-right for col-lg only
  5. Centering the image in Bootstrap
  6. Vertically align Bootstrap badge inside heading
  7. Bootstrap Center Vertical and Horizontal Alignment
  8. Why did Bootstrap 3 switch to box-sizing: border-box?
  9. How to use particular CSS styles based on screen size / device
  10. Remove gutter space for a specific div only
  11. How can I change the Bootstrap 4 navbar button icon color?
  12. Bootstrap with different order on mobile version
  13. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  14. Bootstrap 3 – disable navbar collapse
  15. Right to Left support for Twitter Bootstrap 3
  16. Search input with an icon Bootstrap
  17. Bootstrap 3 unable to display glyphicon properly
  18. Input widths on Bootstrap 3
  19. Change the order of col-*-12 columns in Bootstrap using push/pull
  20. Bootstrap 3 – Use more than 12 columns in a row
  21. Changing the width of Bootstrap popover
  22. How to change btn color in Bootstrap
  23. Make column fixed position in bootstrap
  24. How to add a search box with icon to the navbar in Bootstrap 3?
  25. How to fix unexpected column order in bootstrap 4?
  26. Label on the left side instead above an input field
  27. How to properly introduce a light/dark mode in Bootstrap?
  28. How do I make card-columns order horizontally?
  29. Centering the navbar content in Bootstrap 4 (alpha 5)
  30. Bootstrap Grid System new line does not look nice

Leave a Comment