CODEWITHSUNDEEP
htmlcssangularbootstrap-4
GeekPeek
GeekPeek

Reputation: 1767

Bootstrap: Create images on same row

I want to create a list item in a game that has a background, an iconholder with an icon inside it, a title and description and up to three resources. I am working with Bootstrap and thought that using a container-fluid with a row inside it might work but the images are placed underneath each other (see image) [this is what I have right now.]

I don't want to use things like position:absolute, or set the margin at like -250% 0 0 0. Is there a way to say that images should be placed on top of one another, instead of underneath each other?

This is my HTML code thus 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>

Upvotes: 0

Views: 162

Answers (1)

FunkMonkey33
FunkMonkey33

Reputation: 2248

You can use CSS Grid layout, and put both images in the same cell.

Checkout out this jsfiddle: https://jsfiddle.net/dscmr7oz/.

Also, when you say you don't want to use things like position:absolute", why is that? It is a completely legitimate way to put things on top of each other. Are you aware that if you put an absolute-positioned element inside a relative-positioned element, that the inner element is absolutely 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
}

Upvotes: 1

Related Questions