How To Design Responsive Card-deck With Fixed Width In Bootstrap

admin_img Posted By Bajarangi soft , Posted On 08-10-2020

Bootstrap card provide us a lot of functionality that we can play around. We can also make them responsive and also of fixed size all depends on our need. So the code for the fixed size bootstrap card deck is given below. We have provided the code without using CSS properties so it looks much simpler and easier to understand

Bootstrap Card-deck

Example Below, we will use some Bootstrap classes to design responsive card. 
Also you can look for the code for how to create a card and then use it according to your need. You can modify the pictures using img tag given inside the card class div.

Example-1

<!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>
<br>
<!-- 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=
            "logo.jpg"
         alt="Card image cap">

    <div class="card-body">
        <h5 class="card-title">
        Bajarangi Soft
        </h5>

        <p class="card-text">
          Bajarangi Soft is the best place
            to improve your computer code
            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>
Example-2
<!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">
    <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>
</head>

<body>
<div class="container-fluid p-0 m-0
            align-items-center
            justify-content-center d-flex"
     style="min-height: 100vh;
         background-color: #6d5d05;">

    <!-- 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=
                        "logo.jpg"
                     alt="Card image cap">

                <div class="card-body">
                    <h5 class="card-title">
                        Bajarangi Soft
                    </h5>
                    <p class="card-text">
                        Bajarangi Soft  is the best place
                        to improve your computer code
                        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=
                        "logo.jpg"
                     alt="Card image cap">

                <div class="card-body">
                    <h5 class="card-title">
                        Bajarangi Soft
                    </h5>

                    <p class="card-text">
                        Bajarangi Soft is the best place
                        to improve your computer code
                        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=
                        "logo.jpg"
                     alt="Card image cap">

                <div class="card-body">
                    <h5 class="card-title">
                        Bajarangi Soft
                    </h5>

                    <p class="card-text">
                        Bajarangi Soft  is the best place
                        to improve your computer code
                        knowledge.
                    </p>


                    <a href="#" class="btn btn-success">
                        Click me
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>

Related Post