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

How to achieve rounded corners in bootstrap

(*-*)浩
Release: 2019-07-11 09:58:25
Original
4265 people have browsed it

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" >
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template