How to Create Text Over Image using Bootstrap

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:

bootstrap text over image

Leave a Reply