Why is the Bootstrap Navbar always collapsed? [duplicate]

by

Bootstrap 5 (update 2021)

As stated in the docs,

“Navbars require a wrapping .navbar with
.navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing”

Therefore, Bootstrap 5 Navbar is the same as the Bootstrap 4 Navbar and will be vertically “collapse” if you don’t include navbar-expand-*

Bootstrap 4 (original answer)

In Bootstrap 4, the navbar-expand* class is needed if you want the navbar to expand horizontally, otherwise it defaults to the mobile/collapsed version. Therefore, not including the navbar-expand* class makes the Navbar always collapsed.

See these navbar breakpoint examples

As of Bootstrap 4 beta, the navbar-toggleable-* classes have changed to navbar-expand-*. In your case navbar-toggleable-sm would change to navbar-expand-md.

More Related Contents:

  1. Center the content inside a column in Bootstrap
  2. Left align and right align within div in Bootstrap
  3. Disable responsive (mobile) navbar in Bootstrap
  4. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  5. Using media breakpoints in Bootstrap 4-alpha
  6. Bootstrap – I don’t want columns to have the same height
  7. Unable to override $theme-color in bootstrap
  8. Bootstrap align navbar items to the right
  9. Change navbar color in Twitter Bootstrap
  10. Five equal columns in twitter bootstrap
  11. How to extend/modify (customize) Bootstrap with SASS
  12. How to make the row stretch remaining height
  13. Bootstrap Rows and Columns – Do I need to use row?
  14. Bootstrap Center Vertical and Horizontal Alignment
  15. Missing visible-** and hidden-** in Bootstrap v4
  16. Responsive website zoomed out to full width on mobile
  17. Bootstrap 5 navbar align items right
  18. Bootstrap – row can I have columns add up to more then 12?
  19. Wrapping bootstrap columns in extra div
  20. How to create new breakpoints in bootstrap 4 using CDN?
  21. Bootstrap 4 Navbar align logo center and toggle icon on the left
  22. Bootstrap 4 Multiple fixed-top navbars
  23. How to left column fixed and right scrollable in Bootstrap 4, responsive?
  24. Missing visible-** and hidden-** in Bootstrap
  25. bootstrap 4 nav doesn’t display hamburger on resize
  26. How can I center an image in Bootstrap?
  27. Bootstrap 5 – Custom theme-colors not updating classes
  28. How can I get my Twitter Bootstrap buttons to right align?
  29. Bootstrap 4 responsive navbar vertical
  30. How to fix the error; ‘Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)’

Leave a Comment