38 - button : grupo de botones, barra de herramientas, tamaños y orientación
Boostrap nos provee la posibilidad de agrupar un conjunto de botones mediante la clase "btn-group". Los botones se agrupan pegados en la misma fila.
En algunas situaciones podemos agrupar un conjunto de grupos de botones y crear una barra de herramientas.
Problema
Crear una grupo de botones con los números de 1 al 4. Por otro lado crear una barra de herramientas con dos grupos de botones mostrando los números del 1 al 4 en castellano y en inglés.
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="btn-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>
</div>
<hr>
<div class="btn-toolbar">
<div class="btn-group me-3">
<button type="button" class="btn btn-primary">uno</button>
<button type="button" class="btn btn-primary">dos</button>
<button type="button" class="btn btn-primary">tres</button>
<button type="button" class="btn btn-primary">cuatro</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">one</button>
<button type="button" class="btn btn-primary">two</button>
<button type="button" class="btn btn-primary">three</button>
<button type="button" class="btn btn-primary">four</button>
</div>
</div>
</div>
</body>
</html>
En el navegador tenemos una representación similar a:
Es decir debemos agrupar un conjunto de elementos button con un div definiendo la clase "btn-group":
<div class="btn-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>
</div>
Para crear una barra de herramientas debemos agrupar un conjunto de "btn-group" encerrando los mismos en un div definiendo la clase ""btn-toolbar":
<div class="btn-toolbar">
<div class="btn-group me-3">
<button type="button" class="btn btn-primary">uno</button>
<button type="button" class="btn btn-primary">dos</button>
<button type="button" class="btn btn-primary">tres</button>
<button type="button" class="btn btn-primary">cuatro</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">one</button>
<button type="button" class="btn btn-primary">two</button>
<button type="button" class="btn btn-primary">three</button>
<button type="button" class="btn btn-primary">four</button>
</div>
</div>
Para que las barras de botones se muestren separadas agregamos la clase me-3 (margin end con el valor 3).
Para definir tamaños de los botones en forma conjunta para un grupo de botones podemos utilizar alguna de las siguientes clases:
btn-group-lg btn-group-sm
Que definen los tamaños grande y pequeño.
Un ejemplo asignando esto dos tipos de clases a dos grupos de botones es:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">one</button>
<button type="button" class="btn btn-primary">two</button>
<button type="button" class="btn btn-primary">three</button>
</div>
<hr>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">one</button>
<button type="button" class="btn btn-primary">two</button>
<button type="button" class="btn btn-primary">three</button>
</div>
</div>
</body>
</html>
Y tenemos como resultado en el navegador una página similar a:
Otra clase relacionada a los grupos de botones es "btn-group-vertical", la misma dispone los botones en forma vertical, probemos de modificar el ejemplo primero:
<div class="btn-group-vertical">
<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>
</div>
Luego en el navegador tenemos como resultado:
Grupos de Checkbox y RadioButton mostrandose como botones.
Podemos agrupar un conjunto de RadioButton y que se muestren como botones, de forma similar con controles Checkbox:
Y lo obtenemos con el siguiente código:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="btn-group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<hr>
<div class="btn-group">
<input type="radio" class="btn-check" name="radio" id="radio1" checked>
<label class="btn btn-outline-primary" for="radio1">Radio 1</label>
<input type="radio" class="btn-check" name="radio" id="radio2">
<label class="btn btn-outline-primary" for="radio2">Radio 2</label>
<input type="radio" class="btn-check" name="radio" id="radio3">
<label class="btn btn-outline-primary" for="radio3">Radio 3</label>
</div>
</div>
</body>
</html>