¿Cómo diseñar un mazo de cartas receptivo con ancho fijo en Bootstrap?

La tarjeta Bootstrap nos brinda una gran cantidad de funcionalidades con las que podemos jugar. También podemos hacerlos receptivos y también de tamaño fijo, todo depende de nuestra necesidad. Entonces, el código para el mazo de cartas de arranque de tamaño fijo se proporciona a continuación. Hemos proporcionado el código sin usar las propiedades CSS para que parezca mucho más simple y fácil de entender.

En este artículo, usaremos algunas clases de Bootstrap para diseñar una tarjeta receptiva. 

También puede buscar el código de cómo crear una tarjeta y luego usarlo según sus necesidades. Puede modificar las imágenes usando la etiqueta img dada dentro de la clase de tarjeta div.

Ejemplo 1: 

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
      
    <title>
        How to design Responsive card-deck 
        with fixed width in Bootstrap ?   
    </title>
  
    <!-- bootstrap linked-->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
</head>
  
<body>
  
    <!-- Card design with bootstrap class mx-auto 
        for making it centered in the div-->
    <div class="card mx-auto" style="width:18rem;">
        <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"
                    alt="Card image cap">
  
        <div class="card-body">
            <h5 class="card-title">
                GeeksforGeeks
            </h5>
  
            <p class="card-text">
                Geeks for Geeks is the best place 
                to improve your computer science 
                knowledge.
            </p>
  
              
            <a href="#" class="btn btn-success">
                Click me
            </a>
        </div>
    </div>
  
    <!--card end here-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>
        How to design Responsive card-deck 
        with fixed width in Bootstrap ?
    </title>
  
    <!-- bootstrap linked-->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container-fluid p-0 m-0 
                align-items-center 
                justify-content-center d-flex"
            style="min-height: 100vh; 
            background-color: #498433;">
  
        <!-- Row for the card-->
        <div class="row w-100 p-0 w-0">
  
            <!-- Column for card-->
            <div class="col-lg-4 mb-2">
                <div class="card mx-auto" style="width:18rem;">
                    <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"
                                alt="Card image cap">
  
                    <div class="card-body">
                        <h5 class="card-title">
                            Geeks for Geeks
                        </h5>
                        <p class="card-text">
                            Geeks for Geeks is the best place 
                            to improve your computer science
                            knowledge.
                        </p>
  
                          
                        <a href="#" class="btn btn-success">
                            Click me
                        </a>
                    </div>
                </div>
            </div>
  
            <!-- Another column for card -->
            <div class="col-lg-4 mb-2">
                <div class="card  mx-auto" style="width:18rem;">
                    <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"
                                alt="Card image cap">
  
                    <div class="card-body">
                        <h5 class="card-title">
                            Geeks for Geeks
                        </h5>
  
                        <p class="card-text">
                            Geeks for Geeks is the best place 
                            to improve your computer science
                            knowledge.
                        </p>
  
  
                        <a href="#" class="btn btn-success">
                            Click me
                        </a>
                    </div>
                </div>
            </div>
  
            <!-- Another column for card -->
            <div class="col-lg-4 mb-2">
                <div class="card  mx-auto" style="width:18rem;">
                    <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200529212604/geeks.png"
                            alt="Card image cap">
  
                    <div class="card-body">
                        <h5 class="card-title">
                            Geeks for Geeks
                        </h5>
  
                        <p class="card-text">
                            Geeks for Geeks is the best place 
                            to improve your computer science
                            knowledge.
                        </p>
  
  
                        <a href="#" class="btn btn-success">
                            Click me
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</body>
  
</html>

Producción:

Nota: El ejemplo 1 representa cómo hacer una sola tarjeta, mientras que el ejemplo 2 representa cómo incrustar esa tarjeta de manera eficiente para que responda.

Publicación traducida automáticamente

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