Dropdown menu with equal width for justified button group in bootstrap
11,583
Solution 1
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>
Solution 2
You can manage with give width to drop down menu
.dropdown-menu{ width:100%;}
Author by
quantdaddy
Updated on June 13, 2022Comments
-
quantdaddy almost 2 years
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>