Bootstrap Images
Bootstrap Tutorial » Bootstrap Images
Using the Bootstrap built-in classes you can easily style images such as: round cornered, circular images and thumbnails.
Bootstrap image
- .img-rounded
- .img-circle
- .img-thumbnail
Following example shows the code for the different images styles:
Rounded Corners, Circle and Thumbnail Styles
Bootstrap Image Shapes
.img-rounded class adds rounded corners to an image,
.img-circle class shapes the image to a circle,
.img-thumbnail class shapes the image to a thumbnail
This example will create Bootstrap image style:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Image Shape: Rounded Corners, Circle and Thumbnail Styles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body><div class="container">
<h2>Rounded Corners</h2>
<p>The .img-rounded class adds rounded corners to an image</p>
<img src="https://www.colibritour.ro/uploads/images/hotel-nice-t1.jpeg" class="img-rounded" alt="Cinque Terre" width="310" height="240">
<h2>Circle</h2>
<p>The .img-circle class shapes the image to a circle</p>
<img src="https://www.colibritour.ro/uploads/images/hotel-nice-t1.jpeg" class="img-circle" alt="Cinque Terre" width="310" height="240">
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src="https://www.colibritour.ro/uploads/images/hotel-nice-t1.jpeg" class="img-thumbnail" alt="Cinque Terre" width="250" height="180">
</div></body>
</html>
Responsive Images - example
Create responsive images by adding an .img-responsive class to the <img> tag.
The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Images - example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body><div class="container">
<h2>Responsive Images - example</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element</p>
<img class="img-responsive" src="https://www.colibritour.ro/uploads/images/hotel-nice-t1.jpeg" alt="Chania" width="440" height="335">
</div></body>
</html>
Bootstrap Images gallery, responsive, size, list, round, rounded, carousel, same size, bootstrap images to left and right with text and heading
Bootstrap Images gallery, responsive, size, list, round, rounded, carousel, same size, bootstrap images to left and right with text and heading
Bootstrap Images - bootstrap
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.