How to display multiple horizontal images in Bootstrap card ?

How to display multiple horizontal images in Bootstrap card ?

Last Updated : 12 Jul, 2019

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.

html

<!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= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
    
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
    
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 
    </script> 
    
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
    </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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">

                    <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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190705124953/Left-SP2019.png">
                    
                    <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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190623192118/Left-Bar-DSA-Self.png">
                    
                    <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>

Output:

How to display multiple horizontal images in Bootstrap card ?

P

Pritesh Ranjan 1

Improve

Article Tags :

Similar Reads

How to use grid for images in bootstrap card ?

Images can be added to the Bootstrap card by simply using an img tag. But we cannot use the same method directly to place an Image Grid into the Bootstrap Card as it will be lead to a misaligned design. Therefore, to get a per-flow to place image Grid into Bootstrap Card. The perfectly aligned grid

How to Display an Image only on Mobile View in Bootstrap?

To display an image only on mobile view in Bootstrap, you can utilize Bootstrap's responsive utility classes along with a combination of CSS media queries. So one common requirement is to display an image only on small screen devices while hiding it on larger screen devices. Approach: Using Bootstra

How to Display Three Bootstrap Cards in a Column ?

In Bootstrap, aligning the three cards in a column is important to create a vertical layout for displaying content on smaller screen devices or to make the web page responsive and compatible for all devices. Use the below approaches to display three Bootstrap cards in a column: Table of Content Usin

How to Design Half-Page Carousel in Bootstrap ?

It can be included in your webpage using â€œbootstrap.jsâ€ or â€œbootstrap.min.jsâ€. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations to achieve the slide effect. Bootstrap Carousel is image slide show for your webpage to make it look more

How to Create Image Overlay Effects in Bootstrap ?

Creating image overlay effects in Bootstrap means adding content like text, buttons, or other elements on top of an image. This is achieved using Bootstrap's utility classes and custom CSS to position the overlay content, often making use of relative and absolute positioning.ApproachUse Bootstrap's