How to Create a Blog Design Layout in Bootstrap: Step-by-Step Guide

By /
bootstrap blog structure

Bootstrap is your best friend if you’re looking to create a responsive blog layout like this one. Using Bootstrap’s grid system, this step-by-step guide will help you design a blog layout that includes a large blog thumbnail on the left and smaller thumbnails on the right. We’ll cover everything, from understanding rows, columns, and containers to breaking down the layout’s code. Let’s dive in!

What Are Rows, Columns, and Containers in Bootstrap?

Before we get to the code, it’s important to understand the building blocks of Bootstrap’s layout system.

1. Container

A container is the outermost wrapper that holds your content and ensures proper alignment. It provides horizontal padding and helps center your content. Bootstrap offers two types of containers:

  • .container: A fixed-width container that adjusts based on the screen size.
  • .container-fluid: A full-width container that spans the entire screen.

2. Row

Rows are horizontal wrappers that house your columns. You always place columns inside a row to ensure proper alignment and spacing. Rows manage the horizontal spacing between columns using the grid system.

3. Column

Columns divide the screen into 12 equal parts. You can use classes like .col-, .col-md-, and .col-lg- to allocate space to each column depending on the screen size. For example:

  • .col-md-6: Allocates 6 out of 12 grid spaces (50% width) on medium-sized screens and above.

4. Nested Rows

Sometimes, you need a more complex layout within a column. In such cases, you can create nested rows by placing a new row inside an existing column.

Overview of the Blog Layout

The layout consists of:

  1. A large blog thumbnail on the left with a title and metadata (author and date).
  2. Four smaller thumbnails arranged in two rows on the right.

We will create this layout using Bootstrap’s grid system.

Step-by-Step Implementation

1. Setting Up the Outer Row

The first step is to create a row that holds two main columns:

  • Left Column: Contains the large thumbnail.
  • Right Column: Contains the smaller thumbnails.

Here’s the HTML structure:

bootstrap layout
<div class="row g-4">
  <!-- Left Part (Large Thumbnail) -->
  <div class="col-md-6">
    ...
  </div>

  <!-- Right Part (Smaller Thumbnails) -->
  <div class="col-md-6">
    ...
  </div>
</div>

2. Left Part (Large Thumbnail)

The left column occupies half the width of the screen and includes:

  • A large blog thumbnail placeholder.
  • Title and metadata (author and date).

Here’s the code:

<div class="col-md-6">
  <div class="blog-thumbnail large-thumbnail">
    <!-- Placeholder for the large thumbnail -->
  </div>
  <p class="blog-title">Large Blog Post Title</p>
  <p class="blog-meta">Author | Date</p>
</div>

Explanation:

  • col-md-6: This column takes 50% of the row’s width on medium screens and above.
  • blog-thumbnail large-thumbnail: A reusable class to style the thumbnail, with additional styling for the large thumbnail (300px height).
  • Blog Title and Metadata: These are simple <p> tags styled with custom CSS.

3. Right Part (Smaller Thumbnails)

The right column also takes 50% of the row’s width. It contains a nested row with four smaller thumbnails, each occupying half the width of the nested row.

Here’s the code:

bootstrap layout
<div class="col-md-6">
  <div class="row g-4">
    <!-- Individual small thumbnails -->
    <div class="col-md-6">
      <div class="blog-thumbnail"></div>
      <p class="blog-title">Small Blog Post Title</p>
      <p class="blog-meta">Author | Date</p>
    </div>
    <div class="col-md-6">
      <div class="blog-thumbnail"></div>
      <p class="blog-title">Small Blog Post Title</p>
      <p class="blog-meta">Author | Date</p>
    </div>
    <div class="col-md-6">
      <div class="blog-thumbnail"></div>
      <p class="blog-title">Small Blog Post Title</p>
      <p class="blog-meta">Author | Date</p>
    </div>
    <div class="col-md-6">
      <div class="blog-thumbnail"></div>
      <p class="blog-title">Small Blog Post Title</p>
      <p class="blog-meta">Author | Date</p>
    </div>
  </div>
</div>

Explanation:

  • Nested Row: The row g-4 Inside the column, a grid for the smaller thumbnails is created.
  • Columns for Thumbnails:
    • Each small thumbnail is placed inside a, meaning each thumbnail takes up half the width of the nested row.
    • Four thumbnails are arranged into two rows automatically.

Full HTML Code

Here’s the complete HTML code for the layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Blog Layout</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Custom Styling */
    .blog-thumbnail {
      background-color: #f4f4f4;
      height: 150px;
    }
    .large-thumbnail {
      height: 300px;
    }
    .blog-title {
      font-size: 14px;
      font-weight: bold;
      margin: 10px 0;
    }
    .blog-meta {
      font-size: 12px;
      color: #777;
    }
  </style>
</head>
<body>
  <div class="container my-5">
    <div class="row g-4">
      <!-- Left Column -->
      <div class="col-md-6">
        <div class="blog-thumbnail large-thumbnail"></div>
        <p class="blog-title">Large Blog Post Title</p>
        <p class="blog-meta">Author | Date</p>
      </div>
      <!-- Right Column -->
      <div class="col-md-6">
        <div class="row g-4">
          <div class="col-md-6">
            <div class="blog-thumbnail"></div>
            <p class="blog-title">Small Blog Post Title</p>
            <p class="blog-meta">Author | Date</p>
          </div>
          <div class="col-md-6">
            <div class="blog-thumbnail"></div>
            <p class="blog-title">Small Blog Post Title</p>
            <p class="blog-meta">Author | Date</p>
          </div>
          <div class="col-md-6">
            <div class="blog-thumbnail"></div>
            <p class="blog-title">Small Blog Post Title</p>
            <p class="blog-meta">Author | Date</p>
          </div>
          <div class="col-md-6">
            <div class="blog-thumbnail"></div>
            <p class="blog-title">Small Blog Post Title</p>
            <p class="blog-meta">Author | Date</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Conclusion

This blog layout is fully responsive, thanks to Bootstrap’s grid system. The left side features a large blog thumbnail, while the right side showcases smaller thumbnails in a nested row. You can customize it further with images, hover effects, or animations to make it more engaging.

Scroll to Top