How to make a Bootstrap 4 full width dropdown in Navbar?

by

Use w-100 (width:100%) on the dropdown-menu, and make sure the parent .dropdown
is position-static to allow the menu to expand to full width…

<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#" style="color: red;">LOGO GOES HERE</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item dropdown position-static">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
                <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/0QHWWNsMyI

Alternative, set min-width in CSS:

https://www.codeply.com/go/fClz4WpC8u/bootstrap-4-dropdown-width

Complex “mega menu” example

More Related Contents:

  1. Change navbar color in Twitter Bootstrap
  2. Center an element in Bootstrap Navbar
  3. Bootstrap 4 – Navbar items outside the collapse
  4. Bootstrap Navbar list items/links not showing
  5. Bootstrap align navbar items to the right
  6. Bootstrap NavBar with left, center or right aligned items
  7. Change bootstrap navbar collapse breakpoint without using LESS
  8. Center content in responsive bootstrap navbar
  9. Order columns through Bootstrap4
  10. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  11. Bootstrap 4 navbar with 2 rows
  12. Bootstrap Center Vertical and Horizontal Alignment
  13. Bootstrap 3 Navbar with Logo
  14. Search input with an icon Bootstrap
  15. Customize Bootstrap 4’s grid-system Breakpoints
  16. Bootstrap change order of columns
  17. How to use the new affix plugin in twitter’s bootstrap 2.1.0?
  18. Bootstrap 3: pull-right for col-lg only
  19. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  20. Bootstrap navbar: nothing is displayed on smaller devices
  21. Table column sizing
  22. Bootstrap 4 card-deck with number of columns based on viewport
  23. How can I change the order of Bootstrap columns?
  24. Centering the image in Bootstrap
  25. Bootstrap 4 custom build generator / download [duplicate]
  26. how to change bootstrap version 4 button color
  27. How do I make card-columns order horizontally?
  28. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  29. Centering the navbar content in Bootstrap 4 (alpha 5)
  30. How to change Bootstrap navbar collapse breakpoint

Leave a Comment