Bootstrap - Images


Advertisements

This chapter covers the Bootstrap support for images. Bootstrap provides three classes that can be used to apply some simple styles to images −

  • .img-rounded − adds border-radius:6px to give the image rounded corners.

  • .img-circle − makes the entire image round by adding border-radius:500px.

  • .img-thumbnail − adds a bit of padding and a gray border −

The following example demonstrates this −

<img src = "/bootstrap/images/download.png" class = "img-rounded">
<img src = "/bootstrap/images/download.png" class = "img-circle">
<img src = "/bootstrap/images/download.png" class = "img-thumbnail">

Useful Video Courses


Video

Bootstrap Online Training

26 Lectures 2 hours

Anadi Sharma

Video

Bootstrap 4 Responsive Web Development

54 Lectures 4.5 hours

Frahaan Hussain

Video

Bootstrap By Building Projects - Includes Bootstrap 4

Featured

161 Lectures 14.5 hours

Eduonix Learning Solutions

Video

Responsive E Commerce Website Designing Without Bootstrap

20 Lectures 4 hours

Azaz Patel

Video

Bootstrap 4 for Tutorials

15 Lectures 1.5 hours

Muhammad Ismail

Video

Complete Bootstrap 5 Course From Scratch With 3 Projects

62 Lectures 8 hours

Yossef Ayman Zedan

Advertisements