Bootstrap nos proporciona diferentes clases que se pueden usar con diferentes etiquetas, como <button>, <a>, <input> y <label> para aplicar estilos de botones personalizados. Bootstrap también proporciona clases que se pueden usar para cambiar el estado y el tamaño de los botones, también proporciona clases para aplicar efectos de alternancia, casilla de verificación y botones de opción.
Botones sólidos : Bootstrap nos proporciona una serie de clases que corresponden a diferentes estilos de botones sólidos. Estas clases se enumeran a continuación:
| btn-primario | btn-secundario | btn-éxito |
| btn-peligro | btn-advertencia | btn-info |
| btn-luz | btn-oscuro | enlace btn |
Nota: Debemos usar una clase btn adicional con las clases mencionadas anteriormente y que sigue.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<button type="button" class="btn btn-primary">
Primary</button>
<button type="button" class="btn btn-secondary">
Secondary</button>
<button type="button" class="btn btn-success">
Success</button>
<button type="button" class="btn btn-danger">
Danger</button>
<button type="button" class="btn btn-warning">
Warning</button>
<button type="button" class="btn btn-info">
Info</button>
<button type="button" class="btn btn-light">
Light</button>
<button type="button" class="btn btn-dark">
Dark</button>
<button type="button" class="btn btn-link">
Link</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Producción:
Botones con contorno:
Bootstrap nos proporciona una serie de clases que se pueden usar cuando necesitamos usar botones con estilo de contorno en nuestro proyecto, es decir, botones sin color de fondo. Las clases de botón de contorno eliminan cualquier color de fondo o estilo de imagen de fondo aplicado a los botones. Estas clases se enumeran a continuación:
| btn-esquema-primario | btn-esquema-secundario | btn-esquema-éxito |
| btn-esquema-peligro | btn-contorno-advertencia | btn-esquema-info |
| btn-contorno-luz | btn-contorno-oscuro |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<button type="button"
class="btn btn-outline-primary">
Primary</button>
<button type="button"
class="btn btn-outline-secondary">
Secondary</button>
<button type="button"
class="btn btn-outline-success">
Success</button>
<button type="button"
class="btn btn-outline-danger">
Danger</button>
<button type="button"
class="btn btn-outline-warning">
Warning</button>
<button type="button"
class="btn btn-outline-info">
Info</button>
<button type="button"
class="btn btn-outline-light">
Light</button>
<button type="button"
class="btn btn-outline-dark">
Dark</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Producción:
Cambio de tamaño:
Bootstrap nos proporciona diferentes clases que permiten cambiar el tamaño del botón. Estas clases se enumeran a continuación:
- btn-lg: Esta clase se usa para hacer un botón(es) de gran tamaño.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<button type="button"
class="btn btn-primary btn-lg">
Primary</button>
<button type="button"
class="btn btn-outline-secondary btn-lg">
Secondary</button>
<button type="button"
class="btn btn-success btn-lg">
Success</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Producción:
- btn-sm: Esta clase se usa para hacer un botón(es) de tamaño pequeño.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<button type="button"
class="btn btn-primary btn-sm">
Primary</button>
<button type="button"
class="btn btn-outline-secondary btn-sm">
Secondary</button>
<button type="button"
class="btn btn-success btn-sm">
Success</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Producción:
- btn-block: esta clase se usa para hacer que los botones ocupen todo el ancho de su elemento principal.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<button type="button"
class="btn btn-primary btn-block">
Primary</button>
<button type="button"
class="btn btn-outline-secondary btn-block">
Secondary</button>
<button type="button"
class="btn btn-success btn-block">
Success</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Producción:
Cambio de estado:
Bootstrap nos proporciona clases “activas” y “deshabilitadas” para cambiar el estado del botón.
- active: esta clase se utiliza para hacer que los botones y enlaces aparezcan en estado inactivo, es decir, con un fondo oscuro, un borde oscuro y una sombra insertada.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
a,
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<button type="button"
class="btn btn-primary active">
Primary Button</button>
<a href="#" class="btn btn-warning active"
role="button" aria-pressed="true">
Warning Link</a>
<button type="button"
class="btn btn-success active">
Success Button</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Nota: Cuando se usa la etiqueta <a>, debemos insertar el par atributo-valor role=”button” dentro de la etiqueta, y si el botón está activo, entonces usamos el par atributo-valor aria-pressed=”true” dentro del < a> etiquete y establezca el valor de clase en activo (clase = «activo»).
Producción:
- disabled: esta clase se utiliza para hacer que los botones y enlaces aparezcan en un estado deshabilitado, es decir, con un color de fondo y una apariencia más claros.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
a,
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<button type="button"
class="btn btn-primary disabled">
Primary Button</button>
<a href="#" class="btn btn-warning disabled"
role="button" aria-disabled="true" tabindex="-1">
Warning Link</a>
<button type="button"
class="btn btn-success disabled">
Success Button</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Nota: Cuando <a> se usa como etiqueta, debemos insertar el par atributo-valor role=”button” dentro de la etiqueta. Al usar la clase «deshabilitada» con la etiqueta <a>, debemos insertar aria-disabled=”true” y tabindex=”-1″ par atributo-valor en la etiqueta <a>. Además, podemos hacer que <button> se deshabilite simplemente agregando el atributo «deshabilitado» dentro de la etiqueta <button>, sin usar la clase «deshabilitada» de Bootstrap.
Producción:
Alternar estado:
podemos hacer que el botón alterne su estado agregando el par atributo-valor data-toggle=”button” a la etiqueta <button>. También podemos preestablecer el estado de alternancia del botón en activo agregando la clase «activa» y el par atributo-valor aria-pressed=»true» a la etiqueta <button>.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
a,
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<button type="button" data-toggle="button"
class="btn btn-primary" aria-pressed="false">
Primary Button</button>
<button type="button" data-toggle="button"
class="btn btn-success" aria-pressed="false">
Success Button</button>
<button type="button" data-toggle="button"
class="btn btn-primary active" aria-pressed="true">
Primary Button</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Nota: El tercer botón está predeterminado como activo.
Producción:
Botones con estilo de casilla de verificación :
para obtener botones con estilo de casilla de verificación, necesitamos usar la etiqueta <input> con el par atributo-valor type=”checkbox”, que está rodeada por la etiqueta <label> con el valor de clase establecido en “btn” y uno de la clase del sólido o la clase de botón de contorno mencionada anteriormente. La etiqueta <label> a su vez está rodeada por la etiqueta <div> con el valor de clase establecido en “btn-group-toggle” (class=”btn-group-toggle”) y el par de atributos data-toggle=”buttons” también es requerido dentro de la etiqueta <div>. El siguiente ejemplo borrará el procedimiento:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
a,
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">
Unchecked</label>
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off">
Checked</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">
Unchecked</label>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Nota: para que el botón esté marcado de forma predeterminada, debemos agregar la clase «activa» dentro de la etiqueta <etiqueta> del control de entrada y también colocar el atributo «marcado» dentro de la etiqueta <entrada>.
Producción:
Botones con estilo de radio:
para obtener botones con estilo de radio, necesitamos usar la etiqueta <input> con el par atributo-valor type=”radio” y otra combinación esencial de atributo-valor para el funcionamiento del botón de radio, como de costumbre. La etiqueta <input> está a su vez rodeada por la etiqueta <label> con el valor de clase establecido en «btn» y una de las clases del botón sólido o del contorno como se mencionó anteriormente. La etiqueta <label> a su vez está rodeada por la etiqueta <div> con el valor de clase establecido en “btn-group btn-group-toggle” (class=”btn-group btn-group-toggle”) y data-toggle=”buttons También se requiere un par de atributos dentro de la etiqueta <div>. El siguiente ejemplo borrará el procedimiento:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Hello, world!</title>
<!-- Custom CSS -->
<style>
h1 {
color: green;
text-align: center;
}
div.one {
margin-top: 40px;
text-align: center;
}
a,
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap Button Classes -->
<div class="one">
<div class="btn-group btn-group-toggle"
data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options"
id="option1" autocomplete="off">
Radio Button</label>
<label class="btn btn-primary active">
<input type="radio" name="options"
id="option2" autocomplete="off"
checked>
Active Radio Button</label>
<label class="btn btn-primary">
<input type="radio" name="options"
id="option3" autocomplete="off">
Radio Button</label>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Nota: para que el botón esté marcado de forma predeterminada, debemos agregar la clase «activa» dentro de la etiqueta <etiqueta> del control de entrada y también colocar el atributo «marcado» dentro de la etiqueta <entrada>.
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari