Views Bootstrap
Provides Bootstrap 5 component styles for Drupal Views, allowing view results to be displayed as accordions, cards, carousels, grids, tabs, tables, and other Bootstrap UI components.
views_bootstrap
Install
composer require 'drupal/views_bootstrap:^5.3'
Overview
The Views Bootstrap module integrates Bootstrap 5 components with Drupal Views, enabling site builders to output view results using common Bootstrap UI patterns without writing custom code. This module extends Views with additional style plugins that render content using Bootstrap's CSS framework components.
Instead of displaying view results as simple lists or tables, this module allows you to present content as interactive accordions, responsive card layouts, image carousels/slideshows, dropdown menus, responsive grids, list groups, media objects with images and text, tabbed interfaces, and styled tables with Bootstrap's table classes.
Each style plugin provides a configuration form within the Views UI where you can map view fields to component parts (such as card titles, carousel images, accordion headers) and customize component behavior (animation effects, responsive breakpoints, styling options). The module generates proper Bootstrap 5 markup with appropriate CSS classes and data attributes for JavaScript functionality.
The module supports Bootstrap 5's responsive breakpoint system (xs, sm, md, lg, xl, xxl) for grid layouts, provides accessibility features through proper ARIA attributes, and includes XSS protection for user-generated content.
Features
- Bootstrap Accordion style plugin - Displays view results as collapsible accordion panels with configurable open/closed states, flush borders option, and support for grouping content by field values
- Bootstrap Cards style plugin - Renders content in Bootstrap card components with optional images, titles, and body content, supporting both card-group and grid-based layouts with configurable columns per row
- Bootstrap Carousel style plugin - Creates image slideshows with navigation controls, indicators, autoplay options, fade/slide effects, pause on hover, multi-column support, and responsive captions
- Bootstrap Dropdown style plugin - Displays view results in a dropdown menu with customizable button text, button style (primary, secondary, success, warning, danger, etc.), and proper ARIA menu roles
- Bootstrap Grid style plugin - Outputs content in Bootstrap's responsive grid system with per-breakpoint column width configuration (xs through xxl), supporting equal widths, auto-fit, or specific column counts
- Bootstrap List Group style plugin - Renders content as a Bootstrap list group with optional item titles and custom CSS classes
- Bootstrap Media Object style plugin - Displays content with an image alongside heading and body text, with configurable image placement (left/right) and vertical alignment (top/middle/bottom)
- Bootstrap Tabs style plugin - Creates tabbed interfaces with tabs or pills navigation, multiple position options (top, left, right, bottom, justified, stacked), fade effects, and support for grouping content into tabs
- Bootstrap Table style plugin - Extends the core Views table with Bootstrap table classes including responsive wrapper, bordered/borderless, condensed, hover, and striped row styles
- Theme suggestions system for per-view and per-display template overrides (e.g., views_bootstrap_accordion__my_view__block_1.html.twig)
- Automatic migration from older module versions including thumbnail-to-cards and panel-to-cards conversions
Use Cases
Image Gallery with Carousel
Create an image gallery view displaying content images as a Bootstrap carousel. Configure the view to use the Bootstrap Carousel style, map the image field to the carousel image, optionally add title and description captions. Enable navigation controls and indicators for user interaction. Set autoplay interval or disable autoplay for manual navigation.
Team Members in Card Layout
Display team member profiles as Bootstrap cards in a responsive grid. Create a view of user or team content, select Bootstrap Cards style, map profile photo to card image, name to card title, and bio to card content. Set columns to 3 or 4 for a grid layout that stacks on mobile.
FAQ Section with Accordion
Build an FAQ page using the accordion style. Create a view of FAQ content type, select Bootstrap Accordion style, map the question field to panel title. Set behavior to 'All Items Closed' so users expand only what they need. Enable flush borders for seamless integration with page design.
Category Navigation with Tabs
Create tabbed navigation for categorized content. Use Bootstrap Tabs style with the category/taxonomy field as the tab field. Set tab_output to 'grouped' to aggregate all content under each category tab. Choose pills style and vertical left position for sidebar navigation.
Responsive Data Table
Display structured data in a sortable, responsive table. Use Bootstrap Table style with responsive enabled. Select 'Up to medium screens' for responsive_size to enable horizontal scrolling on tablets and phones. Add striped and hover styles for better readability.
News Items as Media Objects
Display news teasers with thumbnail images using media object layout. Configure Bootstrap Media Object style with featured image as image field, headline as heading, and summary as body. Set image placement to left for traditional news layout.
Product Grid with Responsive Columns
Create a product listing with responsive column widths. Use Bootstrap Grid style, configure col_sm to 2 columns (6 width), col_md to 3 columns (4 width), and col_lg to 4 columns (3 width). Products display in optimal columns at each screen size.
Action Menu Dropdown
Build a quick actions dropdown for administrative interfaces. Create a view of action links, use Bootstrap Dropdown style, set button text to 'Actions' with btn-primary style. Each view result becomes a dropdown menu item.
Tips
- Your theme must include Bootstrap 5 CSS and JavaScript - the module generates Bootstrap markup but does not include the Bootstrap library itself
- Use theme suggestions for per-view template customization: copy the base template and rename to views-bootstrap-[style]--[view-id]--[display-id].html.twig
- For accordions and tabs, the 'grouped' output mode requires setting a grouping field in Views Format settings to aggregate content
- Card layouts work best with consistent image aspect ratios - use image styles to enforce dimensions
- Enable the carousel JavaScript library automatically attached via {{ attach_library('views_bootstrap/components') }} in the carousel template
- Multi-column carousels require items divisible by column count for proper display
- The table style inherits all options from Drupal's core table style, adding Bootstrap-specific enhancements
- Custom CSS classes can be added to most components through the row_class and custom class options
Technical Details
Hooks 1
hook_theme_suggestions_HOOK_alter
Adds view-specific and display-specific template suggestions for all Views Bootstrap templates, enabling per-view template overrides
Troubleshooting 7
Ensure your theme loads Bootstrap 5 CSS and JavaScript libraries. The module generates Bootstrap markup but does not include Bootstrap itself. Check that bootstrap.bundle.min.js is loaded for interactive components like accordions, carousels, and tabs.
Bootstrap 5 requires data-bs-* attributes (not data-*). Verify you're using Bootstrap 5, not Bootstrap 4. Clear caches after updating. Check browser console for JavaScript errors.
The module's JavaScript hides controls when only one item exists. Ensure your view returns multiple results. Check that navigation and indicators options are enabled in style settings.
When not using card-group mode, cards use Bootstrap's grid system. Ensure your theme's container has proper Bootstrap grid structure. Check the columns setting matches your expectations.
Column settings inherit from smaller breakpoints. If col_sm is set but col_md is 'none', medium screens use the small setting. Set explicit values at each breakpoint where you want different behavior.
When using 'grouped' output mode, ensure your view returns all expected results (check pager settings). The grouping happens on rendered results, not at the database level.
Template suggestions follow the pattern: views_bootstrap_[style]__[view_id]__[display_id]. Ensure filename matches exactly with double underscores. Clear theme registry cache.
Security Notes 4
- The module applies XSS filtering to user-generated content in accordion and tab titles using Drupal's Xss::filter() with a limited set of allowed HTML tags
- Dropdown templates use striptags filter to prevent XSS in menu items while preserving links and images
- Custom CSS classes are sanitized using Html::cleanCssIdentifier() to prevent CSS injection
- All HTML attributes are handled through Drupal's Attribute class for proper escaping