What is the best way to arrange three photos in columns of four each below one image spanning across all twelve columns?

Struggling with the bootstrap 5 grid? I'm trying to showcase one full image with a col-12 and 600px width, along with three images, each 200px wide with a col-4. The goal is to have one image on top and three beneath it with g-3 spacing between them. I created two separate rows under one container, using img-fluid class for each image to make them full width. However, the three images are not aligning correctly. Please take a look at the issue https://i.sstatic.net/zNkRt.png

Here's the code I'm currently using:

 <div class="container text-center pt-5">
  <div class="row">
    <div class="col-12"><img class="img-fluid pb-2" src="./images/01.jpg" alt=""></div>
  </div>
  <div class="row g-3">
    <div class="col-4"><img class="img-fluid " src="./images/02.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/03.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/04.jpg" alt=""></div>
  </div>
</div>

Here's the desired end result https://i.sstatic.net/qlerr.jpg

I've consulted Bootstrap 5 documentation and followed the same structure, but the issue persists. Any help would be greatly appreciated.

cssgridbootstrap-5image-gallery

Answer №1

Consider utilizing the container-fluid class for your container element

 <div class="container-fluid text-center pt-5">
  <div class="row">
    <div class="col-12"><img class="img-fluid pb-2" src="./images/01.jpg" alt=""></div>
  </div>
  <div class="row g-3">
    <div class="col-4"><img class="img-fluid " src="./images/02.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/03.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/04.jpg" alt=""></div>
  </div>
</div>

Answer №2

Essentially, I had to specify the size of the container, so I included a class named container-box with a width of 600px, resulting in the following code snippet.

<div class="container container-box text-center pt-5">
  <style>.container-box{
    width: 600px;
 }</style>
  <div class="row">
    <div class="col-12"><img width="600" class="img-fluid pb-2" src="./images/01.jpg" alt=""></div>
  </div>
  <div class="row g-3">
    <div class="col-4"><img width="200" class="img-fluid " src="./images/02.jpg" alt=""></div>
    <div class="col-4"><img width="200" class="img-fluid " src="./images/03.jpg" alt=""></div>
    <div class="col-4"><img width="200" class="img-fluid " src="./images/04.jpg" alt=""></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

Having trouble with displaying the CSS background image?

I've been attempting to configure background images using CSS, but for some reason, I'm not able to get the images to show up correctly. Below is the CSS code that I'm working with: a.fb { background-image: url('img/Facebook.png&a ...

htmlcss

Show or conceal a bootstrap spinner using a function

Quandary I am facing an issue with displaying a bootstrap spinner while a function is running. The spinner should be visible during the execution of the function and disappear once it is done. Here is the code for the bootstrap element: <div id="res ...

javascripthtmlcssbootstrap-5

Gradually appear with jQuery while maintaining current position

Exploring Display Options In my current setup, I have text that initially has a display:none property, and jQuery is applied to fadeIn() the content. The challenge lies in the fact that since the text is centered, as each word appears, the positioning on ...

javascriptjquerycss

Is it possible to adjust the ul width to match its parent's width using CSS?

Whenever I type in a search, a list is displayed. The issue arises on small devices where the width of the list exceeds that of the search input or its parent container, which should not happen. On small devices, it should always look like this: Example L ...

cssbootstrap-4

Quickly redesigning the appearance of file input using javascript and jquery. Seeking assistance to correct css issues on jsfiddle

Hey there, I've been working on styling the input[type="file"] element and could use some assistance. Like the saying goes, "One JSfiddle is worth 1000 words," so here's the link to my example: --- For more details, click here: http://jsfiddle.n ...

javascriptjqueryhtmlcsscss-float

Creating personalized dots in the owl carousel

I have successfully added custom previous and next buttons to my carousel using Owl Carousel, but I am having trouble displaying the navigation dots. Can anyone help me identify where I might have made a mistake? // owl.carousel.css .owl-controls { ...

htmlcssowl-carousel

Personalizing CSS for showcasing bot icon next to bot reply container

I'm currently working on modifying the layout of this HTML page. I want to include a bot icon next to each bot response, and I also need to decrease the space between consecutive messages. https://i.sstatic.net/lBiMD.png Any suggestions on how I can ...

htmlcss

What is the best way to utilize the sx prop in Material UI for applying styles specifically when the component is active or selected?

In the code snippet below, I have set up the useState hook so that when a ListItem is clicked on, the selected state becomes true. My goal is to apply specific styling when an item is selected using the sx prop instead of creating a styled component for su ...

javascriptcssreactjsmaterial-uifrontend

CSS3 Icon: the content being placed is not consistently positioned

I'm utilizing CSS3 to create icons, and everything was going smoothly until I encountered an issue with a simple design. My goal is to have an exclamation mark centered inside a circle, but its position appears inconsistent. At times, it seems slightl ...

htmlcssinserticons

Personalizing Google Map pin

I found some code on Codepen to add pointers to a Google map. Currently, it's using default markers but I want to change them to my own. However, I'm not sure where in the code to make this update. Any examples or guidance would be appreciated. ...

javascriptcssgoogle-maps

Issues with functionality of Bootstrap 5 popover in responsive JavaScript DataTable

As I work on constructing a web page for my hobby, I am utilizing Bootstrap 5.3.3 and JS DataTables 2.0.5. Within the page, there is a table displaying data about various players. I have implemented a feature where clicking on certain cells triggers a popo ...

javascripthtmldatatablesbootstrap-5

Enhance Your Website with Dynamic Navigation Animation

Seeking assistance with animating a navigation bar on and off the screen from the left side. The nav is not animating as expected using the latest version of jquery.min.js. The first step was to animate the nav upon clicking an object. View the current pro ...

jqueryhtmlcss

Video background function that mimics CSS's background size cover for a specific element, instead of the entire webpage

In the process of developing a new website, I am looking to incorporate a large splash background as a "hero" image. Similar to the website found at , I am hoping to use a video as the background image showing a woman unloading a car. One key requirement ...

htmlcssresponsive-design

Unveiling the Secrets of Implementing Interactive HTML Tabs

I have a simple HTML page that contains a table with two columns and two rows. My goal is to convert these two columns into tabs, so that when each row is clicked, it will display either a paragraph or another basic table with one row and column. All of t ...

jquerycssajaxhtml

Creating a responsive layout in HTML/CSS where the div element expands to fill the entire vertical space of its parent

Looking for assistance in creating a webpage layout like the one shown in this fiddle... http://jsfiddle.net/jeljeljel/5BSva/ I need the vertical line on the left side navigation tab to extend all the way down to the footer at the bottom of the page. Th ...

htmlcss

How to apply background-color to a div element with ng-repeat directive?

Hey there, I'm dealing with the following code: angular.module("myApp", []).controller("myController", function($scope) { $scope.boxList = [{ color: 'red' }, { color: '#F8F8F8' }, { color: 'rgb(50, 77, 32) ...

htmlcssangularjs

Ensure that radio buttons are positioned next to their respective labels on separate lines

My HTML form is structured with sections as described below: I prefer having the labels inline to prevent the section from being excessively tall, but I'm facing an issue where the radio buttons are not staying aligned with their respective labels. ...

htmlcssforms

Generating a Popup Alert with a DIV

Looking at this instance: HTML / CSS Popup div on text click I am curious about how to have this display on the main page upon initial visit to the website. I prefer it to load automatically without requiring a button click, and once the content is read, ...

htmlcsspopuponload

When a JavaScript click event is triggered, IE8 can reset certain margins to zero

I am experiencing an issue with 3 divs containing content that becomes visible when clicking on 3 buttons. You can see a demonstration of the problem here: At times, when I click one of the buttons, the layout seems to be disrupted as shown here: It appe ...

javascriptjqueryhtmlcss

inadequately arranged in a line

In Bootstrap 4, I have created this form group that you can view in this fiddle: <div class="m-portlet__body"> <div class="form-group m-form__group row"> <label class="col-lg-2 col-form-label"> Email Address ...

cssbootstrap-4