Grupos de botones
Bootstrap te permite reunir un conjunto de botones (en una sola línea o fila), en lo que se denomina Grupo de botones.
Para crear un grupo de botones debes usar un elemento <div> con la clase .btn-group.
Ejemplo
<!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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-primary">Navarra</button>
<button type="button" class="btn btn-primary">Cantabria</button>
<button type="button" class="btn btn-primary">Aragón</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Consejo: Para cambiar el tamaño de todos los botones de un grupo utiliza la clase .btn-group-xs para botones extra pequeños, la clase btn-group-sm para botones pequeños, la clase .btn-group-md para botones medianos (tamaño por defecto) y la clase .btn-group-lg para botones grandes.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo Bootstrap - Webdisenia.com</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.5/css/bootstrap.min.css">
</head>
<body>
<p>Botones grandes:</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Navarra</button>
<button type="button" class="btn btn-primary">Cantabria</button>
<button type="button" class="btn btn-primary">Aragón</button>
</div>
<p>Botones extra pequeños:</p>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-primary">Navarra</button>
<button type="button" class="btn btn-primary">Cantabria</button>
<button type="button" class="btn btn-primary">Aragón</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Grupos de botones verticales
Bootstrap también soporta grupos de botones verticales. Usa la clase .btn-group-vertical para crearlos.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo Bootstrap - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Navarra</button>
<button type="button" class="btn btn-primary">Cantabria</button>
<button type="button" class="btn btn-primary">Aragón</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Grupo de botones justificado
Para que el grupo de botones ocupe todo el ancho de la ventana del navegador, usa la clase .btn-group-justified. Se emplea con el elemnto <a>
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo Bootstrap - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Navarra</a>
<a href="#" class="btn btn-primary">Cantabria</a>
<a href="#" class="btn btn-primary">Aragón</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Grupos de botones anidados para menús desplegables
Puedes anidar grupos de botones para crear menos desplegables.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo Bootstrap - Webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="btn-group">
<button type="button" class="btn btn-primary">Navarra</button>
<button type="button" class="btn btn-primary">Cantabria</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Aragón <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Huesca</a></li>
<li><a href="#">Teruel</a></li>
<li><a href="#">Zaragoza</a></li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
Botones desplegables divididos
Puedes crear botones desplegables, con dos áreas activas, separadas por una línea vertical. Una de las áreas la forma el título del botón, y las otra la punta de flecha que despliega el menú.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ejemplo Bootstrap - webdisenia</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.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Botones divididos</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Aragón</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Huesca</a></li>
<li><a href="#">Teruel</a></li>
<li><a href="#">Zaragoza</a></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Resultado en el navegador
