Bootstrap 4 - Grupo de botones
Descripción
Los grupos de botones permiten apilar varios botones en una sola línea.
Grupo de botones básico
Puede crear el grupo de botones básico utilizando la clase .btn-group dentro del elemento <div> como se muestra en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Button Group</h2>
<div class = "btn-group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Barra de herramientas de botones
Puede agrupar conjuntos de grupos de botones en una sola barra de herramientas utilizando la clase .btn-toolbar como se muestra en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Button Toolbar</h2>
<div class = "btn-toolbar" role = "toolbar" aria-label = "Toolbar with button groups">
<div class = "btn-group mr-2" role = "group" aria-label = "First group">
<button type = "button" class =" btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
<button type = "button" class = "btn btn-info">Tennis</button>
</div>
<div class = "btn-group mr-2" role = "group" aria-label = "Second group">
<button type = "button" class = "btn btn-info">Basketball</button>
<button type = "button" class = "btn btn-info">Volleyball</button>
<button type = "button" class = "btn btn-info">Boxing</button>
</div>
<div class = "btn-group mr-2" role = "group" aria-label = "Third group">
<button type = "button" class = "btn btn-info">Archery</button>
<button type = "button" class = "btn btn-info">Badminton</button>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Tamaños de grupo de botones
Puede controlar el tamaño del grupo de botones agregando la clase .btn-group-sm o .btn-group-lg a la clase .button-group como se muestra en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Button Group Sizes</h2>
<div class = "btn-group btn-group-lg" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</div>
<br>
<br>
<div class = "btn-group" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</div>
<br>
<br>
<div class = "btn-group btn-group-sm" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Grupo de botones verticales
Puede mostrar el grupo de botones verticalmente utilizando la clase .btn-group-vertical como se muestra en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Vertical Button Group</h2>
<div class = "btn-group-vertical" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Grupo de botones de anidación
Puede colocar un .btn-group dentro de otro .btn-group , cuando desee mostrar el menú desplegable dentro de una serie de botones.
El siguiente ejemplo demuestra el anidamiento de grupos de botones:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Nesting Button Group</h2>
<div class = "btn-group" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
<div class = "btn-group" role = "group">
<button id = "nestingbtngroup" type = "button" class = "btn btn-info
dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
Sports
</button>
<div class = "dropdown-menu" aria-labelledby = "nestingbtngroup">
<a class = "dropdown-item" href = "#">Cricket</a>
<a class = "dropdown-item" href = "#">Football</a>
<a class = "dropdown-item" href = "#">Hockey</a>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado: