`Implementing a dynamic list with image and button using Bootstrap 5`

I've been exploring ways to create a container with 4 images aligned next to each other, accompanied by a button beneath each image. My goal is for the layout to be responsive, meaning that as the screen size adjusts, the elements inside should also adapt accordingly. Below is my current implementation:

<pre><code>
<div class="container-md">
    <div class="row">
        <div class="col-md-3">
            <img src="img1.png">
            <button class="btn mt-2 btn-secondary">Button 1</button>
        </div>
        <div class="col-md-3">
            <img src="img2.png"">
            <button class="btn mt-2 btn-secondary">Button 2</button>
        </div>
        <div class="col-md-3">
            <img src="img3.png">        
            <button class="btn mt-2 btn-secondary">Button 3</button>       
        </div>
        <div class="col-md-3">
            <img src="img4.png">  
            <button class="btn mt-2 btn-secondary">Button 4</button>
        </div>
    </div>
</div>
</code></pre>

The expected behavior based on different screen sizes is illustrated below: Large screen size:

Medium screen size

Small screen size

However, in my current code, the images appear too large and the buttons are positioned inline with the images, lacking responsiveness (emoji images are used as examples):

I understand that resizing the images is necessary, but I have attempted various methods without finding the most suitable one. Any suggestions or tips on styling would be greatly appreciated.

Answer №1

To enhance the responsiveness of your website using Bootstrap, consider starting by applying the img-fluid class to your img elements. This will allow the images to scale accordingly with the width of their parent containers.

Additionally, customize the layout of your content by utilizing responsive classes for the col element. Incorporate classes like col-sm-6, col-md-6, and col-lg-3 to adjust the column placement based on different viewport widths.

If you need a button to span the entire width of its parent container, wrap it in a div with the d-grid class as recommended in the Bootstrap documentation.

Lastly, introduce vertical gutters to create spaces between elements within a row. Apply the gy-3 class to the div serving as a row to achieve this effect.

Here's an example showcasing these modifications (dummy image sources are used):

<link
  href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364358445845">[email protected]</a>/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
  crossorigin="anonymous"
/>

<div class="container-md">
  <div class="row gy-3">
    <div class="col-sm-6 col-md-6 col-lg-3">
      <img src="https://picsum.photos/1000?random=1" class="img-fluid" />
      <div class="d-grid">
        <button class="btn mt-2 btn-secondary">Button 1</button>
      </div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-3">
      <img src="https://picsum.photos/1000?random=2" class="img-fluid" />
      <div class="d-grid">
        <button class="btn mt-2 btn-secondary">Button 2</button>
      </div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-3">
      <img src="https://picsum.photos/1000?random=3" class="img-fluid" />
      <div class="d-grid">
        <button class="btn mt-2 btn-secondary">Button 3</button>
      </div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-3">
      <img src="https://picsum.photos/1000?random=4" class="img-fluid" />
      <div class="d-grid">
        <button class="btn mt-2 btn-secondary">Button 4</button>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Production environment poses a challenge as Rails 4 struggles to locate fonts

Situation: I am facing an issue with my Rails 4.0.0 application deployed using capistrano, where the asset precompilation does not work properly on my production server. Challenge: Despite successfully adding a font and using it with @font-face locally, t ...

What is the best way to apply CSS styles to different states in React?

I am endeavoring to adjust the size of an element by utilizing this code snippet. const [size, setSize] = useState({}); The initial size I wish to set is: transform: scale(1, 1) translate3d(0, 0, 0); Upon clicking on the element, my aim is to enlarge it ...

personalizing material-ui component styles – set select component color to be pure white

I am looking to implement a dropdown menu using material-ui components (refer to https://material-ui.com/components/selects/). To do so, I have extracted the specific component from the example: Component return <div> <FormControl variant="outli ...

Creating a Google Captcha with validation is a straightforward process that can enhance the

I am having issues with adding Google Captcha to my form. Despite all fields working properly, the Captcha integration seems to be causing some disruptions. I have included my code below. Thank you in advance for your help. Please also check the following ...

Retrieve data from a JSON gist by parsing it as a query string

I have a JavaScript-based application with three key files: index.html app.js input.json The app.js file references input.json multiple times to populate content in div elements within index.html. My goal is to enhance the functionality so that when acc ...

What is the best method for flipping the sequence of elements in media queries?

I am facing an issue with two divs, left and right, on my webpage. When the screen size is less than 500px, I want the left div to move to the bottom and the right div to move to the top. Essentially, I need to swap the positions of these divs in the DOM. ...

Leveraging MUI v5 sx Prop for Applying Various CSS Properties Simultaneously (such as margin, border-radius, and more)

Is there a more efficient way to write the following code that utilizes the sx prop's access to spacing units? <MUIComponent sx={{ borderRadius: '4px 8px 12px 16px' }} /> Could it be written like this instead? <MUIComponent sx={{ b ...

Utilize ngModel within the <p> element in Angular 8

Here is some HTML code for displaying card information: <div class="col-md-4" *ngFor="let card of allCards"> <p class="card-text">Card Color: {{card.color}}</p> <button type="button" class=" ...

Issue with creating a new jstree node

I recently put together a basic jstree. When I click on a link, it triggers the createNode() function. This function utilizes the create feature from the API to generate a new node. It appears to be a common issue with jQuery that I am encountering. Any ...

I'm having an issue where the Bootstrap dropdown submenu is not displaying properly depending on

I'm facing an issue creating a dropdown menu and submenu using Bootstrap on Vue 3 and bootstrap 5.2 Here is the JSON menu data: [ { "id": 1, "name": "Menu 1", "active": 1, &q ...

The issue with jQuery click function seems to be limited to Firefox

After a long hiatus from posting here, I hope this isn't breaking any rules. For those who prefer visual examples, you can visit the live page at: The drop-down menu functions perfectly in IE, Chrome, and Safari, but seems to be causing issues in Fir ...

Problem encountered in Firefox using Selenium: Invalid expression SyntaxError when dealing with Div tags in XPath

I encountered an error while attempting to automate a sample Qlikview web report using Selenium Browser: Firefox Xpath returned by FirePath: .//*[@id='58']/div[2]/div/div[1]/div[4]/div[1] Exception: **Exception**: Exception in thread "main ...

Text reveal animation in Framer Motion is not functioning as expected

I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...

Tips for showcasing HTML as code tailored to certain programming languages

While browsing the web, I stumbled upon a website that had SQL code displayed with specific classes and styles applied to it. For example, table names were colored blue when inspected. Here is a glimpse of what I encountered: https://i.sstatic.net/WAacj.p ...

The battle between dynamic PDF and HTML to PDF formats has been a hot

In my current project, I am developing multiple healthcare industry dashboards that require the functionality to generate PDF documents directly from the screen. These dashboards do not involve typical CRUD operations, but instead feature a variety of char ...

The width of the unordered list is not what I defined

when I set this line: <ul style="width:100px; height:100px; background-color:green"> <li style="width:100px; height:100px; border:1px solid blue"> 1 </li> </ul> The ul ends up wider than my specified 100px width. Any thoughts ...

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

CORS blocked the JavaScript Image's request

I am encountering an issue with my code that involves capturing selected divs using the HTML2Canvas library. However, when I try to download the captured image file, it is not working as expected. The error message I keep receiving is "Access to Image at ...

Pictures without a set width

Hey there! I'm working on a responsive website and facing an issue with image resizing. When I shrink the screen size, the images also shrink along with it. How can I set a fixed width for the images? I tried switching from rem to px but that didn&apo ...

There is excessive white space at the bottom of my Index page after the footer that needs to be removed

Recently began working on converting a PSD to HTML and I've reached a point where everything seems fine. However, I understand that my CSS programming may not be the best at the moment. With your help, I am confident that I can learn and improve gradu ...