Home  >  Article  >  Web Front-end  >  How to achieve rounded corners in bootstrap

How to achieve rounded corners in bootstrap

(*-*)浩
(*-*)浩Original
2019-07-11 09:58:254216browse

Bootstrap provides four styles for the <img alt="How to achieve rounded corners in bootstrap" > class, which are:

How to achieve rounded corners in bootstrap

# #.img-rounded: rounded corners (not supported by IE8), add border-radius:6px to obtain image rounded corners; (recommended learning: Bootstrap video tutorial)

. img-circle: circular (not supported by IE8), add border-radius:50% to make the entire image circular.

.img-thumbnail: Thumbnail function, add some padding and a gray border.

.img-responsive: Image responsive (will scale well to parent elements).

Use:

Add the class style directly to the class:

<img  alt="How to achieve rounded corners in bootstrap" >
The effect is as follows:

How to achieve rounded corners in bootstrap##You can see the effects obtained by using various styles from the picture. It is very simple and convenient to process the picture.

For more technical articles related to Bootstrap, please visit the

Bootstrap Tutorial

column to learn!

The above is the detailed content of How to achieve rounded corners in bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn