Bootstrap 4 Tutorial

BS4 Images

Last modified on: October 25, 2024

<h1>Bootstrap 4 Images</h1>
<p>Bootstrap 4 makes it easy to manage images in your web projects, ensuring that they are responsive, well-aligned, and visually appealing. With built-in classes, you can control image sizes, alignments, and styles effortlessly.</p>
<h2>Key Features of Bootstrap 4 Images</h2>
<ol>
<li>
<p><strong>Responsive Images</strong>: Use the <code>.img-fluid</code> class to make images scale properly to the parent container, maintaining their aspect ratio.</p>
</li>
<li>
<p><strong>Image Alignment</strong>: Bootstrap provides utility classes for aligning images, including centering and floating images.</p>
</li>
<li>
<p><strong>Image Thumbnails</strong>: The <code>.img-thumbnail</code> class adds a border and padding to images, giving them a thumbnail-like appearance.</p>
</li>
<li>
<p><strong>Image Shapes</strong>: You can create rounded images using the <code>.rounded</code> class or circular images using <code>.rounded-circle</code>.</p>
</li>
<li>
<p><strong>Responsive Image Classes</strong>: Bootstrap 4 provides classes to easily adjust image sizes at different breakpoints.</p>
</li>
</ol>
<h2>Basic Image Structure</h2>
<p>Here&rsquo;s how to use an image with Bootstrap 4:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;img src="image.jpg" class="img-fluid" alt="Description of the image"&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Examples of Bootstrap 4 Images</h2>
<h3>1. Responsive Image</h3>
<p>Make an image responsive using the <code>.img-fluid</code> class:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;img src="https://via.placeholder.com/800x400" class="img-fluid" alt="Responsive Image"&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>2. Image Thumbnails</h3>
<p>Add a thumbnail effect to your images:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;img src="https://via.placeholder.com/300" class="img-thumbnail" alt="Thumbnail Image"&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>3. Rounded Images</h3>
<p>Create rounded images using the <code>.rounded</code> class:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;img src="https://via.placeholder.com/300" class="rounded" alt="Rounded Image"&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>4. Circular Images</h3>
<p>For circular images, use the <code>.rounded-circle</code> class:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;img src="https://via.placeholder.com/300" class="rounded-circle" alt="Circular Image"&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>5. Aligning Images</h3>
<p>Use utility classes to align images:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="text-center"&gt;
    &lt;img src="https://via.placeholder.com/300" class="img-fluid" alt="Centered Image"&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>6. Image Grid</h3>
<p>You can create a grid layout for images using Bootstrap's grid system:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-md-4"&gt;
            &lt;img src="https://via.placeholder.com/300" class="img-fluid img-thumbnail" alt="Image 1"&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
            &lt;img src="https://via.placeholder.com/300" class="img-fluid img-thumbnail" alt="Image 2"&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
            &lt;img src="https://via.placeholder.com/300" class="img-fluid img-thumbnail" alt="Image 3"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>7. Responsive Image with Caption</h3>
<p>You can also include captions for your images:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="card"&gt;
    &lt;img src="https://via.placeholder.com/800x400" class="card-img-top img-fluid" alt="Card image cap"&gt;
    &lt;div class="card-body"&gt;
        &lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
        &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>Example: Complete Bootstrap 4 Image Gallery</h2>
<p>Here&rsquo;s a complete example of an image gallery using Bootstrap 4:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 4 Image Gallery&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 4 Images&lt;/h1&gt;

&lt;h2&gt;Responsive Image&lt;/h2&gt;
        &lt;img src="https://via.placeholder.com/800x400" class="img-fluid" alt="Responsive Image"&gt;

&lt;h2&gt;Image Thumbnail&lt;/h2&gt;
        &lt;img src="https://via.placeholder.com/300" class="img-thumbnail" alt="Thumbnail Image"&gt;

&lt;h2&gt;Rounded Image&lt;/h2&gt;
        &lt;img src="https://via.placeholder.com/300" class="rounded" alt="Rounded Image"&gt;

&lt;h2&gt;Circular Image&lt;/h2&gt;
        &lt;img src="https://via.placeholder.com/300" class="rounded-circle" alt="Circular Image"&gt;

&lt;h2&gt;Image Grid&lt;/h2&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-4"&gt;
                &lt;img src="https://via.placeholder.com/300" class="img-fluid img-thumbnail" alt="Image 1"&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
                &lt;img src="https://via.placeholder.com/300" class="img-fluid img-thumbnail" alt="Image 2"&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
                &lt;img src="https://via.placeholder.com/300" class="img-fluid img-thumbnail" alt="Image 3"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>&nbsp;</h3>

Web Technology View More