Bootstrap Pictures

May 04, 2021 06:00 Bootstrap

Table of contents

Bootstrap Pictures

In this chapter, we'll learn about Bootstrap's support for pictures. Bootstrap offers three classes that can apply simple styles to pictures:

  • .img-rounded: Add border-radius:6px to get picture fillets.
  • .img-circle: Add border-radius: 500px to round the entire picture.
  • .img-thumbnail: Add some padding and a gray border.

Take a look at the example demonstration below:

<!DOCTYPE html>
   <title>Bootstrap 实例 - 图片</title>
   <link href="//" rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//" rel="external nofollow" ></script>
   <script src="//" rel="external nofollow" ></script>

<img src="" class="img-rounded">
<img src="" class="img-circle">
<img src="" class="img-thumbnail">


The result is as follows:

Bootstrap Pictures

the class of slt;;

The following classes can be used in any picture.

Class Describe Instance
.img-rounded Add fillets to pictures (IE8 does not support) Give it a try
.img-circle Turn a picture into a circle (IE8 does not support) Give it a try
.img-thumbnail Thumbnail functionality Give it a try
.img-responsive Picture responsiveness (extends well to parent elements) Give it a try

Responsive picture

Let the picture support responsive design by adding the .img-responsive class to the hashtag. The picture extends well to the parent element.

.img-responsive class max-width: 100%; A nd height: auto; Styles are applied to pictures:

< img src= "cinqueterre.jpg" class= "img-responsive" alt= "Cinque Terre" >

Try it out . . .

Tip: By using Bootstrap's picture response class.img-responsive, you can make the picture fit on your phone!