Building Dynamic Bootstrap Grids in Drupal Using Views

In the previous parts, we explored how to set up content types, configure fields, and structure your layout. Now, it’s time to bring your site design to life with a responsive Bootstrap grid powered by Drupal Views — and enhance it further by displaying related content dynamically.

Whether you’re creating a blog, portfolio, or product listing, this guide will help you structure and style your content with a professional, mobile-friendly layout.

What You’ll Learn in This Tutorial

In this post, we’ll cover:

• How to create a responsive Bootstrap grid layout using Drupal Views.

• How to filter and display related content automatically.

• How to customize your grid layout with CSS classes and Bootstrap columns.

• Tips for maintaining a clean, scalable structure for future site growth.

Step 1: Set Up a New View

1. Navigate to Structure → Views → Add new view.

2. Give your view a name, such as "Articles Grid" or "Portfolio Grid".

3. Choose the content type you want to display (e.g., Article or Product).

4. Set the display format to Grid and choose Bootstrap Grid (if your theme supports Bootstrap).

5. Click Save and Edit to customize your view.

Step 2: Configure Bootstrap Grid Settings

Once your view is created:

1. Under Format, click Settings.

2. Select the number of columns (e.g., 3 for desktops, 2 for tablets, 1 for mobile).

3. Add responsive classes such as:

    

   col-md-4 col-sm-6 col-xs-12

4. Enable “Use custom CSS classes” to add styling flexibility.

✅ Pro Tip: Make sure your theme includes Bootstrap CSS. If not, add it manually or use the Bootstrap Barrio theme for full integration.

Step 3: Add Fields to Your Grid

Now, choose which fields to display in each grid item:

• Image field – for the featured image or thumbnail.

• Title field – clickable link to the content.

• Body summary – a short description.

• Category / Tags – for classification or filtering.

You can reorder fields or wrap them inside custom HTML to match your layout design.

Example field markup (in Rewrite results → Custom text):

<div class="card">
  <div class="card-img">
    [field_image]
  </div>
  <div class="card-body">
    <h3>[title]</h3>
    <p>[body]</p>
  </div>
</div>

Step 4: Display Related Content

To make your grid more dynamic, you can display related content automatically — for example, showing posts from the same category or tag.

Option 1: Use Contextual Filters

1. In the view settings, go to Advanced → Contextual Filters → Add.

2. Select the taxonomy term (e.g., Category: Term ID).

3. Set the filter to use the term ID from the URL.

4. Configure the fallback option to show all content if no term is provided.

This method ensures that when you visit a category page, the grid shows only related articles in that category.

Option 2: Use Relationships

If your content type references another entity (like “Author” or “Product Type”), you can add a relationship in Views:

1. Under Advanced → Relationships → Add, select your reference field.

2. Use the relationship to pull in related items from that field.

This helps you display content that shares the same author, category, or reference.

Step 5: Style the Grid with CSS

Now that your grid is working, refine its look with CSS. Example styling:

.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 30px;
  transition: transform 0.3s;
}
.card:hover {
  transform: translateY(-5px);
}
.card-img img {
  width: 100%;
  border-radius: 8px 8px 0 0;
}
.card-body {
  padding: 15px;
  background: #fff;
}

This will give your grid a modern, card-based design consistent with Bootstrap UI aesthetics.

Step 6: Test Responsiveness

Check your layout on multiple devices:

• Desktop: 3–4 columns

• Tablet: 2 columns

• Mobile: 1 column

Adjust grid settings or CSS breakpoints as needed. You can preview using Chrome DevTools or Drupal’s responsive preview.

Bonus Tip: Use Blocks or Page Displays

You can create:

• A Block view to insert the grid in your sidebar or homepage.

• A Page view with a dedicated path like /portfolio-grid or /articles-grid.

This gives you full flexibility to reuse your grid design across different pages.

Final Thoughts

By combining Drupal Views with Bootstrap grids, you can design powerful, responsive layouts that make your content look structured and professional.

Adding related content enhances user engagement, keeps visitors exploring your site, and improves SEO through better internal linking.

This approach blends visual consistency with data-driven automation, perfect for modern Drupal websites

✅ Quick Summary