Bootstrap Text Over Image

This article will show how to create text over an image using Bootstrap.

Step by Step Guide to create text over image

1. Create a <div> tag and set the classname “col-md-10“.
2. Insert your image in HTML using <img> tag and set the classname anything.
3. Then write your image text using <p> tag and set the classname “carousel-caption“
4. In CSS, select your <img> classname and set the width, “z-index” to 0.
5. Select <p> class and set “z-index” to 1 as in the above code.
6. After applying these steps correctly, your text over an image will output is displayed

HTML:

<div class="col-md-10">
<img src="sas.jpg" class="img" width="100">
<p class="carousel-caption">WONDER DEVELOP</p></div>

CSS:

.img {
width:80%;
z-index: 0; }

.text-over-img {
z-index:1;
font-size: 1.2em
margin-top: -100px;
}

Output: