Bootstrap Text Over Image Example


Example 1: bootstrap left image right text

<div class="card">         <div class="row no-gutters">             <div class="col-auto">                 <img src="//placehold.it/200" class="img-fluid" alt="">             </div>             <div class="col">                 <div class="card-block px-2">                     <h4 class="card-title">Title</h4>                     <p class="card-text">Description</p>                     <a href="#" class="btn btn-primary">BUTTON</a>                 </div>             </div>         </div>         <div class="card-footer w-100 text-muted">             Footer stating cats are CUTE little animals         </div>   </div>

Example 2: How to put text inside image in bootstrap

<div class="container">   <img src="img_snow_wide.jpg" alt="Snow"    style="width:100%;">   <div class="bottom-left">Bottom Left</div>      <div class="top-left">Top Left</div>   <div class="top-right">Top    Right</div>   <div class="bottom-right">Bottom Right</div>      <div class="centered">Centered</div> </div>

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable