how to align bootstrap dropdowns next to each other-CodePudding

I want to align my li item which bootstrap dropdown how to align it next to each other and i tried everything but seems that nothing is working in my case so what to do here is my code

 <nav class="navbar navbar-expand-lg
    navbar-light bg-light">
        <ul class="navbar-nav m-auto se">
          {% for category in category_list %} 
          <li class="nav-item dropdown second">    
            <a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              <strong>{{ category.name }}</strong>
            </a>
            <ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink">
              {% for subcategory in category.our_categories.all %}
              <li><a class="dropdown-item cat-item text-white text-center" href="{% url 'products:product' subcategory.id %}">{{ subcategory.name }}</a>
              {% endfor %}
            </ul>
        </li>
        {% endfor %}
    </ul>
</nav>

css for the code

 .second{
      display: flex !important;
      flex-direction: row;
    }
    .secon{
      font-size: 12px;
      margin: 2px !important;
    }

CodePudding user response：

This is happening because for .navbar-nav the default flex-direction value is column. Make that as row

Just add in css

.navbar .navbar-nav {
  flex-direction: row;
}

Use flex-row helper class for navbar-nav in the html as

<ul class="navbar-nav m-auto se flex-row">
  <li class="nav-item dropdown second">
    .
    .
    .
  </li>
  .
  .
  .
</ul>

Working Example with first solution.

.second {
  display: flex !important;
  flex-direction: row;
}

.secon {
  font-size: 12px;
  margin: 2px !important;
}

.navbar .navbar-nav {
  flex-direction: row;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg
navbar-light bg-light">
  <ul class="navbar-nav m-auto se">
    <li class="nav-item dropdown second">
      <a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink1" role="button"
        data-bs-toggle="dropdown" aria-expanded="false">
        <strong>Category 1</strong>
      </a>
      <ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink1">
        <li>
          <a class="dropdown-item cat-item text-white text-center" href="One">One</a>
          <a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
          <a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
          <a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
          <a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown second">
      <a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink2" role="button"
        data-bs-toggle="dropdown" aria-expanded="false">
        <strong>Category 2</strong>
      </a>
      <ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink2">
        <li>
          <a class="dropdown-item cat-item text-white text-center" href="One">One</a>
          <a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
          <a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
          <a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
          <a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown second">
      <a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink3" role="button"
        data-bs-toggle="dropdown" aria-expanded="false">
        <strong>Category 3</strong>
      </a>
      <ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink3">
        <li>
          <a class="dropdown-item cat-item text-white text-center" href="One">One</a>
          <a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
          <a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
          <a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
          <a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown second">
      <a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink4" role="button"
        data-bs-toggle="dropdown" aria-expanded="false">
        <strong>Category 4</strong>
      </a>
      <ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink4">
        <li>
          <a class="dropdown-item cat-item text-white text-center" href="One">One</a>
          <a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
          <a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
          <a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
          <a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown second">
      <a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink5" role="button"
        data-bs-toggle="dropdown" aria-expanded="false">
        <strong>Category 5</strong>
      </a>
      <ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink5">
        <li>
          <a class="dropdown-item cat-item text-white text-center" href="One">One</a>
          <a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
          <a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
          <a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
          <a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown second">
      <a class="nav-link dropdown-toggle secon text-dark" href="#" id="navbarDarkDropdownMenuLink6" role="button"
        data-bs-toggle="dropdown" aria-expanded="false">
        <strong>Category 6</strong>
      </a>
      <ul class="dropdown-menu cat-drop" aria-labelledby="navbarDarkDropdownMenuLink6">
        <li>
          <a class="dropdown-item cat-item text-white text-center" href="One">One</a>
          <a class="dropdown-item cat-item text-white text-center" href="Two">Two</a>
          <a class="dropdown-item cat-item text-white text-center" href="Three">Three</a>
          <a class="dropdown-item cat-item text-white text-center" href="Four">Four</a>
          <a class="dropdown-item cat-item text-white text-center" href="Five">Five</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CodePudding user response：

The navbar-nav component is responsive by design. The following quote is from the navbar-nav documentation:

Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

Now that we know they are stacking due to their inherit responsiveness (via Bootstrap), there are multiple ways to horizontally align items within navbar-nav:

Expand your viewport to ≥992px. This is being set via navbar-expand-lg (or change via option 2 below).
Change navbar-expand-lg to navbar-expand-sm which will align the dropdowns horizontally for viewports ≥576px.
1. Alternatively, remove responsive behavior by changing navbar-expand-lg to navbar-expand. This will ensure they will always be horizontally aligned.
Custom CSS classes with greater specificity. This wouldn't be my recommendation but listed as it's a valid option.

The following showcases the Alternative Option 2 (option 2.1) solution.

Note that the only change made to your original code is the use of navbar-expand instead of navbar-expand-lg on <nav /> element.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

 <nav class="navbar navbar-expand
    navbar-light bg-light">

     <ul class="navbar-nav m-auto se">
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
           <strong>Category 1</strong>
         </a>
         <ul class="dropdown-menu" aria-labelledby="navbarDarkDropdownMenuLink1">
           <li><a class="dropdown-item" href="{% url 'products:product' subcategory.id %}">Category 1a</a>
           <li><a class="dropdown-item" href="{% url 'products:product' subcategory.id %}">Category 1b</a>
           <li><a class="dropdown-item" href="{% url 'products:product' subcategory.id %}">Category 1c</a>
         </ul>
       </li>
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
           <strong>Category 2</strong>
         </a>
         <ul class="dropdown-menu" aria-labelledby="navbarDarkDropdownMenuLink2">
           <li><a class="dropdown-item" href="{% url 'products:product' subcategory.id %}">Category 2a</a>
           <li><a class="dropdown-item" href="{% url 'products:product' subcategory.id %}">Category 2b</a>
           <li><a class="dropdown-item" href="{% url 'products:product' subcategory.id %}">Category 2c</a>
         </ul>
       </li>
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
           <strong>Category 3</strong>
         </a>
         <ul class="dropdown-menu" aria-labelledby="navbarDarkDropdownMenuLink3">
           <li><a class="dropdown-item" href="{% url 'products:product' subcategory.id %}">Category 3a</a>
           <li><a class="dropdown-item" href="{% url 'products:product' subcategory.id %}">Category 3b</a>
           <li><a class="dropdown-item" href="{% url 'products:product' subcategory.id %}">Category 3c</a>
         </ul>
       </li>
     </ul>

 </nav>