Struggling to line up three images with linked attachments in a single row using Bootstrap 4

Currently tackling my portfolio for a school project, I find myself stuck on organizing my projects in a single line. Here is the code snippet that's giving me trouble...

<div class="container">
   <div class="row">
      <div class="col-md-4">
         <a href="https://codepen.io/Designird/pen/JwLQoj" target="_blank" class="project project-title">
            <img class="img-thumbnail" src="https://i.imgur.com/8TGwqfY.jpg" alt="project">
              <div class="project-tile">Howard Stern Tribute Page</div>
         </a>
     </div>
     
     <div class="col-md-4">
        <a href="https://codepen.io/Designird/pen/Jwemdd" target="_blank" class="project project-title">
             <img class="img-thumbnail" src="https://i.imgur.com/UtN8xFJ.jpg" alt="project">
             <div class="project-tile">Product Landing Page</div>
         </a>
     </div>
     
     <div class="col-md-4">
       <a href="https://codepen.io/Designird/pen/xmoWLB" target="_blank" class="project project-title">
           <img class="img-thumbnail" src="https://i.imgur.com/lY9IvVn.jpg" alt="project">
           <div class="project-tile">UFO Sighting Survey</div>
       </a>
    </div>
  </div>
</div>
  </div>

htmlcssbootstrap-4

Answer №1

One thing that stood out to me initially was the excessive use of closing </div> tags in your code. It's beneficial to properly indent your code for readability. I included the img-fluid class to ensure images are responsive and do not overflow their container.

Take a look at the snippet below in full screen for a clearer view.

I streamlined the elements and kept only what was necessary to address the issue. Hopefully, this simplification is helpful.

Don't forget to refer to the Bootstrap documentation for comprehensive guidance. You can find everything you need there. LINK

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.css">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid" src="https://i.imgur.com/8TGwqfY.jpg" alt="">
        <div>Howard Stern Tribute Page</div>
      </a>
    </div>
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid" src="https://i.imgur.com/UtN8xFJ.jpg" alt="">
        <div>Product Landing Page</div>
      </a>
    </div>
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid" src="https://i.imgur.com/lY9IvVn.jpg" alt="">
        <div>UFO Sighting Survey</div>
      </a>
    </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

What is the process of generating a dynamic card/button element on an ASP.net webpage using information from the backend database?

I'm faced with a challenge of displaying employees' names and titles from a MSSQL Server database table on an ASP .NET webform as individual "card" objects. Currently, I am able to showcase a static number of records by using an asp button object ...

javascriptc#cssasp.netasp.net-mvc

IE encountered an invalid character

While working on a JavaScript function, I encountered an issue with a string variable. Specifically, when running the page in IE with this script, I receive an error message indicating an invalid character at the following line: let displayString = `${s ...

javascripthtmlinternet-explorer

What could be causing my insertRow function to inject empty cells into my table?

I am facing an issue with adding the results of a fetch request into a table as a new row. Strangely, when I click the button to trigger this function for the first time, it adds an empty row instead of the desired data. However, on subsequent clicks, the ...

javascripthtml

Struggling to implement touch event functionality for CSS3 spotlight effect

I'm experimenting with implementing touch events on an iPad to achieve a certain effect. Currently, I have it working smoothly with mouse events on JSFiddle at this link: http://jsfiddle.net/FwsV4/1/ However, my attempts to replicate the same effect ...

javascriptjquerycsstouch

Enhance the functionality of Woocommerce email notifications by incorporating a customized VAT field

I have exhausted all options and tried various email hooks without success. I inherited an outdated PHP code that was developed by someone else, which I updated for new woocommerce hooks (since the code is 4 years old). Everything is functioning smoothly e ...

javascriptphphtmlwordpresswoocommerce

Display sub navigation when clicked in WordPress

I currently have the default wordpress menu setup to display sub navigation links on hover, but I am interested in changing it so that the sub navigation only appears when the user clicks on the parent link. You can view my menu here https://jsfiddle.net/f ...

javascriptjquerycsswordpress

Having Multiple File Inputs [type=file] in one webpage

Is it possible to have two separate inputs for uploading images, each setting a different background image in a div? The second file input is: <input type='file' id='getval' name="logo" /> I want this file to be set as the back ...

javascripthtmlcss

Mapping the Way: Innovative Controls for Navigation

Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...

javascriptcssmapshere-api

Hover effects can be applied to CSS tabs

There seems to be a CSS issue on Chrome where the background image is not hiding when clicking on next tabs. I have used the following code: .paymentBank ::after { content: " "; } You can view the live code [here][1] and I have also attached a scree ...

htmlcss

The alignment of Bootstrap input fields is off center

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); <div class="row"> <div class="col-xs-12 text-center btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is Amazon altering the names of their CSS selectors and HTML elements on the fly?

For my Amazon.es web scraper built with Selenium, I am using a CSS selector to determine the total number of pages it will iterate through. However, the selector name seems to change dynamically and I must update it daily. As someone not well-versed in H ...

pythonhtmlcssseleniumweb-scraping

Avoid sudden page movements when validating user input

After successfully implementing the "Stars rating" feature from https://codepen.io/462960/pen/WZXEWd, I noticed that the page abruptly jumps up after each click. Determined to find a solution, I attempted the following: const labels = document.querySelect ...

javascriptcss

Change the default direction of content scrolling in CSS and JavaScript to scroll upwards instead of

I am currently working on a website where the navigation bar spans the entire width and remains fixed in place. Below the navigation bar is a cover image, followed by the main content section. As you scroll down, the navigation bar covers the image from t ...

javascripthtmlcss

The inline-block property can become unstable when dealing with a large number

When I create a parent container div with three child divs and set the display property to inline-block, everything looks great on jsfiddle CSS #container { border: 1px solid blue; padding: 2px; display: inline-block; } .child { width: ...

htmlcss

Drawing intersecting lines on a javascript canvas and clearing them using the lineto method

I am working with a canvas where lines are drawn based on mouse movement. I am trying to achieve the effect of the line only lasting for a few seconds before disappearing, similar to swirling a ribbon with a set length. I have been using lineTo to draw the ...

javascripthtmlcanvashtml5-canvas

Tips for keeping div and input tags selected even after a user clicks

I am working on a quiz script and I am trying to customize it so that when a user clicks on the div or input tags, they remain selected with a different background color. Currently, I have achieved changing the background color of the div when clicked, ...

htmlcssformsinputlabel

Revamp the UI Framework's CSS to accommodate the latest Web Components

I've implemented Grommet as the UI Framework for my React page. However, I encountered a situation where certain web components, like a web chat control, are not covered by Grommet's CSS. What is the simplest way to style these additional web com ...

cssreactjswebpacksass

How to Choose Between Landscape and Portrait Printing Modes in Firefox and Internet Explorer 8

Currently, I am using the latest version of FireFox and IE8. In order to change the printing orientation, I utilized the following code in my CSS file: @page { size: portrait; } You can find more information about the @page property here. Although it i ...

javascriptjqueryhtmlcssprinting

Unexplained vanishing of CSS padding upon form submission

Hey there! I've been working on creating a contact form using PhP, HTML, and CSS. Everything seems to be working fine except for one issue - when I submit the form with incorrect information, the CSS padding disappears. Can anyone help me figure out w ...

phphtmlcss

React - using dangerouslySetInnerHTML does not display the expected output

When I enter the following text in the textbox labeled "Type Here" AAA: <HEllo> BBB: <HE llo> The desired result should be identical to what is entered in the "Type Here" box. However, the actual result box does not display the same output ...

htmlreactjs