Dropdown menu with equal width for justified button group in bootstrap

Question

Using bootstrap, I'm trying to make a dropdown menu inside one of the buttons in a justified button group. More specifically, I want the dropdown menu list elements to have the same width as the dropdown toggle button. The code below does everything except the width of the dropdown elements is different from the toggle button.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   <style>
   .pull-right{
        margin-top: 7px
    } 
   </style>
</head>
<body>

<div class="container">
  <h2>Justified Button Groups</h2>
  <div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-primary">Apple</a>
    <a href="#" class="btn btn-primary">Samsung</a>
    <div class="dropdown btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony<span class="caret pull-right"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#" class="btn btn-default btn-block">HTML</a></li>
    <li><a href="#" class="btn btn-default btn-block">CSS</a></li>
    <li><a href="#" class="btn btn-default btn-block">JavaScript</a></li>
    </ul>
    </div>
  </div>
</div>

</body>
</html>

vanburen vanburen · Accepted Answer · 2016-07-08T03:35:15

You should consider using a structure closer to the docs for button groups by wrapping your first two buttons with a btn-group div and by removing the .btn classes from your dropdown list.

For the width, use min-width: 100% to override the default min-width: 160px;.

Working Example:

.dropdown-menu.dropdown-menu-wide {
  min-width: 100%;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <h2>Justified Button Groups</h2>

  <div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
      <a class="btn btn-primary" href="#" role="button">Apple</a>
    </div>
    <div class="btn-group" role="group">
      <a class="btn btn-primary" href="#" role="button">Samsung</a>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sony <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right dropdown-menu-wide">
        <li><a href="#">HTML</a>
        </li>
        <li><a href="#">CSS</a>
        </li>
        <li><a href="#">JavaScript</a>
        </li>
      </ul>
    </div>
  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Dropdown menu with equal width for justified button group in bootstrap

3 Answers