Image Gallery

What are Images?

Images are visual representations that can be photographs, illustrations, graphics, or any other type of visual media. They play a crucial role in enhancing the aesthetics of a webpage and can effectively convey information quickly. In web development, images can be embedded using the <img> tag, allowing for flexibility in design and layout.

Why Use Images?

Images are essential for several reasons:

Visual Appeal: Images enhance the visual attractiveness of a website, making it more engaging for users.
Communication: A picture is worth a thousand words. Images can quickly convey messages and emotions that might be difficult to express through text alone.
Branding: Consistent use of images can strengthen a brand's identity and recognition.
SEO Benefits: Properly optimized images can improve a website's search engine ranking, driving more traffic to the site.
User Engagement: Interactive images, infographics, and galleries can increase user engagement and retention on a website.

Bootstrap Images with Different Sizes

Image Code Examples


    <!DOCTYPE html>
    <html lang="en">
    <head>
          <title>Bootstrap Image Example</title>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
      </head>
      <body>

      <div class="container mt-5">
          <h2>Bootstrap Images with Different Sizes</h2>

          <!-- Small Image -->
          <div class="mb-4">
              <h5>Small Image (50x50)</h5>
              <img src="Flower.jpg.jpg" class="img-fluid" alt="Small Image" style="width: 50px; height: 50px;">
          </div>

          <!-- Medium Image -->
          <div class="mb-4">
              <h5>Medium Image (100x100)</h5>
              <img src="sea.jpg" class="img-fluid" alt="Medium Image" style="width: 100px; height: 100px;">
          </div>

          <!-- Large Image -->
          <div class="mb-4">
              <h5>Medium Image (200x200)</h5>
              <img src="Bird.jpg.jpg" class="img-fluid" alt="large Image" style="width: 200px; height: 200px;">
          </div>

      </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

Output Example


     
    
      
      
        Small Image (50x50)
        
      
      
      
      
        Medium Image (100x100)
        
      
  
      
      
        Large Image (200x200)

Bootstrap Images with Different Sizes

Image Code Examples


      <!DOCTYPE html>
      <html lang="en">
      <head>
            <title>Bootstrap Image Example</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
  
        <div class="container mt-5">

          <!-- Small Round Image -->
          <div class="mb-4">
              <h5>Small Round Image (50x50)</h5>
              <img src="image1.jpg" class="img-fluid rounded-circle" alt="Small Round Image" style="width: 50px; height: 50px;">
          </div>

          <!-- Medium Round Image -->
          <div class="mb-4">
              <h5>Medium Round Image (100x100)</h5>
              <img src="image14jpg.jpg" class="img-fluid rounded-circle" alt="Medium Round Image" style="width: 100px; height: 100px;">
          </div>

          <!-- Large Round Image -->
          <div class="mb-4">
              <h5>Large Round Image (200x200)</h5>
              <img src="sky.jpg class="img-fluid rounded-circle" alt="Large Round Image" style="width: 200px; height: 200px;">
          </div>

      </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    </body>
    </html>

Output Example


     
    
      
      
        Small Round Image (50x50)
        
      
      
      
      
        Medium Round Image (100x100)
        
      
    
      
      
        Large Round Image (200x200)

« Previous Next »