Bootstrap 5 | Tarjeta

Posted on by Rudeus Greyrat

Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que renovaron la interfaz de usuario y realizaron varios cambios. La tarjeta es un componente proporcionado por Bootstrap 5 que proporciona un contenedor de contenido flexible y extensible con múltiples variantes y opciones. Incluye opciones para encabezados y pies de página. Las tarjetas admiten una amplia variedad de contenido, incluidas imágenes, texto, grupos de listas, enlaces y más.

Sintaxis: 

<div class="card"> Card Content ... <div>
  • Tarjeta básica: el bloque de construcción básico de una tarjeta es el cuerpo de la tarjeta y con la clase de tarjeta como padre podemos crear una tarjeta básica. 

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
    content="width=device-width,initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <div class="card-body">
                    A computer science portal for geeks
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

  • Encabezado y pie de página: El encabezado de tarjeta proporciona un encabezado para las tarjetas y el pie de página proporciona un pie de página para las tarjetas como se indica a continuación. 

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <div class="card-header">Header</div>
                <div class="card-body">Content</div>
                <div class="card-footer">Footer</div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

  • Título y enlaces: El título de la tarjeta se usa para dar un título a la tarjeta y el enlace de la tarjeta se usa para proporcionar un enlace a la tarjeta si así lo requiere. 

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">
                        Card title</h4>
                    <p class="card-text">
                        Some example text.
                        Some example text.</p>
 
                    <a href="#" class="card-link">
                        Card link</a>
                    <a href="#" class="card-link">
                        Another link</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

  • Imágenes: las imágenes en la tarjeta se insertan con card-img-top y con card-img-bottom con la ayuda de estos dos y se usa la etiqueta  img para agregar la imagen.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <img class="card-img-top"
                    src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png"
                    alt="Card image" style="width: 100%;">
                <div class="card-body">
                    <h4 class="card-title">Developer Guy</h4>
                    <p class="card-text">Developer Guy love to
                        develope front-end and back-end
                    </p>
 
                    <a href="#" class="btn btn-primary">
                        See Profile
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

  • Ejemplo de la imagen en el botón: 

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Developer Guy</h4>
                    <p class="card-text">Developer Guy love to
                        develope front-end and back-end
                    </p>
 
                    <a href="#" class="btn btn-primary">
                        See Profile
                    </a>
                </div>
                <img class="card-img-bottom" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png"
                    alt="Card image" style="width: 100%;">
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

  • Superposiciones de imágenes: en esto, tenemos que usar una clase adicional llamada card-img-overlay en la misma línea de código que ha usado para las imágenes de tarjetas. Esto convierte una imagen en un fondo de tarjeta y superpone el texto de la tarjeta. 

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card" style="width: 400px;">
                <img class="card-img-bottom"
                    src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png"
                    alt="Card image" style="width: 100%;">
                <div class="card-img-overlay">
                    <div class="card-body">
                        <h4 class="card-title">
                            Developer Guy
                        </h4>
                        <p class="card-text" style="color: red;">
                            Developer Guy love to develope
                            front-end and back-end
                        </p>
 
                        <a href="#" class="btn btn-primary">
                            See Profile
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

  • Grupos de tarjetas: use grupos de tarjetas para representar tarjetas como un solo elemento adjunto con columnas de igual ancho y alto. 

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card-group">
                <div class="card" style="width: 200px;">
                    <div class="card-body">
                        <h4 class="card-title">
                            Developer Guy I
                        </h4>
                        <p class="card-text">
                            Developer Guy love to develop
                            front-end and back-end
                        </p>
 
                        <a href="#" class="btn btn-primary">
                            See Profile
                        </a>
                    </div>
                    <img class="card-img-bottom" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png"
                        alt="Card image" style="width: 100%;">
                </div>
                <div class="card" style="width: 200px;">
                    <div class="card-body">
                        <h4 class="card-title">
                            Developer Guy II
                        </h4>
                        <p class="card-text">
                            Developer Guy love to develop
                            android apps
                        </p>
 
                        <a href="#" class="btn btn-primary">
                            See Profile
                        </a>
                    </div>
                    <img class="card-img-bottom" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png"
                        alt="Card image" style="width: 100%;">
                </div>
                <div class="card" style="width: 200px;">
                    <div class="card-body">
                        <h4 class="card-title">
                            Developer Guy III
                        </h4>
                        <p class="card-text">
                            Developer Guy love to
                            develop machine learning models
                        </p>
 
                        <a href="#" class="btn btn-primary">
                            See Profile</a>
                    </div>
                    <img class="card-img-bottom" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190530183756/Good-Habits-for-developers-programmers.png"
                        alt="Card image" style="width: 100%;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

  • Listar grupos: Crea una lista de contenidos en una ficha. 

Ejemplo:

HTML

<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        Bootstrap
                    </li>
                    <li class="list-group-item">
                        HTML
                    </li>
                    <li class="list-group-item">
                        JavaScript
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

  • Fregadero de cocina: es un nombre que se le da al tipo de tarjeta que consiste en todo lo que contiene, es una mezcla y combinación de múltiples contenidos para hacer la tarjeta deseada. 

Ejemplo:

Bloque de código

Producción: 

  • Navegación: Agrega una barra de navegación a las tarjetas. 

Ejemplo:

HTML

<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card-text-center">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                Active
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                link
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">
                                Disabled
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-block">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">
                        This the th test area
                    </p>
 
                    <a href="#" btn-btn-primary>
                        Click me
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

  • Otro ejemplo en forma de pastillas: 

Ejemplo:

HTML

<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body style="text-align: center;">
    <div class="container mt-3">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <div class="container mt-3" style="width: 600px;">
            <div class="card-text-center">
                <div class="card-header">
                    <ul class="nav nav-pills card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                Active
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                link
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">
                                Disabled
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-block">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">
                        This the th test area
                    </p>
 
                    <a href="#" btn-btn-primary>
                        Click me
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción: 

Alineación de texto en tarjeta:

Podemos cambiar fácilmente la alineación del texto de cualquier tarjeta o una parte específica de una tarjeta en Bootstrap utilizando las clases de alineación de texto de Bootstrap de Bootstrap.

Aquí hay un ejemplo de código que muestra los ejemplos en los que tenemos que cambiar la alineación de una tarjeta completa o una parte específica de una tarjeta usando las clases de alineación de texto.

Código:

y

Producción:

Tarjeta Horizontal:

Usando la utilidad de clase de cuadrícula, podemos crear una tarjeta donde la imagen de la tarjeta y el cuerpo de la tarjeta se colocan horizontalmente en lugar de colocarse verticalmente usando las clases de utilidad de cuadrícula. Esta función también es compatible con dispositivos móviles y también es útil para sitios web receptivos.

Aquí hay un ejemplo de código en el que hemos creado una tarjeta de muestra donde la imagen y el texto del cuerpo de la tarjeta se colocan horizontalmente.

Código:

HTML

<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8" >
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!--  Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
<!-- Bootstrap JS -->
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body>
    <div class="container mt-3">
        <h1 style="color: green; text-align: center;">
            GeeksforGeeks
        </h1>
    </div>
    <div class="card mb-2" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-md-6">
                <img src="gfg.jpg" class="img-fluid rounded-start"
                    alt="...">
            </div>
            <div class="col-md-6">
                <div class="card-body">
                    <h5 class="card-title">
                        Card title
                    </h5>
                    <p class="card-text">
                        The card body and the card image
                        is placed horizontally.
                    </p>
 
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Cambiar el color de la Tarjeta:

Podemos cambiar el color de la tarjeta usando las clases de utilidad de fondo y las clases de color de texto en Bootstrap. 

Sintaxis:

<div class="card text-white bg-primary"></div>

Código:

HTML

<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!--  Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <!-- Bootstrap JS -->
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
<body>
    <div class="container mt-3">
        <h1 style="color: green; text-align: center;">
            GeeksforGeeks
        </h1>
    </div>
    <div class="card text-white bg-primary mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-white bg-secondary mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-white bg-success mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-white bg-danger mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
</body>
</html>

Producción:


 Adding Borders to Cards:

Podemos agregar bordes a las tarjetas utilizando las clases de utilidades de borde presentes en Bootstrap Framework como border-primary, border-success, border-danger y muchas más. 

Sintaxis:

<div class="card border-primary"></div>

Código completo:

HTML

<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <!--  Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">
    <!-- Bootstrap JS -->
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>
 
<body>
    <div class="container mt-3">
        <h1 style="color: green; text-align: center;">
            GeeksforGeeks
        </h1>
    </div>
    <div class="card border-primary text-primary mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-success border-success mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-secondary border-secondary mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
    <div class="card text-danger border-danger mb-3"
        style="max-width: 18rem;">
        <div class="card-header">
            This is the card header
        </div>
        <div class="card-body">
            <h5 class="card-title">
                This is card title
            </h5>
            <p class="card-text">
                This is the body of the card
                made using Bootstrap Classes.
            </p>
 
        </div>
    </div>
</body>
</html>

Producción:

Navegadores compatibles:

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Navegadores valientes
  • Ópera

Publicación traducida automáticamente

Artículo escrito por gurrrung 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 *