Bootstrap is a popular CSS Framework that can help you build web user interfaces faster and more efficiently. The newest version of Bootstrap 5 alpha has been released not a long time ago effectively removing jQuery as a dependecy and dropping support for IE 10 and 11.
Hey everyone from CodeMentor! In this tutorial I want to show you how you can create a simple blog post carousel using the newest version of Bootstrap. You can use this component as the featured part of a blog page.
Requirements:
- Bootstrap 5 via CDN
- Code editor
- Internet Browser
- A coder like you 😁
Step 1: Include Bootstrap 5 via CDN
First things first, you need to create a index.html file where you can include the stylesheets and scripts required. You can use the following boilerplate code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Blog Tutorial by Themesberg</title>
<!-- stylesheets go here -->
</head>
<body>
<!-- scripts go here -->
</body>
</html>
Although there are many ways to include Bootstrap 5 as a dependency, to make things faster we will include Bootstrap 5 through a CDN.
First you need to include the stylesheet before the end of the <head> tag:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
Afterwards you also need to include Popper.js and the main Bootstrap javascript file in order to make more interactable elements work such as modals, tooltips and accordions.
Add the following two files before the end of your <body> tag:
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
Awesome! Now you have successfully included Bootstrap 5 in your project. Let's get to building the first page.
Step 2: Creating the main layout
Before creating the carousel it's important to lay the foundations of the page. Let's first create the main layout after the navigation bar:
<div class="container my-5">
<div class="row d-flex justify-content-center">
<div class="col-12">
<!-- main content goes here -->
</div>
</div>
</div>
Step 3: creating the carousel component
Add the following code to create a carousel component which also includes the controls below the items:
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<!-- content of carousel goes here -->
</div>
<div class="carousel-item">
<!-- content of carousel goes here -->
</div>
<div class="carousel-item">
<!-- content of carousel goes here -->
</div>
</div>
</div>
Step 4: create a blog card
Now let's start by creating a blog item card. Here's the markup that we used for that:
<div class="card mr-3">
<img src="https://themesberg.s3.us-east-2.amazonaws.com/public/posts/bootstrap-themes-summer-sale.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">35% discount for premium Bootstrap Themes, Templates, UI Kits</h5>
<p class="card-text">We’re getting nearer to the end of summer and because we know that this period can make a serious dent in your pocket..</p>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
Step 5: responsive layout
Let's also add some wrapper classes to make it responsive for mobile devices as well:
<div class="row">
<div class="col-12 col-md-6 col-xl-3 mb-4">
<!-- example of card above goes in here -->
</div>
<div class="col-12 col-md-6 col-xl-3 mb-4">
<!-- example of card above goes in here -->
</div>
<div class="col-12 col-md-6 col-xl-3 mb-4">
<!-- example of card above goes in here -->
</div>
<div class="col-12 col-md-6 col-xl-3 mb-4">
<!-- example of card above goes in here -->
</div>
</div>
Step 6: putting it all together
Now you can add this row item containing 4 blog posts inside each .carousel-item. You can check out the this CodePen to get the whole page to see the final result.
Conclusion
Congratulations! Now you can use this carousel component for your website to showcase the best blog posts on your homepage.
If you appreciate this tutorial and like using Bootstrap CSS to build websites and web interfaces, consider checking out some of the free and premium Bootstrap themes, templates and UI Kits from Themesberg ❤️
Top comments (1)
Hello in mobile mode is awful , sorry, you don't have just one card sliding, instead you have 4 stacked cards sliding all together.
The carousel/slider is meant to save page lenght
I kindly suggest to fix that