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
- Create a <div> tag and set the classname “col-md-10“.
- Insert your image in HTML using <img> tag and set the classname anything.
- Then write your image text using <p> tag and set the classname “carousel-caption“
- In CSS, select your <img> classname and set the width, “z-index” to 0.
- Select <p> class and set “z-index” to 1 as in the above code.
- 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: