Block Description
The BS > Container Block is the most important tool in the BlockStrap Page Builder Blocks plugin for designing templates and layouts for your WordPress website.
It enables you to create responsive and organized layout sections using Bootstrap containers, which automatically adjust the width and alignment of the content inside them.
Block Features
The BS > Container Block offers the following features:
- Choose from 17 Bootstrap container types to suit your design needs
- Customize background, typography, wrapper styles, and hover animations
- Set visibility conditions for the block and apply additional CSS classes
- Use HTML anchors for linking directly to specific sections on your page
Block Options
Content
Styles
Advanced
Description of each of the 17 Bootstrap container options:
- container (default): This is the default responsive fixed-width container. It has a max-width that changes at different breakpoints, adapting to the screen size.
- container-sm: A responsive fixed-width container for small (sm) screens or above. It adapts to screen size, starting at 576px.
- container-md: A responsive fixed-width container for medium (md) screens or above. It adapts to screen size, starting at 768px.
- container-lg: A responsive fixed-width container for large (lg) screens or above. It adapts to screen size, starting at 992px.
- container-xl: A responsive fixed-width container for extra-large (xl) screens or above. It adapts to screen size, starting at 1200px.
- container-xxl: A responsive fixed-width container for extra-extra-large (xxl) screens or above. It adapts to screen size, starting at 1400px.
- container-fluid: A full-width container that spans the entire width of the viewport. It’s responsive, and its width adjusts automatically to the screen size.
- row: Used to create a horizontal group of columns. The row class works together with col classes to create a responsive grid system for layouts.
- col: A column class used for defining the width and layout of a grid system. It works in conjunction with the row class and is used inside rows to create responsive columns.
- card: A flexible content container that comes with options for headers, footers, and various other elements. It’s used for displaying content in an organized and visually appealing manner.
- card-header: A class used to create a header for the card component, usually containing a title or label.
- card-img-top: A class for adding an image to the top of the card. It ensures the image resizes and fits properly within the card.
- card-body: A container for the main content of the card. It can hold text, images, and other elements.
- card-footer: A class used to create a footer for the card component, typically containing actions or supplementary information.
- list-group: A class used to create a list of items with optional contextual styles, badges, and custom content. It’s useful for displaying a series of related content in a list format.
- list-group-item: A class used for individual items within a list-group component. It can have optional contextual styles and badges.
- no container class: This option doesn’t apply any container class to the element, allowing you to create custom styles or use it without any Bootstrap-specific container rules.