Having Trouble Aligning Contents in a Row Horizontally using Bootstrap 5

My Images are refusing to align in a horizontal row no matter what I try.

Output: https://i.sstatic.net/echGV.png

.img-size-square {
    width:  100%;
    height:  auto;
    max-width: 400px !important;
    max-height: 400px !important;
}

.container-for-hover {
  position: relative;
  width: 50%;
}

.image-for-hover {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-for-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #6633ff;
}

.container-for-hover:hover .overlay-for-hover {
  opacity: 1;
}

.text-for-hover {
  color: white;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
   <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368776875">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d2c9d6c9d4">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  
  <div class="row">
    <div class="row">
      <div class="d-flex col-12">
        <div class="mx-auto">
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 1, Row 1</div>
            </div>
          </div>
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 2, Row 1</div>
            </div>
          </div>
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 3, Row 1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="d-flex col-12">
        <div class="mx-auto">
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 1, Row 2</div>
            </div>
          </div>
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 2, Row 2</div>
            </div>
          </div>
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 3, Row 2</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

What I've Attempted: I've gone through the official documentation and also tried solutions from here -> W3 BS5 Docs. I experimented with the use of flex-row, but I'm still relatively new to the field of web development.

Objective: The container-for-image Div(s) should align in a horizontal row within each row class div

htmlcssbootstrap-5

Answer №1

Follow the flex directive in the mx-auto class for alignment

.img-size-square {
    width:  100%;
    height:  auto;
    max-width: 400px !important;
    max-height: 400px !important;
}

.container-for-hover {
  position: relative;
  width: 50%;
}

.image-for-hover {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-for-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #6633ff;
}

.container-for-hover:hover .overlay-for-hover {
  opacity: 1;
}

.text-for-hover {
  color: white;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.mx-auto{
display:flex;
margin:0 auto;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e213e23">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07656868737473756677473229362934">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
  
  <div class="row">
    <div class="row">
      <div class="d-flex col-12">
        <div class="mx-auto">
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 1, Row 1</div>
            </div>
          </div>
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 2, Row 1</div>
            </div>
          </div>
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 3, Row 1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="d-flex col-12">
        <div class="mx-auto">
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 1, Row 2</div>
            </div>
          </div>
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 2, Row 2</div>
            </div>
          </div>
          <div class="container-for-hover img-size-square mb-2">
            <img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div class="overlay-for-hover">
              <div class="text-for-hover">Some Content Here 3, Row 2</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer №2

In order for the layout to work correctly, it is important to ensure that the 3 children are placed directly within the d-flex container. This is because d-flex acts as the flex container and having the children nested incorrectly will result in only one child being displayed in a row.

 
  <div class="row">
    <div class="row">
      <div class="d-flex col-12 mx-auto">
        <div class="container-for-hover img-size-square mb-2">
          ...
        </div>
        <div class="container-for-hover img-size-square mb-2">
          ...
        </div>
        <div class="container-for-hover img-size-square mb-2">
          ...
        </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

As you hover over the chosen image, the selected image will appear

I have a simple HTML code with some JavaScript where I display sets of images. All I want is for the images to pop up when hovered over, appearing in a larger size. Below is the example HTML Code: <div class="content-box-left-bootomgrid lastgrid"> ...

jqueryhtmlimage

Trouble selecting options in hierarchical data

I've been attempting to run this sample code for selecting an option from a select element with hierarchical data, but it seems to be having some issues. $scope.options = [ { id: 1, info: { label: "Item 1" } }, { id: 2, info: { label: ...

javascripthtmlangularjs

Achieving unique proportions with HTML5 video resizing

On my page, I plan to showcase a video specifically for desktop browsers. I have devised some code to determine whether the video is in landscape or portrait orientation. The challenge lies in deciding what to do based on this orientation: If the video is ...

javascriptjquerycss

Create a unique margin using CSS only that will appear at the bottom of a flex-row container that scrolls

I'm trying to create a horizontal scroller with margins between each item and consistent margins at both ends. However, I'm noticing that the margin at the end of the container seems to be disappearing somehow. Is there a way to maintain the mar ...

htmlcssscrollflexbox

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

htmlcssflexbox

Add some animation to elements when the page loads

I am curious about triggering a css animation when the page loads. I am currently experimenting with css animations for the first time. Here is what I have created so far: https://jsfiddle.net/7prg793g. However, it only works upon hover at the moment. * ...

htmlcss

Changing div height with scrolling

I am looking to dynamically increase the height of a div as the user scrolls through the page. You can see the site I am working on here: The specific div that needs its height adjusted is the menu located on the right side of the page. I have developed ...

jqueryhtml

Container that displays vertical scroll while permitting floating overflows

Is there a way to set up a container so that when the window size is too small, it displays a scroll bar to view all elements that don't fit in one go? At the same time, can the child containing floating elements be allowed to extend beyond the bounda ...

cssreactjstypescriptmaterial-ui

The image has max-height within a max-height container inside a fixed-height container

Here's the scenario: Can an image's max-height property be made to respect the fixed height of an ancestor element that is not its direct parent? I am aware that max-height requires a fixed height for calculation, so this query is distinct from ...

cssheight

The select tag in an iOS app is functional, but unfortunately the multiple select feature is not functioning correctly

When developing my ios app, I utilize loadHTMLString to display a view. Within this view, I generate a select tag with multiple selection options using the following HTML code: [HTML appendFormat:@"<select multiple=\"multiple\" onchange=&bsol ...

iphonehtmliosxcodeselect

Utilizing :checked selector and toggle() function in jQuery

I'm facing an issue with my jQuery code where the CSS changes are not working as expected. When I test the code, it doesn't apply the CSS changes. If I remove the :checked and just use $("input"), then the CSS works but only when clicking on an i ...

jquerycsscheckbox

Move the footer down to the bottom of the page

I'm struggling to create a footer that consistently stays at the bottom of the page, regardless of the amount of content on the page. I've tried following various tutorials but haven't had much success. I'm starting to think I must be d ...

javascriptjqueryhtmlcssfooter

Utilize the assigned value of a variable from a separate file

Is it possible to set a variable in an external file called "Variable.js", assign it a value in a file named "Page1.html", and then use that variable with its assigned value in another file named "Page2.html"? For example, let's consider the contents ...

javascripthtml

HTML5 elements expand to fit the dimensions of the window

While creating an HTML5 page, I observed that div elements without specified widths within sections like "header" and "footer" only occupy the width of the window. For instance: <header> <div id="header-background" style="background: #ddd"> ...

csshtml

Generate a unique identifier for the HTML content

Is there a more efficient way to assign unique id tags to certain words using vanilla javascript? For example: <p>All the king's horses ran away.</p> For instance, "All" would have the id "term1", "King's" would have "term2", and ...

javascripthtml

Manipulating database records with Laravel 5.0: deleting and modifying data

Is there a way to manage database entries in Laravel 5.0 using the public functions destroy and edit? I am working on my library and need to make changes to the database entries @foreach ($allJobs as $job) <tr> <td><img src="{{ ...

phphtmllaravel

Tips for fading the text of list items when their checkbox is marked as done?

I am trying to figure out how to gray out a list item when its checkbox is checked. The code I currently have takes text input from a textbox and adds it to an unordered list when the add button is clicked. Each list item contains a checkbox within it. My ...

javascripthtmlcss

Iterating through a SASS map and retrieving the next item in the loop

I am working with a color array that looks like this: $colors: ( 'primary': '#aaa', 'secondary': '#bbb', 'color-3': '#ccc', 'color-4': '#ddd', 'color-5': & ...

csssass

Utilizing absolute and relative positioning for setting up a flexible sidebar layout

I'm finding myself a bit puzzled when it comes to using Absolute and Relative positioning. In essence, I have a sidebar with about 4 divs in it. My goal is for div 3 to stay in the same position on every page, even if div 1 or div 2 are missing and c ...

csscss-position

Tips for refreshing the 'state' of an Angular Router component

I'm facing an issue with passing data between pages using Angular routing. Everything works as expected when navigating to the "next" page for the first time. However, upon returning to the home page and selecting a different item, the Router's s ...

htmlangulartypescriptionic-framework