English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 Image Shape

Images are very common in modern web design. Therefore, styling images and placing them correctly on the web page is very important for improving user experience.

Using Bootstrap's built-in classes, you can easily set the style of images, such as creating rounded or circular images, or giving them effects similar to thumbnails.

Rounded images

.rounded class can make images display rounded corners:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Rounded images</h2>
　　<p>.rounded class can make images display rounded corners:</p>　　　　　　　　　　　　
　　<img src="https://www.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>
Test to See ‹/›

Elliptical images

.rounded-circle class can set elliptical images:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Elliptical images</h2>
　　<p>.rounded-circle class can set elliptical images:</p>　　　　　　　　　　　　
　　<img src="https://www.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">　
</div>
</body>
</html>
Test to See ‹/›

Thumbnail

.img-thumbnail class is used to set image thumbnails (images have borders):

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Thumbnail</h2>
　　<p>.img-thumbnail class is used to set image thumbnails (images have borders):</p>　　　　　　　　　　　　
　　<img src="https://www.oldtoolbag.com/run/images/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
</div>
</body>
</html>
Test to See ‹/›

Image alignment method

Using .float-right class to set image right alignment, using .float-left class sets image left alignment:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Image alignment method</h2>
　　<p>Using .float-right class to set image right alignment, using .float-left class sets image left alignment:</p>
　　<img src="https://www.oldtoolbag.com/run/images/paris.jpg" class="float-left">　
　　<img src="https://www.oldtoolbag.com/run/images/cinqueterre.jpg" class="float-right">
</div>
</body>
</html>
Test to See ‹/›

Responsive Images

Images come in various sizes, and we need to adapt automatically to the screen size.

We can add .img-fluid class to set responsive images.

.img-fluid class sets max-width: 100%; , height: auto; :

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Responsive Images</h2>
　　<p>.img-fluid class can set responsive images, resize the browser to see the effect:</p>
　　<img src="https://www.oldtoolbag.com/run/images/paris.jpg" class="img-fluid">
</div>
</body>
</html>
Test to See ‹/›
Bootstrap4 JumbotronBootstrap4 Table