Skip to content
Related Articles

Related Articles

Improve Article

How to place two bootstrap cards next to each other ?

  • Difficulty Level : Easy
  • Last Updated : 14 May, 2020

Bootstrap is the most popular, free, and open-source HTML, CSS framework that is used to make a responsive website and make them beautiful. It provides various classes to work with that can be used to make a website beautiful. It also provides classes for creating cards.

Cards: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Syntax:




<div class="card" style="width: 20rem">
    <img class="card-img-top" src="..." 
            alt="Card image cap">
    <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">
            Some quick example text to build
            on the card title and make up the
            bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">
            Go somewhere
        </a>
    </div>
</div>
Example 1: This example using bootstrap’s grid to make a row and divide it.



<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, 
        initial-scale=1, shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
  
    <link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
        integrity=
"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
         crossorigin="anonymous">
  
    <title>
        Place two bootstrap cards next to each other
    </title>
</head>
  
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card">
                    <img class="card-img-top" src="" alt="">
  
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">
                            Some quick example text to build on 
                            the card title and make up the bulk 
                            of the card's content.
                        </p>
  
                        <a href="#" class="btn btn-outline-primary btn-sm">
                            Card link
                        </a>
                        <a href="#" class="btn btn-outline-secondary btn-sm">
                            <i class="far fa-heart"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-4">
                <div class="card">
                    <img class="card-img-top" src="" alt="">
  
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">
                            Some quick example text to build on the 
                            card title and make up the bulk of the 
                            card's content.
                        </p>
                          
                        <a href="#" class="btn btn-outline-primary btn-sm">
                            Card link
                        </a>
                        <a href="#" class="btn btn-outline-secondary btn-sm">
                            <i class="far fa-heart"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
Output:
Example 2: To create Cards of equal width and height you can also use a class of Bootstrap card-deck.



<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1,shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
         crossorigin="anonymous">
           
    <link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
            integrity=
"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
             crossorigin="anonymous">
  
    <title>
        Place two bootstrap cards 
        next to each other
    </title>
</head>
  
<body>
    <div class="card-deck">
        <div class="card">
            <img class="card-img-top" src="" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">
                    This is a longer card with supporting 
                    text below as a natural lead-in to 
                    additional content. This content
                    is a little bit longer.
                </p>
  
                <p class="card-text">
                    <small class="text-muted">
                        Last updated 3 mins ago
                    </small>
                </p>
            </div>
        </div>
  
        <div class="card">
            <img class="card-img-top" src="">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">
                    This card has supporting text below 
                    as a natural lead-in to additional 
                    content.
                </p>
  
                <p class="card-text">
                    <small class="text-muted">
                        Last updated 3 mins ago
                    </small>
                </p>
            </div>
        </div>
  
        <div class="card">
            <img class="card-img-top" src="">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">
                    This is a wider card with supporting 
                    text below as a natural lead-in to 
                    additional content. This card has 
                    even longer content than the first 
                    to show that equal height action.
                </p>
                  
                <p class="card-text">
                    <small class="text-muted">
                        Last updated 3 mins ago
                    </small>
                </p>
            </div>
        </div>
    </div>
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
Output:



My Personal Notes
arrow_drop_up
Next

How to display multiple horizontal images in Bootstrap card ?
Recommended Articles
Page :
How to place two input box next to each other using Bootstrap 4 ?
03, Sep 20
Bootstrap | Cards
22, Dec 17
Bootstrap 4 | Cards
17, May 19
Cards in React-Bootstrap
15, Feb 21
How to put items underneath each other flex box in Bootstrap 4 ?
27, Jul 20
How to place button in top Right corner using bootstrap?
25, Jul 19
How to place the image above the slider in mobile view in bootstrap?
07, Aug 19
How to place table text into center using Bootstrap?
05, Aug 20
How to force tab-navigation to stay in place using Bootstrap ?
07, Aug 20
How to place SVG icons on a round circle side by side to another div using Bootstrap?
25, Aug 20
How to put two columns one below other in sidebar in Bootstrap ?
13, Oct 20
When to use next() and return next() in Node.js ?
17, Mar 21
How to pass variables to the next middleware using next() in Express.js ?
16, Feb 21
Semantic-UI | Cards
19, May 20
Materialize | Cards
06, Aug 20
W3.CSS Cards
20, Feb 21
How to create Expanding Cards using HTML, CSS and Javascript ?
05, Mar 21
Modern CSS Cards
28, Jan 21
How to set two bars with rounded arrows overlapping each other in CSS?
22, Jan 21
Check if two strings are permutation of each other
20, Aug 18
Include Bootstrap in AngularJS using ng-bootstrap
18, Jun 19
Difference between bootstrap.css and bootstrap-theme.css
13, Mar 20
Difference Between Bootstrap 3 and Bootstrap 4
02, Jun 20
Difference between Bootstrap 4 and Bootstrap 5
09, Jul 20
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
karanbhatia6541
@karanbhatia6541
Vote for difficulty
Current difficulty :
Easy





Article Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox