How to add Text over image Using Bootstrap

Need to put the text over the image in Bootstrap or simple HTML/CSS?
In this article, we will share how you can put that text over the image using Bootstrap in 2 different ways. Both methods work in Bootstrap and in simple HTML/CSS as well.

Here are two ways:

1- Image Inside div Method:

.parent{
   position: relative;
   width: 500px;
}
.img{
  width:500px;
}
.top-left{
   position: absolute;
   left:0;
   top:0;
}
.top-right{
   position: absolute;
   right:0;
   top:0;
}
.bottom-left{
   position: absolute;
   left:0;
   bottom:0;
}
.bottom-right{
   position: absolute;
   right:0;
   bottom:0;
}

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

In this example, we need to have the parent class which needs to be assigned the position:relative. Then we need to have our image inside the parent inside parent div

Make sure the width and height of the parent and image is same otherwise the text and image will not be at the desired position.

Now finally add the text with the classes, we have added 4 classes with top-left, top-right, bottom-left and bottom-right text. Note every text class as the position:absolute and property top, left, bottom and right will change.

For the top left text, we need to add the left:0 and top:0
For the top right text, we need to add the right:0 and top:0
For the bottom left text, we need to add the left:0 and bottom:0
For the bottom right text, we need to add the right:0 and bottom:0

2- Background Image Method:

In this method instead of having the image inside the div, we are putting the image as the background. Besides this, all  the code will rename the same

Note the parent image needs to have the height to actually show the image.

.parent {
   background-image: url("image.jpg");
   background-size: cover;
   height: 500px;
   position: relative;
}
.text{
   color:white;
   position: absolute;
}
.top-left{
   top:0;
   left:0;
}

.top-right{
   top:0;
   right:0;
}
.bottom-left{
   bottom:0;
   left:0;
}

.bottom-right{
   bottom:0;
   right:0;
}

.center {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

<div class="parent">
   <div class="text top-left">This is Top left</div>
   <div class="text top-right">This is Top right</div>
   <div class="text bottom-left">This is Bottom left</div>
   <div class="text bottom-right">This is Bottom right</div>
   <div class="text center">This is Center</div>
</div>

Conclusion:

Hope you learned something new about how to place the text over the image in different places. If you share the article with your fellows.

If you still have questions, feel free to comment. We always try to answer everyone.