How to create image with a description in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To create an image with a description in bootstrap, you can use a bootstrap card where you can add an image with a description in a beautiful design. it will create an image with a description in bootstrap.

Today, I am going to show you. how to create an image with a description in bootstrap with code example.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Example of image with a description

This article will guide you to create an image with a description in Bootstrap with an example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Includes bootstrap library

First of all, load the Bootstrap 5 framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Step 3: Example of image with a description

In this example, we will use bootstrap card, card-img-top, card-body, and card-text classes and put appropriate content on it.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="image/images-flower.jpg" alt="Card image cap">
            <div class="card-body">
                <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>

Check the output of the above code example.

Bootstrap, description, image

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts