Layout WordPress Block Options
Providing advanced layout options using the Bootstrap twelve column grid.
Using a grid is a graphic design print technique used to neatly arrange content on a page. Features include:
- Nest any other blocks inside your columns
- Add background images or colours
- Responsive options for different screen sizes (Eg Mobile or desktop)
- Create & add columns or rows within each section
- Easily delete, duplicate and re-order columns or rows
A ‘layout section’ comprises of a section and rows of columns
Page content is then divided inside of these columns
Use multiple rows inside each layout section
Use up to twelve columns per row
Vary column widths inside a row
Offset columns from the left
Column content positioning options
You can position the content of columns in various ways to suit the page you are building.
Align column content (Not full width content)
Align content start
Align content center
Align content end
Justify column content (Not full width column content)
Justify content start
Justify content center
Justify content end
Combined alignment & justification example (Not full width content)
Align start. justify content start
Align center, justify center
Align end, justify end
Full width column content
Column content is full width
Column content is not full width
Nesting rows inside columns
Column one
Nested row & columns
Nested row & columns
Column two
Nested row & columns
Nested row & columns
Nested row & columns
Make content layouts using Bootstrap’s twelve column responsive grid system
col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-12
col-12
col-12
col-12
col-12
col-12
col-12
col-12
col-12
col-12
col-12
col-12