Bootstrap - Blog Demo


Bootstrap Blog Demo

In this tutorial, you will go through the steps of setting up a Bootstrap-based blog demo:

  1. Designing the blog header
  2. Creating the blog post layout
  3. Implementing a sidebar
  4. Designing the blog footer.
  5. Making the blog responsive and mobile-friendly
  6. Adding interactivity and features
  7. Customizing the design to make it unique

By the end of this tutorial, you will know how to use Bootstrap to create a professional and engaging blog layout.

Designing the Blog Header

The blog header is the top section of your blog that appears on every page. It usually contains a navigation menu, a logo or site title, and sometimes a search bar. Bootstrap provides classes and components that make it easy to create a header.

Creating a Navigation Bar

To create a navigation bar, use the <nav> element with the .navbar class. Add the .navbar-expand-lg class to make the navbar responsive and collapse on smaller screens. Use the .navbar-light and .bg-light classes to set the color scheme.

Example: Navigation Bar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">My Blog</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>

The .navbar-brand class is used for the logo or site title. The .navbar-toggler button is displayed on smaller screens to toggle the collapsed menu. The .navbar-collapse div contains the navigation menu items.

Adding a Logo or Site Title

To add a logo or site title, use the .navbar-brand class on an <a> element inside the <nav>. You can either use text or an image for the logo.

Example: Logo or Site Title

<a class="navbar-brand" href="#">
  <img src="logo.png" alt="My Blog Logo" height="30">

Adjust the height attribute to resize the logo as needed.

Creating the Blog Post Layout

The blog post layout is the main content area where your blog posts will be displayed. Bootstrap's grid system and pre-built classes make it easy to structure and style your blog posts.

Structuring the Blog Post

Example: Using Bootstrap's grid system

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- Blog post content goes here -->
    <div class="col-md-4">
      <!-- Sidebar content goes here -->

Example: Adding blog post title and meta information

<div class="col-md-8">
  <h2>Blog Post Title</h2>
  <p class="text-muted">Posted on January 1, 2023 by John Doe</p>
  <!-- Blog post content goes here -->

Add your blog post content inside the main column, using HTML tags like <p>, <ul>, and <ol> for paragraphs and lists.

Styling the Blog Post

To style your blog post, apply Bootstrap classes for typography.

Example: Using Bootstrap typography classes

<div class="col-md-8">
  <!-- ... -->
  <p class="lead">This is an introductory paragraph.</p>
  <p>Regular paragraph text goes here.</p>
  <p class="font-weight-bold">This is bold text.</p>
  <p class="text-center">This is centered text.</p>

Customize the blog post layout with CSS by adding your own classes or overriding Bootstrap's default styles.

Example: Customizing blog post layout with CSS

  .blog-post {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;

<div class="col-md-8 blog-post">
  <!-- ... -->

To add images and media to your blog post, use the <img> tag with Bootstrap's .img-fluid class to make the image responsive.

Example: Adding responsive images to the blog post

<div class="col-md-8">
  <!-- ... -->
  <img src="blog-image.jpg" alt="Blog Post Image" class="img-fluid rounded">
  <!-- ... -->

Implementing the Sidebar

A sidebar in a blog layout often contains more content, such as recent posts, categories, or tags, which help users find and discover related content. Bootstrap makes it easy to create a sidebar and style it to match your blog's design.

Creating a Sidebar Container

To create a sidebar container, use a <div> element with Bootstrap's grid classes.

Example: Sidebar Container

<div class="col-md-4">
  <!-- Sidebar content goes here -->

Adding Sidebar Widgets

Inside the sidebar container, you can add different widgets to display relevant content. Some common sidebar widgets include:

  • Recent Posts: A list of the most recently published blog posts.
  • Categories: A list of blog post categories for easy navigation.
  • Tags: A collection of tags linked with the blog posts.

To create sidebar widgets, use HTML elements like <div>, <ul>, and <li>.

Example: Sidebar Widgets

<div class="col-md-4">
  <div class="widget">
    <h4>Recent Posts</h4>
    <ul class="list-unstyled">
      <li><a href="#">Blog Post Title 1</a></li>
      <li><a href="#">Blog Post Title 2</a></li>
      <li><a href="#">Blog Post Title 3</a></li>

The <h4> element shows the widget title, and the <ul> with the .list-unstyled class removes the default bullet points from the list.

You can create similar widgets for categories and tags.

Styling the Sidebar with Bootstrap Classes

To style the sidebar and its widgets, use Bootstrap's utility classes and custom CSS as needed.

Example: Styling the Sidebar

<div class="col-md-4">
  <div class="widget bg-light p-4 mb-4">
    <h4 class="mb-3">Categories</h4>
    <ul class="list-unstyled">
      <li><a href="#" class="text-decoration-none">Category 1</a></li>
      <li><a href="#" class="text-decoration-none">Category 2</a></li>
      <li><a href="#" class="text-decoration-none">Category 3</a></li>

The following Bootstrap classes are used for the widget:

  • .bg-light: Adds a light gray background color to the widget.
  • .p-4: Adds padding on all sides of the widget.
  • .mb-4: Adds margin at the bottom of the widget to create space between widgets.
  • .mb-3: Adds margin at the bottom of the widget title.
  • .text-decoration-none: Removes the underline from the links.

You can further change the sidebar's appearance by adding your own CSS classes or overriding Bootstrap's default styles.

Responsiveness and Mobile-Friendliness

Using Bootstrap for your blog gives you built-in responsiveness and mobile-friendliness. Bootstrap's responsive classes help your blog layout adapt to different screen sizes, providing a good user experience on desktops, tablets, and mobile devices.

Bootstrap's grid system is based on a 12-column layout that adjusts to different screen sizes. The grid classes, such as .col-md-8 and .col-md-4, define how the columns behave on medium-sized screens (tablets) and above. For smaller screens (mobile phones), you can use classes like .col-sm-* or .col-* to control the layout.

Example: Bootstrap Grid System

<div class="row">
  <div class="col-md-8 col-sm-12">
    <!-- Blog post content -->
  <div class="col-md-4 col-sm-12">
    <!-- Sidebar content -->

On medium screens and above, the blog post content will take up 8 columns (66.67% width), and the sidebar will take up 4 columns (33.33% width). On small screens, both the blog post and sidebar will take up the full width of the screen (12 columns).

Bootstrap also provides responsive utility classes for showing or hiding elements based on screen sizes.

Example: Responsive Utility Classes

<div class="d-none d-md-block">
  <!-- Content visible only on medium screens and above -->

To make sure your blog layout looks and works great on different devices, test its responsiveness. Use browser developer tools to simulate different screen sizes or test on actual devices. Look for layout issues, such as content overflowing or not adjusting properly, and fix them using Bootstrap's responsive classes or custom CSS.

Tip: Mobile-First Development

When building a responsive blog layout, start with the mobile layout first and then add styles for larger screens using media queries. This approach, known as mobile-first development, prioritizes the most important content and provides a good user experience on small screens.

By using Bootstrap's responsive classes and grid system, and testing your blog's responsiveness on various devices, you can create a mobile-friendly blog that looks great and works well on any screen size.

Adding Interactivity and Features

To make your blog more engaging and interactive, you can add features like a comments section, social sharing buttons, and search functionality using Bootstrap's components and some custom code.

Implementing a Comments Section

A comments section lets readers share their thoughts and feedback on your blog posts. To create a comments section, use Bootstrap's form components.

Example: Comments Section HTML

<div class="comments">
  <h4>Leave a Comment</h4>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name" required>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" class="form-control" id="email" required>
    <div class="form-group">
      <label for="comment">Comment</label>
      <textarea class="form-control" id="comment" rows="3" required></textarea>
    <button type="submit" class="btn btn-primary">Submit</button>

The .form-group class adds spacing between form elements, and the .form-control class styles the input fields and textarea. The required attribute makes the fields mandatory.

Tip: Handling Form Submission and Displaying Comments

To handle form submission and display comments, you'll need to use a server-side language like PHP or a third-party service like Disqus.

Adding Social Sharing Buttons

Social sharing buttons make it easy for readers to share your blog posts on their social media profiles, helping you reach a wider audience. To add social sharing buttons, use Bootstrap's button classes and social media icons.

Example: Social Sharing Buttons HTML

<div class="social-share">
  <a href="#" class="btn btn-primary"><i class="fab fa-facebook-f"></i> Share</a>
  <a href="#" class="btn btn-info"><i class="fab fa-twitter"></i> Tweet</a>
  <a href="#" class="btn btn-danger"><i class="fab fa-pinterest-p"></i> Pin</a>

The .btn class styles the buttons, and the .btn-* classes set the button colors. The Font Awesome icons add the social media logos.

Tip: Making Social Sharing Buttons Functional

To make the buttons functional, you'll need to use each social media platform's sharing API or a third-party service like AddThis or ShareThis.

Integrating a Search Functionality

A search bar lets users find specific content on your blog. To add a search bar, use Bootstrap's form components and a server-side language or a third-party search service.

Example: Search Bar HTML

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

The .form-inline class displays the form elements inline, and the .form-control class styles the search input. The .btn-outline-success class styles the search button.

Tip: Implementing Search Functionality

To implement the search functionality, you can use a server-side language to query your blog's database or a third-party search service like Google Custom Search or Algolia.

Customizing and Extending the Blog

Once you have your blog layout set up with Bootstrap, you can customize and extend it to make it unique and add more features.

Modifying the Color Scheme

Bootstrap comes with predefined theme colors that you can use to change the look of your blog. To modify the color scheme, you can:

  1. Use Bootstrap's color classes: Bootstrap provides classes like .bg-primary, .text-success, and .btn-danger that you can apply to elements to change their background color, text color, or button color.

Example: Bootstrap Color Classes

<button class="btn btn-primary">Primary Button</button>
<p class="text-success">Success Text</p>
<div class="bg-warning p-3">Warning Background</div>
  1. Override Bootstrap's default colors: You can override Bootstrap's default colors by setting new values for the color variables in your custom CSS file.

Example: Overriding Bootstrap Colors

:root {
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;

Adding Custom CSS Styles

To personalize your blog's design, you can add your own custom CSS styles. Create a separate CSS file or add a <style> block in your HTML file to write your custom styles.

Example: Custom CSS Styles

  .header {
    background-color: #f8f9fa;
    padding: 20px;

  .blog-post {
    margin-bottom: 40px;

  .blog-post img {
    max-width: 100%;
    height: auto;

Bootstrap Components and Plugins

Bootstrap offers more components and plugins that you can use to add functionality to your blog:

Component Description
Carousel Create a slideshow to showcase featured blog posts or images.
Accordion Organize your content into collapsible sections.
Tooltips Display extra information when hovering over an element.
Modals Show pop-up windows for additional content or actions.
Pagination Add navigation links for multi-page content.

To use these components, refer to the Bootstrap documentation for the HTML structure and classes, and include the required JavaScript files.

Example: Bootstrap Carousel

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="post1.jpg" class="d-block w-100" alt="Blog Post 1">
    <div class="carousel-item">
      <img src="post2.jpg" class="d-block w-100" alt="Blog Post 2">
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>