CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5278050
user5278050

Reputation:

How can I center the items in the dropdown menu of bootstrap?

I already centered the dropdown menu on my page. However, when I click on the dropdown menu, the items inside it are still on the left side... I tried to use css:

    .dropdown-menu.li {
        position: center;
    }

But it didn't work... Now, I am stuck here... Any help would be appreciated...

Here is my html page:

<div class="container">
    <div class="row">
        <div class="col-ms-12 text-center">
            <p>Choose your school</p>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="  button" id="dropdownMenu1" data-toggle="dropdown" aria- haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-center" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Action</a>
                    </li>
                    <li><a href="#">Another action</a>
                    </li>
                    <li><a href="#">Something else here</a>
                    </li>
                    <li><a href="#">Separated link</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- end col-ms-12 -->
    </div>
    <!-- end row -->
</div>
<!-- end container -->

This is the image of the error:http://s12.postimg.org/ovwb6msul/Dropdown_Error.png

Upvotes: 2

Views: 3378

Answers (4)

Dapo Momodu
Dapo Momodu

Reputation: 329

Here's a solution i came up with after going through this thread and working with a teammate of mine.

The code but in my case this bootstrap 5

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap5 Fixed Header Full Width Dropdown Menu With Centered Menu</title>

  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!--font-->
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Material+Icons" rel="stylesheet">

<style>
    .dropdown-links { 
      position: static !important; 
    } 
    
    .dropdown-menu { 
      margin-top: 6px !important; 
      width: 100% !important;
    }
    
    .main-menu .dropdown-menu.show {
      display: flex;
      justify-content: center;
      margin-top: 10px !important; 
    }
</style>

</head>

<body>
  <!--######## NAVBAR STARTS HERE ########-->
<div class="container-fluid d-flex justify-content-between bg-white pt-3 pb-2 rounded fixed-top border-bottom">
  <!--##### LOGO #####-->
  <div>
    <a class="navbar-brand ms-2" href="#">
      <img src="..." alt="Logo">Logo
    </a>
  </div>

  <!--##### CENTER LINKS #####-->
  <div>
    <ul class="nav main-menu">
      <li class="nav-item dropdown dropdown-links me-5">
        <a class="nav-link dropdown-toggle link-dark" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Links</a>
        <ul class="dropdown-menu border-0 shadow-sm">
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
        </ul>
      </li>

      <li class="nav-item dropdown dropdown-links me-5">
        <a class="nav-link dropdown-toggle link-dark" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Links</a>
        <ul class="dropdown-menu border-0 shadow-sm">
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
        </ul>
      </li>

      <li class="nav-item dropdown dropdown-links me-5">
        <a class="nav-link dropdown-toggle link-dark" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Links</a>
        <ul class="dropdown-menu border-0 shadow-sm">
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
        </ul>
      </li>

      <li class="nav-item dropdown dropdown-links me-5">
        <a class="nav-link dropdown-toggle link-dark" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Links</a>
        <ul class="dropdown-menu border-0 shadow-sm">
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
        </ul>
      </li>

      <li class="nav-item dropdown dropdown-links me-5">
        <a class="nav-link dropdown-toggle link-dark" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Links</a>
        <ul class="dropdown-menu border-0 shadow-sm">
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
          <li class="mt-2 me-5 mb-2 ms-5"><a class="dropdown-item" href="#">Links</a></li>
        </ul>
      </li>

    </ul>
  </div>

  <!--##### RIGHT LINK #####-->
  <div>
    <ul class="nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle link-dark" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
          <img src="https://via.placeholder.com/25/" class="rounded me-2" alt="...">
          Links
        </a>
        <ul class="dropdown-menu border-0 shadow-sm">
          <li><a class="dropdown-item" href="#">Links</a></li>
          <li><a class="dropdown-item" href="#">Links</a></li>
          <li><a class="dropdown-item" href="#">Links</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Links</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>




<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>



</body>

</html>

Upvotes: 0

vanburen
vanburen

Reputation: 21663

Use this in your css.

.dropdown.dropdown-center {
  display: inline-block;
  width: 180px;
}
.dropdown-menu.dropdown-menu-center {
  text-align: center;
  width: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-ms-12 text-center">
      <p>Choose your school</p>
      <div class="dropdown dropdown-center">
        <button class="btn btn-default dropdown-toggle" type="  button" id="dropdownMenu1" data-toggle="dropdown" aria- haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span>

        </button>
        <ul class="dropdown-menu dropdown-menu-center" aria-labelledby="dropdownMenu1">
          <li><a href="#">Action</a>

          </li>
          <li><a href="#">Another action</a>

          </li>
          <li><a href="#">Something else here</a>

          </li>
          <li><a href="#">Separated link</a>

          </li>
        </ul>
      </div>
    </div>
    <!-- end col-ms-12 -->
  </div>
  <!-- end row -->
</div>
<!-- end container -->

Upvotes: 2

JavaForAndroid
JavaForAndroid

Reputation: 1179

You are trying to center the class li. Insert a white-space After dropdown.

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16311

Did you try:

.dropdown-menu li a {
   text-align: center;
}

Or even without the a tag like this:

.dropdown-menu li {
   text-align: center;
}

jsFiddle: http://jsfiddle.net/AndrewL32/65sf2f66/57/

Upvotes: 0

Related Questions