How to display multiple horizontal images in Bootstrap card ?

Pre-requisite: Bootstrap Cards

Bootstrap cards provide a flexible and extensible content container with multiple variants and options such as styling the Tables, stacking multiple images horizontally/vertically, making the stacked contents responsive, etc. Cards include so many options for customizing their backgrounds, borders, Header, footer, color, etc.

To show multiple horizontal images in Bootstrap card you need to clear the basics of Bootstrap Card, there is an easy way to do that task. Also, there is some pre-defined bootstrap code which will give a similar output after that you can easily modify that little bit with the help of CSS, those are

  • grid markup
  • Card groups
  • Card decks
  • Card columns

Example: This example inserts multiple images in Bootstrap card horizontally.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html lang="en"
<head
    <title>
        How to show multiple horizontal
        images in Bootstrap card ?
    </title
      
    <meta charset="utf-8"
    <meta name="viewport" content="width=device-width, initial-scale=1"
  
    <link rel="stylesheet" href
      
    <script src
    </script
      
    <script src
    </script
      
    <script src
    </script
      
    <style>
        img {
            max-width: 100%;
            max-height: 50%;
            padding-top:10px;
        }
        h1 {
            color: green;
        }
    </style>
</head
  
<body
    <h1 style="color:green;text-align:center;"
        GeeksforGeeks 
    </h1
  
    <div class="container">
        <div class="card-group">
  
            <!--bootstrap card with 3 horizontal images-->
            <div class="row">
                <div class="card col-md-4">
                    <img class="card-img-top" src=
  
                    <div class="card-body">
                        <h3 class="card-title">Compare</h3>
                        <p class="card-text">JavaScript | Python</p>
                    </div>
                </div>
  
                <div class="card col-md-4">
                    <img class="card-img-top" src=
                      
                    <div class="card-body">
                        <h3 class="card-title text-primary">Placement</h3>
                        <p class="card-text">Sudo Placement Course</p>
                    </div>
                </div>
                  
                <div class="card col-md-4">
                    <img class="card-img-top" src=
                      
                    <div class="card-body">
                        <h3 class="card-title">DSA</h3>
                        <p class="card-text">DS & Algo Course</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>                 

chevron_right


Output:



My Personal Notes arrow_drop_up

I am computer engineer and work as content creator for various sites as freelancer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.