Bootstrap: Arrange multiple images horizontally within a row

I am trying to design a list item for a game that includes a background, an iconholder with an icon, a title, description, and up to three resources. I have been experimenting with Bootstrap and attempted using a container-fluid with an inner row but the images end up stacking on top of each other (refer to the image) []

Is there a way to ensure that the images are stacked on top of one another rather than underneath?

This is what my HTML code looks like so far:

.resourceHolder {
  position: relative;
}

.resourceIcon {
  position: relative;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.iconHolder {
  position: relative;
  width: 100%;
}

.icon {
  position: relative;
  width: 65%;
}

.bannerText {
  font-family: FenwickWood;
  color: #0062cc;
  margin: 0 0 20% 0;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: beige;
  pointer-events: none;
}
<div class="container-fluid">
<img class="background" src="assets/UI/window/wood_plank1.svg">
  <div class="row">
    <div class="col-sm-3 nopadding">
<img class="iconHolder" src="assets/UI/window/grid4L.svg">
<img class="icon" src="assets/Terrain_Medieval/Decor/villageSmall03.png">
    </div>
<div class="col-sm-3 nopadding">
<h1 class="bannerText">Village</h1>
</div>
<div class="col-sm-2 nopadding">
<img class="resourceHolder" src="assets/UI/window/grid4L.svg">
<img class="resourceIcon" src="assets/Icons/gold_coins.png">
</div>
  </div>
</div>

htmlcssangularbootstrap-4

Answer №1

To achieve the desired layout, you can utilize CSS Grid and place both images within the same cell.

Take a look at this example on jsfiddle: https://jsfiddle.net/dscmr7oz/.

By the way, I noticed you mentioned not wanting to use "position: absolute". Just wanted to clarify that it is a valid method for layering elements. Did you know that by placing an absolutely positioned element inside a relatively positioned element, the inner element is positioned relative to its parent?

.container {
    position: relative;
}

.container .bottom-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
{

.container .top-image {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2
}

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

Removing an element from the array stored in NGRX

I currently have an object stored in a repository in the following format: export interface Referential { id: string; values: Array<ReferentialData>; } export interface ReferentialData { libelle: string; value: string; borderColor: string; ...

angularngrx

Ensure the menu bar remains at the top of the page without using the position:

Check out this awesome fiddle here! My menu bar looks great at the top, but for some reason it won't stay in place when the user scrolls down. I've tried adding position:fixed to the CSS under the first #cssmenu, but it messes everything up. Her ...

htmlcss

jQuery - class remains unchanged on second click event

Operations: Upon clicking on an element with the class thumb_like or thumb_unlike, a like will be added or removed for the image using a POST request. The element with the class thumb_count will increase or decrease based on user actions. For example, lik ...

javascriptjqueryhtml

Position a Paper component in the center of a div

I'm having trouble centering my <Paper> element inside a div. Can anyone help me with this? I have placed both the <Paper> and <RaisedButton> elements inside the div and applied the following CSS: .timerArea { text-align: center; ...

cssreactjsmaterial-ui

Is it possible to target the sibling of the currently selected or focused element with CSS?

I'm attempting to add button functionality to show and hide errors using CSS. By clicking the CSS button or link, I can target the siblings of the focused element as shown below. This method is only effective in IE8+ browsers. #ShowErrors:focus + a ...

cssinternet-explorerdombrowser

Steps to assign the identifier as the current index in the v-for iteration

Struggling to assign the id based on the index of a v-for loop. I attempted: <li v-for="(item, index) in items" v-bind:key="item.id"> <p>{{item.name}}</p> <input id= {{index}} type= "number"> < ...

javascripthtmlvue.jsindexingtags

Exploring the world of Typescript, mastering tests, and diving deep into debugging

As a newcomer to Angular 2 and TypeScript, I recently created a basic application using the Angular CLI. However, I've encountered a gap in my understanding regarding how TypeScript code in VS Code translates into a functional app in a web browser. I ...

angulardebuggingtestingvisual-studio-codekarma-jasmine

PHP: Incorrect URL formats with or without a variable present

I am currently working on customizing a PHP web application and could use some assistance. The Application is originally set up to operate in the ROOT path of the Webserver. I have made some modifications to make it work in different paths, but I am facing ...

phphtmlvariables

How do I return a <div> element to its initial state after JavaScript has made changes to it?

So, I have this situation where a DIV contains a form. After users submit the form successfully, I want to replace the form with a simple message saying "everything is good now". This is how I currently do it: $("#some_div").html("Yeah all good mate!"); ...

javascriptjqueryhtmlhtml-manipulation

Exploring the implementation of Javascript, HTML, PHP, and Ajax in programming

<div class="navigation"> <a class="prev" href="index.php?month=__prev_month__" onclick="$('#calendar').load('index.php?month=__prev_month__&_r=' + Math.random()); return false;"></a> <!-- <div class="title" & ...

javascriptphphtmlajax

Adjusting the height of a container dynamically in React while flex items wrap using CSS

In my React project, I have a container called "answers-container" with multiple buttons inside it, laid out using flexbox with flex-wrap: wrap to allow them to wrap onto the next line when the container width is exceeded. However, I'm facing an issu ...

javascripthtmlcssreactjs

How can I create spacing between squares in an HTML div element?

Currently, I am working on my project using Laravel 5. I retrieve some integer values from a database and use them to create square divs in HTML. Below is the current output of my work. https://i.stack.imgur.com/sy2ru.png You may notice that there is spa ...

javascriptphphtmlcsslaravel

In IE8, the :last-child pseudo-class appears to be ineffective

Here is the HTML structure I am working with: <div class="footerMenu"> <ul> <li>Home</li> <li>About</li> <li>Feedback</li> <li>Contact us</li> </ul> ...

htmlcssinternet-explorer-8css-selectors

Flameflare/Console-inspired hover animation

Curious if there is a creative solution to this problem that I haven't thought of yet... I'm working on a site editor tool and it would be incredibly useful to have the ability to highlight elements when hovering over their code in the html/elem ...

cssconsolefirebughighlight

Creating a custom button to perfectly fit the contours of its content with Font Awesome 5

Can the shape of a button be altered to match its content? Specifically, I am using the "fa-trash-alt" icon and have a button with hover effects that I only want to apply to the icon itself rather than the entire button. Button: <button type='but ...

htmlcssbuttonfont-awesomefont-awesome-5

Incorporating components into Vue while utilizing Flask poses a challenge

Currently, I am working on a project that involves Flask and Vue. I am attempting to add a carousel to my website, but I am running into difficulties with creating and importing components for Vue when following tutorials. Here is my current file structure ...

pythonhtmlvue.jsflaskimport

Ways to show buttons as inline or block elements when a single button is enclosed within a form

Need help figuring out how to make two buttons display as block elements on small screens and inline elements on larger screens, especially when one button is wrapped inside a form? I am struggling with displaying two buttons on my page. One of the button ...

csstwitter-bootstrapresponsive-designbootstrap-4

Convert text into a clickable link

Creating a form with numerous text fields, some of which require numerical input. The main goal is to have users enter a tracking number, order number, or any other type of number that, when submitted, will open a new URL in a separate window with the spec ...

javascriptphpjqueryhtmlforms

To prevent the default alignment in case the text exceeds the input length, stop the automatic alignment

I have a query regarding an input field with a maximum length of 4 characters. The appearance is such that these 4 characters seem to be delineated by borders which are actually 3 lines displayed above the input field. When I enter the fourth character, a ...

javascriptjqueryhtmlcss

Solving the problem of Hover Effects in CSS

I am struggling to get the nav-link to be blue in color with a dark-blue hover effect. I managed to set the color correctly, but for some reason, the hover effect is not working. Can anyone help me figure out what the issue might be? Additionally, does any ...

htmlcssbootstrap-5