Bootstrap Image Related Classes
Notes:
Bootstrap Image related classes:
img-thumbnail : displays an image with light gray rounded border & adds some padding around an image
<img src="images/koala.jpg" width="100" class="img-thumbnail"/>
img-fluid : indicates the given image is a responsive image
<img src="images/koala.jpg" width="10%" class="img-fluid"/>
rounded : displays image with rounded corners
<img src="images/koala.jpg" width="100" class="rounded"/>
rounded-circle : displays image in circle
<img src="images/koala.jpg" width="100" class="rounded-circle"/>
figure, figure-image & figure-caption :
figure: converts element to inline-block
figure-caption: displays text little light in color
figure-image: indicates it’s an image
<figure class="figure text-center">
<figcaption class="figure-caption">Koala Image</figcaption>
<img src="images/koala.jpg" width="100" class="figure-image rounded"/>
</figure>
Bootstrap displaying text and image side by side:
float-left & float-right & clearfix:
<p class="border clearfix">
<img src="images/my-pic.jpg" width="10%" class="float-left"/>
Chidre'sTechTutorials | Best Animation, VFX, Multimedia, Gaming, Computer Science & Engineering TutorialsChidre'sTechTutorials | Best Animation, VFX, Multimedia, Gaming, Computer Science & Engineering TutorialsChidre'sTechTutorials | Best Animation, VFX, Multimedia, Gaming, Computer Science & Engineering TutorialsChidre'sTechTutorials | Best Animation, VFX, Multimedia, Gaming, Computer Science & Engineering TutorialsChidre'sTechTutorials | Best Animation, VFX, Multimedia, Gaming, Computer Science & Engineering TutorialsChidre'sTechTutorials | Best Animation, VFX, Multimedia, Gaming, Computer Science & Engineering Tutorials
</p>
Interview Questions:
