Utilize prebuilt Bootstrap block patterns to quickly wireframe, design, and structure your content.
Contents
How it works
Thanks to editor-styles, it is possible to replicate the frontend view in the backend and create patterns using the block’s advanced tab:
For example, change the alert-info class to alert-success to display a green alert. More complex patterns such as grids, cards and heroes are built using nested group-blocks.
The patterns are named to three different categories:
l – Layout patterns like container and grids. Layout patterns use the <div> tag.
c – Component patterns that can be added directly to the content if the content is wrapped in a container. Component patterns use the <div> tag.
s – Full-width section patterns that include a container inside. Section patterns use the <section> tag and should be used on the page-blank template.
hide-wp-block-classes
Patterns are built using the Group block and WordPress adds classes (and sometimes styles to them), such as is-layout-flow, wp-block-group-is-layout-flow, is-layout-constrained, -is-layout-constrained, wp-block-heading, etc., to the blocks.
Adding the class hide-wp-block-classes to a parent wrapper will remove all these additional classes and will also apply to child elements, resulting in a clean HTML output.
Note that these classes are only removed in the frontend. There may be some minor styling inconsistencies in the block editor (backend).
Inspect both of the following patterns to see the difference in HTML output:
Without
hide-wb-block-classes class.
With
hide-wb-block-classes class.
Usage
To select a pattern in the post/page edit screen, click the + button on the top left > Patterns > Bootscore, and choose a pattern.
Patterns
Layout
Container
Wrap content in a container on page-blank template.
This is a container
Grid
Grid examples are built with group-blocks rows, and nested columns. Change the col classes in the group block’s Advanced tab, delete the placeholder, and fill it with your content.
3/3/3/3
col-md-6 col-lg-3
col-md-6 col-lg-3
col-md-6 col-lg-3
col-md-6 col-lg-3
6/6
col-lg-6
col-lg-6
4/8
col-lg-4
col-lg-8
8/4
col-lg-8
col-lg-4
Alerts
Alert examples that simply use classes in the block’s Advanced tab. You may want to take a look at our alert-icon classes to modify alerts in more detail.
A dismissing danger alert with an icon and a link.
The accordion patterns are included in the bs Grid plugin.
This is the first item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
Accordion flush
This is the first item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
Tabs
The tabs pattern is included in the bs Grid plugin.
This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
Sections
Use prebuilt full-width sections with the page-blank template to quickly create landing pages with the components above.
Section with heading
Section with heading
This is a section with heading and subtitle wrapped in a container. Use it on the page-blank template.
Some content inside the container.
Section with jumbotron
Section jumbotron
This is a section with a simple centered jumbotron pattern wrapped in a container. Use it on the page-blank template.
