<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid justForDemo"> <div class="row"> <div class="col-md-12"> <!-- Large Buttons start here--> <button type="button" class="btn btn-default btn-lg" data-toggle="dropdown" aria-expanded="false" disabled> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-default btn-lg" data-toggle="dropdown" aria-expanded="false" > <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-primary btn-lg" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-success btn-lg" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-danger btn-lg" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-info btn-lg" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-warning btn-lg" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu " role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- Large Buttons end here--> <br /> <div class="justForDemo"> <!-- Medium Buttons start here--> <button type="button" class="btn btn-default btn-md" data-toggle="dropdown" aria-expanded="false" disabled> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-default btn-md" data-toggle="dropdown" aria-expanded="false" > <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-primary btn-md" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-success btn-md" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-danger btn-md" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-info btn-md" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-warning btn-md" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default btn-md dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu " role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- Medium Buttons end here--> </div> <div class="justForDemo"> <!-- Small Buttons start here--> <button type="button" class="btn btn-default btn-sm" data-toggle="dropdown" aria-expanded="false" disabled> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-default btn-sm" data-toggle="dropdown" aria-expanded="false" > <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-primary btn-sm" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-success btn-sm" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-danger btn-sm" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-info btn-sm" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-warning btn-sm" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu " role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- Small Buttons end here--> </div> <div class="justForDemo"> <!-- Extra Small Buttons start here--> <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-expanded="false" disabled> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-expanded="false" > <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-primary btn-xs" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-success btn-xs" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-danger btn-xs" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-info btn-xs" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <button type="button" class="btn btn-warning btn-xs" data-toggle="dropdown" aria-expanded="false"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Action </button> <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu " role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <!-- Extra Small Buttons end here--> </div> <div class="justForDemo"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-success">Middle</button> <button type="button" class="btn btn-danger">Right</button> </div> </div> <div class="justForDemo"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group" role="group" aria-label="First group"> <button type="button" class="btn btn-primary">1</button> <button type="button" class="btn btn-primary">2</button> <button type="button" class="btn btn-primary">3</button> <button type="button" class="btn btn-primary">4</button> </div> <div class="btn-group" role="group" aria-label="Second group"> <button type="button" class="btn btn-danger">5</button> <button type="button" class="btn btn-danger">6</button> <button type="button" class="btn btn-danger">7</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-success">8</button> </div> </div> </div> <div class="justForDemo"> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> <div class="justForDemo"> <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> <button type="button" class="btn btn-primary">Button</button> <button type="button" class="btn btn-success">Button</button> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <button type="button" class="btn btn-danger">Button</button> <button type="button" class="btn btn-info">Button</button> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop3" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="btn-group" role="group"> <button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> <div class="justForDemo"> </div> </div> </div> </div>

.btn { border-radius:0px; outline: none !important; } .open>.dropdown-menu { border-radius: 0px; } .btn:hover { border-color: #787878; } .justForDemo { margin-top:15px; } .pagination>li:first-child>a, .pagination>li:first-child>span { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .pagination>li:last-child>a, .pagination>li:last-child>span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .btn-group-vertical>.btn:first-child:not(:last-child) { border-top-right-radius: 0px; }