Example 1
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Image Styling</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom style to add spacing between images */
img{
margin-right: 20px;
}
</style>
</head>
<body>
<div class="m-4">
<img src="/examples/images/avatar.svg" class="rounded" alt="Rounded Image">
<img src="/examples/images/avatar.svg" class="rounded-circle" alt="Circular Image">
<img src="/examples/images/avatar.svg" class="img-thumbnail" alt="Thumbnail Image">
</div>
</body>
</html>Making responsive images with Bootstrap
Example 2
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Responsive Images</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom CSS to beautify this example */
.box{
width: 400px;
border: 5px solid #000;
}
</style>
</head>
<body>
<div class="m-4">
<h2>Non-Responsive Image</h2>
<div class="box">
<img src="/examples/images/sky.jpg" alt="Cloudy Sky">
</div>
<hr>
<h2>Responsive Image</h2>
<div class="box">
<img src="/examples/images/sky.jpg" class="img-fluid" alt="Cloudy Sky">
</div>
</div>
</body>
</html>Making responsive videos with Bootstrap
Example 3
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Responsive Videos</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<div class="alert alert-info alert-dismissible fade show">
<strong>Note!</strong> Open the output in a new blank tab (click the arrow button next to "Show Output") and resize the browser window to see how responsive videos work.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<h2 class="mt-4">Video with 21:9 aspect ratio</h2>
<div class="ratio ratio-21x9">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<h2 class="mt-4">Video with 16:9 aspect ratio</h2>
<div class="ratio ratio-16x9">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<h2 class="mt-4">Video with 4:3 aspect ratio</h2>
<div class="ratio ratio-4x3">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
<h2 class="mt-4">Video with 1:1 aspect ratio</h2>
<div class="ratio ratio-1x1">
<iframe src="//www.youtube.com/embed/YE7VzlLtp-4" title="YouTube video" allowfullscreen></iframe>
</div>
</div>
</body>
</html>Horizontal alignment of images with Bootstrap
Example 4
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Image Alignment</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Custom CSS to beautify this example */
.box{
padding: 15px;
border: 4px solid #666;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="m-4">
<h4>Left alignment (This is default)</h4>
<div class="box">
<img src="/examples/images/avatar.svg" alt="Sample Image">
</div>
<h4>Center alignment using text alignment classes</h4>
<div class="box text-center">
<img src="/examples/images/avatar.svg" alt="Sample Image">
</div>
<h4>Right alignment using text alignment classes</h4>
<div class="box text-end">
<img src="/examples/images/avatar.svg" alt="Sample Image">
</div>
<h4>Horizontal alignment using float classes</h4>
<div class="box clearfix">
<img src="/examples/images/avatar.svg" class="float-start" alt="Sample Image">
<img src="/examples/images/avatar.svg" class="float-end" alt="Sample Image">
</div>
<h4>Center alignment of block-level image using auto margin</h4>
<div class="box">
<img src="/examples/images/avatar.svg" class="d-block mx-auto" alt="Sample Image">
</div>
</div>
</body>
</html>Creating media objects with Bootstrap
Example 5
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Media Objects</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="/examples/images/avatar.svg" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
</div>
</div>
</body>
</html>Creating rounded media objects with Bootstrap
Example 6
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Rounded Media Objects</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="/examples/images/avatar.svg" class="rounded-circle" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
</div>
<hr>
<div class="d-flex">
<div class="flex-shrink-0">
<img src="/examples/images/avatar.svg" class="rounded" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
</div>
</div>
</body>
</html>Creating nested media objects with Bootstrap
Example 7
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Nested Media Objects</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="/examples/images/avatar.svg" class="rounded-circle" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
<!-- Nested media object -->
<div class="d-flex mt-4">
<div class="flex-shrink-0">
<img src="/examples/images/avatar.svg" class="rounded-circle" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Clark Kent <small class="text-muted"><i>Posted on January 12, 2021</i></small></h5>
<p>Thanks, you found this component useful. Don't forget to check out other Bootstrap components as well. They're also very useful.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Horizontal alignment of media objects in Bootstrap
example 8
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horizontal Alignment of Bootstrap Media Objects</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<div class="d-flex">
<div class="flex-grow-1 me-3">
<h5>Jhon Carter <small class="text-muted"><i>Posted on January 10, 2021</i></small></h5>
<p>Excellent feature! I love it. One day I'm definitely going to put this Bootstrap component into use and I'll let you know once I do.</p>
</div>
<div class="flex-shrink-0">
<img src="/examples/images/avatar.svg" width="80" height="80" alt="Sample Image">
</div>
</div>
</div>
</body>
</html>Vertical alignment of media objects in Bootstrap
Example 9
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vertical Alignment of Bootstrap Media Objects</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<!--Top aligned media-->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="/examples/images/avatar.svg" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Top aligned media <small class="text-muted"><i>This is Default</i></small></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p>
<p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</div>
<hr>
<!--Middle aligned media-->
<div class="d-flex">
<div class="flex-shrink-0 align-self-center">
<img src="/examples/images/avatar.svg" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Middle Aligned Media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p>
<p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</div>
<hr>
<!--Bottom aligned media-->
<div class="d-flex">
<div class="flex-shrink-0 align-self-end">
<img src="/examples/images/avatar.svg" width="80" height="80" alt="Sample Image">
</div>
<div class="flex-grow-1 ms-3">
<h5>Bottom Aligned Media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis.</p>
<p>Amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
</div>
</div>
</div>
</body>
</html>