How to place two bootstrap cards next to each other ?

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:
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Web technologies Questions
Write From Home
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to Add Image into Dropdown List for each items ?
How to Align modal content box to center of any screen?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
Roadmap to Learn JavaScript For Beginners
How to fetch data from an API in ReactJS ?