Example 1: how to make image responsive bootstrap 4
<img src="..." class="img-fluid" alt="Responsive image">
Example 2: bootstrap Aligning images
Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class. <img src="..." class="rounded float-left" alt="..."> <img src="..." class="rounded float-right" alt="..."> <img src="..." class="rounded mx-auto d-block" alt="...">
Example 3: 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>
Comments
Post a Comment