<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h3 class="text-primary text-center">Split button block dropdowns button Group</h3> </div> <div class="row"> <!-- Split button --> <div class="dropdown btn-group btn-group-block col-xs-12 col-md-4" role="group"> <button type="button" class="btn btn-danger btn-lg btn-block">One</button> <button type="button" class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink1" role="button" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="dropdown btn-group btn-group-block col-xs-12 col-md-4" role="group"> <button type="button" class="btn btn-success btn-lg btn-block">Two</button> <button type="button" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink2" role="button" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink2"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="dropdown btn-group btn-group-block col-xs-12 col-md-4" role="group"> <button type="button" class="btn btn-primary btn-lg btn-block">Three</button> <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink3" role="button" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink3"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <hr> <div class="row"> <h3 class="text-primary text-center">Button block Group <code>.btn-group-justified</code></h3> </div> <div class="row"> <div class="btn-group btn-group-justified btn-group-lg" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" class="btn btn-danger btn-lg">Left</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-success btn-lg">Middle</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-primary btn-lg">Middle</button> </div> </div> </div> <hr> <div class="row"> <h3 class="text-primary text-center">Button block dropdowns button Group</h3> </div> <div class="row"> <div class="btn-group btn-group-lg btn-block btn-group-block"> <div class="dropdown"> <a class="btn btn-danger col-xs-12 col-md-4 btn-lg dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink4" role="button" aria-haspopup="true" aria-expanded="false">First</a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink4"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="dropdown"> <a class="btn btn-success col-xs-12 col-md-4 btn-lg dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink5" role="button" aria-haspopup="true" aria-expanded="false">Center</a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <div class="dropdown"> <a class="btn btn-primary col-xs-12 col-md-4 btn-lg dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink6" role="button" aria-haspopup="true" aria-expanded="false">Last</a> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink6"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> <div class="row"> </div> </div>

.btn-group-block .btn + .btn, .btn-group-block .btn + .btn-group-block, .btn-group-block .btn-group-block + .btn, .btn-group-block .btn-group-block + .btn-group-block{ margin-left: 0px; } .btn-group-block{ display: table; } .btn-group-block .btn:before{ content:""; clear:both; } .btn-group-block > .btn, .btn{ border-radius:0px; } .btn-group-block > .btn-block { display: table-cell; width: 90%; } .btn-group-block > .dropdown-toggle{ width:10%; } .btn-group-block .dropdown-menu{ width: 100%; } .btn-group-block.col-xs-1, .btn-group-block.col-sm-1, .btn-group-block.col-md-1, .btn-group-block.col-lg-1, .btn-group-block.col-xs-2, .btn-group-block.col-sm-2, .btn-group-block.col-md-2, .btn-group-block.col-lg-2, .btn-group-block.col-xs-3, .btn-group-block.col-sm-3, .btn-group-block.col-md-3, .btn-group-block.col-lg-3, .btn-group-block.col-xs-4, .btn-group-block.col-sm-4, .btn-group-block.col-md-4, .btn-group-block.col-lg-4, .btn-group-block.col-xs-5, .btn-group-block.col-sm-5, .btn-group-block.col-md-5, .btn-group-block.col-lg-5, .btn-group-block.col-xs-6, .btn-group-block.col-sm-6, .btn-group-block.col-md-6, .btn-group-block.col-lg-6, .btn-group-block.col-xs-7, .btn-group-block.col-sm-7, .btn-group-block.col-md-7, .btn-group-block.col-lg-7, .btn-group-block.col-xs-8, .btn-group-block.col-sm-8, .btn-group-block.col-md-8, .btn-group-block.col-lg-8, .btn-group-block.col-xs-9, .btn-group-block.col-sm-9, .btn-group-block.col-md-9, .btn-group-block.col-lg-9, .btn-group-block.col-xs-10, .btn-group-block.col-sm-10, .btn-group-block.col-md-10, .btn-group-block.col-lg-10, .btn-group-block.col-xs-11, .btn-group-block.col-sm-11, .btn-group-block.col-md-11, .btn-group-block.col-lg-11, .btn-group-block.col-xs-12, .btn-group-block.col-sm-12, .btn-group-block.col-md-12, .btn-group-block.col-lg-12 { padding-left:0px; padding-right:0px; margin-left: 0px; margin-right: 0px; } .dropdown>a, .dropdown>.btn{ font-weight:600; } .dropdown>.dropdown-menu{ -webkit-animation: fadein 0.8s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 0.8s; /* Firefox < 16 */ -ms-animation: fadein 0.8s; /* Internet Explorer */ -o-animation: fadein 0.8s; /* Opera < 12.1 */ animation: fadein 0.8s; } .dropdown:hover>.dropdown-menu { display: block; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }