What is the best way to get three columns of images to align in a single row?

I'm currently working on setting up a portfolio section for a website I am developing using Bootstrap.

Unfortunately, I've run into an issue where the third item in my lineup keeps jumping to the next line and I can't figure out how to fix it.

Here is a snippet of the code:

<div class="container-fluid">
  <div class="row align-content-center">

    <div class="col-lg-4 col-md-6 d-flex">
      <figure class="figurefx pushup">
        <img src="assets/img/work-sample/hive.jpg" class="img-fluid" alt="Hive II">
        <figcaption><a href="">Hive II</a></figcaption>
      </figure>
    </div>

    <div class="col-lg-4 col-md-6 d-flex">
      <figure class="figurefx pushup">
        <img src="assets/img/work-sample/jackson.jpg" class="img-fluid" alt="Jackson House">
        <figcaption><a href="">Jackson House</a></figcaption>
      </figure>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 d-flex">
    <figure class="figurefx pushup">
      <img src="assets/img/work-sample/p5.jpg" class="img-fluid" alt="P5 Residence">
      <figcaption><a href="">P5 Residence</a></figcaption>
    </figure>
  </div>

</div>
</div>

htmlcssweb

Answer №1

It appears there is an error in your markup. Removing this div should resolve the issue.

Remember to properly indent your code to catch these kinds of mistakes

Best of luck!

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b465b45581419051d1446">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row align-content-center">

    <div class="col-lg-4 col-md-6 d-flex">
      <figure class="figurefx pushup">
        <img src="assets/img/work-sample/hive.jpg" class="img-fluid" alt="Hive II" />
        <figcaption>
          <a href="">Hive II</a>
        </figcaption>
      </figure>
    </div>

    <div class="col-lg-4 col-md-6 d-flex">
      <figure class="figurefx pushup">
        <img src="assets/img/work-sample/jackson.jpg" class="img-fluid" alt="Jackson House">
        <figcaption>
          <a href="">Jackson House</a>
        </figcaption>
      </figure>
    </div>
    <!-- removed closing div -->
    <!-- </div> -->

    <div class="col-lg-4 col-md-6 d-flex">
      <figure class="figurefx pushup">
        <img src="assets/img/work-sample/p5.jpg" class="img-fluid" alt="P5 Residence">
        <figcaption>
          <a href="">P5 Residence</a>
        </figcaption>
      </figure>
    </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

A method for automatically collapsing one div item when another is open

I have tried various methods but none seem to work. I am attempting to open only one div at a time, please click on the link above to see for yourself. Please provide any alternate solutions or suggestions. JsFiddle: http://jsfiddle.net/gm2k3ewp/ < ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

When the 'object' value is 0, the 'level' input will not appear on the screen

Task at hand: Hide the 'level' input when the 'object' value is 0. Current situation: input type="text" id="level" input type="text" id="object" My attempt: var lvl = do ...

javascriptjqueryjsonhtmlcss

When utilizing media queries, the div element struggles to adjust to the width of the browser

I need assistance in making the left box and the right box stack vertically when viewed on a screen width of 600px or less. I have been able to achieve this for the navigation bar, but I am facing issues with implementing the same for the boxes. I have tri ...

css

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

I've been tasked with creating two toggle tabs/buttons in a single column on a website where visitors can switch between them without affecting the page's other elements. The goal is to emulate the style of the Personal and Business tabs found on ...

javascripthtmlcsstabstogglebutton

What is the best method for placing a single character from a user's quote into a table?

this is an example of some HTML code <section class="insertionCitation"> <label>Quote:</label> <input #quote (keyUp.Enter)='validateQuote(quote.value)'> </section> `- how can I display one letter ...

htmlangular

Switch the view to a grid layout upon clicking

Using bootstrap 5, I've successfully created a list view: <div class="col"> Click to switch to grid/list </div> Below is the content list: <div class="row mt-3 list"> list view ... ..... ....... </div ...

javascripthtmlcssbootstrap-5

Tips for aligning a row at the bottom within a nested column

Desired Outcome I am struggling to arrange two smaller images next to a larger image using Bootstrap 4. Specifically, I am having difficulty aligning one of the smaller images at the bottom so that it matches the alignment of the larger image. The layout ...

htmlcsstwitter-bootstrapbootstrap-4

Proper method for verifying line-clamp in a Vue component

I came across a question that aligns perfectly with my current task - determining if text is truncated or not. The query can be found here: How can I check whether line-clamp is enabled?. It seems like my approach may not be accurate, so any guidance on ho ...

javascriptcssvue.js

Excessive margin-left values for CSS div positioning are simply outlandish

http://jsfiddle.net/SVJaK/1338/ I attempted to create a small space between the green divs and my right div in this fiddle. I had to specify a very large pixel margin-left value to achieve that slight gap. Can someone explain why? Even though the gap is a ...

htmlcsspositionmargin

Displaying motion of a vehicle with a series of images

Can anyone provide tips on creating an animation that uses multiple images in CSS or jQuery? I was inspired by a Windows skin and would like to create a rotating car animation. Is this possible? Any advice is greatly appreciated. Thank you! ...

jquerycssanimation

Discovering the element's class within an each loop

I am currently working on a dynamic menu system that changes the style of the active page item in the menu. My approach involves utilizing separate body classes for each page and then iterating through the li elements in the menu to find a match with the b ...

javascriptjqueryhtmlcss

Applying styled numbering to elements using nth-child selector in

I have a div with multiple p tags inside. My goal is to assign them numbers using CSS. The number of p tags may vary. By using the :nth-child() selector and the ::before pseudo-element, I can achieve something like this: div p:first-child::before { ...

htmlcsscss-selectorspseudo-class

Download functionality is functional in Chrome but not in Explorer when using jQuery

I have implemented the following code to facilitate file downloads directly to the desktop: $('#resourceTable tbody').on( 'click', '#getFile', function () { var data = resourceTable.row( $(this).parents('tr& ...

javascriptjqueryhtml

Refreshing the Canvas post-submission

I have created a form that allows users to add notes and sign on a Canvas. However, I am facing an issue with clearing the canvas after submission, as it does not seem to work properly. The rest of the form functions correctly. The goal is to clear both t ...

javascripthtml

Utilizing PHP Variables in an External JavaScript: A Step-by-Step Guide

I am attempting to utilize an array generated in PHP within my external JavaScript. My PHP code retrieves images from a directory based on the user ID provided via URL and stores them in an array. I aim to use this array in JavaScript to create a photo sli ...

javascriptphpjqueryhtmlarrays

A method for enabling a stationary, fluctuating height object to occupy area

Initially, I am looking for a solution using only CSS. While JavaScript can accomplish this easily, I prefer to stick to CSS for now. On my webpage, I have three containers: two fixed and one static. The goal is to adjust the padding of the static contai ...

cssfixed

The functionality of outlines in Bootstrap 4 seems to be malfunctioning

What is the method used by Bootstrap to disable the HTML outline property? After adding the form control class to my input, I noticed that "outline: none;" no longer has an effect. <input class="form-control" style="outline:none;"> Check out the c ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

What is the best way to vertically center these two boxes within the confines of this red box?

Is there a way to vertically align the white and green boxes inside the red box? I'm aiming for a layout similar to the one shown in the image below. Your help is greatly appreciated! Check out this demo on jsfiddle. <style> *{ padd ...

htmlcss

CSS: "Cutting-edge" design. In what way?

I am seeking to replicate a design similar to that of Fantastical's website (https://flexibits.com/fantastical), where the edge of a screenshot extends beyond the page boundary. As the user resizes the window, more of the screenshot becomes visible. A ...

jqueryhtmlcssresponsive

What could be causing the "function undefined" error in my HTML document?

Recently, I developed a small chat application that initially functioned well with all code contained in one HTML document. However, after separating the CSS, HTML, and JS into individual files, an issue arose when invoking the register_popup function from ...

javascriptjqueryhtmlajaxdjango