¿Cómo alinear los botones en el pie de página de la tarjeta en Bootstrap?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *