<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">
<div class="row text-center">
<div class="btn-group">
<button class="btn btn-default" type="button">Печать</button>
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"><span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Всё</a></li>
<li class="divider"></li>
<li><a href="#">Документ 1</a></li>
<li><a href="#">Документ 2</a></li>
</ul>
</div>
</div>
</div>
/* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
opacity: 0;
}
.badgebox + .badge
{
/* Move the check mark away when unchecked */
text-indent: -999999px;
/* Makes the badge's width stay the same checked and unchecked */
width: 27px;
}
.badgebox:focus + .badge
{
/* Set something to make the badge looks focused */
/* This really depends on the application, in my case it was: */
/* Adding a light border */
box-shadow: inset 0px 0px 5px;
/* Taking the difference out of the padding */
}
.badgebox:checked + .badge
{
/* Move the check mark back when checked */
text-indent: 0;
}
.btn-labeled {padding-right: 10}
