Bootstrap supports for images. There are three classes in Bootstrap that can be used to apply some simple style to the images.
The following classes add style to the images:
| Classes | Uses |
|---|---|
| .img-rounded | It adds border-radius:6px to give the image rounded corners. |
| .img-circle | It makes the entire image round by adding border-radius:500px. |
| .img-thumbnail | It adds a bit of padding and a gray border. |
Bootstrap Image-rounded Example
The class .img-rounded is used to add rounded corners to an image ( IE8 does not support rounded corners).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
<img src="abc.jpg" class="img-rounded" alt="abc" width="300" height="250">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>Bootstrap Image-circle Example
The class .img-circle is used to shape the image to a circle (IE8 does not support rounded corners).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Circle</h2>
<img src="abc.jpg" class="img-circle" alt="abc" width="300" height="250">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>Bootstrap Thumbnail Image Example
The class .img-thumbnail is used to shape an image to a thumbnail.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Thumbnail</h2>
<img src="abc.jpg" class="img-thumbnail" alt="abc" width="300" height="250">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html> Bootstrap Responsive images
The responsive images can adjust themselves automatically to fit the size of screen. You can create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Responsive Image</h2>
<img class="img-responsive" src="abc.jpg" alt="abc" width="460" height="345">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html> Bootstrap Responsive Videos / Embeds
In Bootstrap, you can also add videos and scale them properly on any devices. The class .embed-responsive-item is used to create a responsive video. Class can be applied directly to <iframe>, <embed>, <video>, and <object> elements.
Let’s take an example:
In the following example, we add .embed-responsive-item class to an <iframe> tag to make the video responsive. It can scale the video nicely according to the parent element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Responsive Embed</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html> Bootstrap4 Images
Aligning images are used to float an image to the right with the .float-right class or to the left with .float-left.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Aligning images Example</h2>
<p>Use the float classes to float the image to the left or to the right:</p>
<img src="good-morning.jpg" class="float-left" alt="abc" width="300" height="250">
<img src="good-morning.jpg" class="float-right" alt="abc" width="300" height="250">
</div>
</body>
</html>
Leave a Reply