BS > Container
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 #
- TYPE (dropdown): Select one of the 17 Bootstrap container types to set the container’s layout and responsiveness.
- The options are: container (default), container-sm, container-md, container-lg, container-xl, container-xxl, container-fluid, row, col, card, card-header, card-img-top, card-body, card-footer, list-group, list-group-item, no container class. A detailed description of all containers is provided below.
- BACKGROUND COLOR (dropdown): Choose a background color from the theme color palette.
- Fixed background (checkbox): Enable or disable a fixed background for the container.
- Use featured image (checkbox): Select to use the featured image as the container background.
- Upload Image (file upload): Upload a custom background image for the container.
- TEXT COLOR (dropdown): Select a text color from the theme color palette.
- Text justify (checkbox): Enable or disable text justification within the container.
- TEXT ALIGN (dropdown): Choose the text alignment within the container (left, center, right, or justify).
- Wrapper Styles
- Margins: Adjust the margin values for the top, right, bottom, and left sides of the container.
- Padding: Modify the padding values for the top, right, bottom, and left sides of the container.
- BORDER COLOR (dropdown): Select a border color from the theme color palette.
- SHADOW (dropdown): Choose a shadow style for the container.
- POSITION (dropdown): Set the positioning method for the container (static, relative, absolute, fixed, or sticky).
- DISPLAY (dropdown): Define the display style for the container (block, inline, inline-block, flex, inline-flex, grid, or inline-grid).
- OVERFLOW (dropdown): Control the overflow behavior for the container (visible, hidden, scroll, or auto).
- MAX HEIGHT (input field): Set a maximum height for the container.
- SCROLLBARS (dropdown): Choose the scrollbar style for the container (thin, auto, or none).
- Hover Animations
- HOVER ANIMATIONS (multiselect): Choose hover animations from the following options: none, Zoom, Shadow, Move up, Move down, Move left, or Move right.
- Visibility Conditions
- BLOCK VISIBILITY (modal): Set the conditions under which the container block should be visible.
- HTML ANCHOR (input field): Enter a unique word or two, without spaces, to create a unique web address for this block, called an “anchor.” This allows you to link directly to this section of your page.
- ADDITIONAL CSS CLASS(ES) (input field): Apply custom CSS classes to the container block for further customization. Enter one or more class names, separated by spaces, in the input field. These custom classes can be used to target the block with additional CSS rules defined in your theme or custom CSS file.
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.