La alineación de los botones en el pie de página de la tarjeta es mucho más fácil cuando está familiarizado con el elemento flotante. Hay otra forma de alinear la izquierda o la derecha donde quieras colocar el botón en el pie de página de la tarjeta. En este artículo, aprenderá a alinear botones en la sección de pie de página de una tarjeta Bootstrap. Las tarjetas de Bootstrap brindan un contenedor de contenido flexible y extensible con múltiples variantes y opciones.
Estructura de la tarjeta Bootstrap:
- Imagen de la tarjeta
- Cuerpo de la tarjeta
- Título de la tarjeta
- Texto de la tarjeta
- Pie de página de la tarjeta
- Botón izquierdo
- Botón central
- Botón derecho
Ejemplo: Utilice float-left, float-right y float-right para alinear los botones de la tarjeta.
<!DOCTYPE html> <html lang="en"> <head> <title> How to align buttons in Card footer in Bootstrap ? </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <!-- Create a card --> <div class="card" style="width: 22rem; margin:0 auto;"> <img class="card-img-top" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190506125816/avt.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title" style="color:green"> Card title </h5> <p class="card-text" style="color:green;"> This is just a simple card text inside card body </p> <p class="card-text" style="color:green;"> Welcome to geeksforgeeks </p> </div> <div class="card-footer text-center"> <p style="color:green;">We are inside card footer</p> <button class="btn btn-primary btn-sm float-left" id="left" style="color:white"> Left Button </button> <button class="btn btn-warning btn-sm" id="center" style="color:white"> Center Button </button> <button class="btn btn-danger btn-sm float-right" id="right" style="color:white"> Right Button </button> </div> </div> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html lang="en"> <head> <title> How to align buttons in Card footer in Bootstrap ? </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="card" style="width: 22rem; margin:0 auto;"> <div class="card-header text-success text-center"> <h3>GeekforGeeks</h3> </div> <div class="card-body text-center"> <h4 class="card-title ">Practice</h4> <p class="card-text"> Practice for Computer Science coding interview </p> <a href="#" class="btn btn-primary">Login/Sign UP</a> </div> <div class="card-footer text-center"> <button class="btn btn-theme float-left" type="button">< </button> <button class="btn btn-theme" type="button">+ </button> <button class="btn btn-theme float-right" type="button">> </button> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por IshjotSingh97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA