Bootstrap grids are useful tools for displaying information correctly. Grids arrange information into columns with adjustable widths, but do not provide a clear structure like a table.
How to Create a Bootstrap Grid
- Create a page or edit an existing one.
- Add any content that has the Editor Toolbar (Text, Accordion, Cards, Text with Background, Text on Media) and select Insert Bootstrap Grid.
- Select the desired number of columns > Next
- Select the desired width of each column (example at right)
- None and Auto will cause the column width to adapt to the length of text. If the text inside a column exceeds one line in length, the column will be pushed to the next line.
- Selecting breakpoints based on percentage creates columns with a static width. If the text inside a column exceeds online in length, the text will wrap to fit the designated column size. Breakpoint options vary based on the number of columns selected.
To add different settings for the bootstrap grid on mobile devices compared to desktop
- Insert a bootstrap grid or edit an existing one
- Select the number of columns for the grid
- use the extra small category for mobile settings, and small for desktop settings
Full width (100%) is usually the best option for mobile settings.
By right-clicking on your grid, you can resize column width, but you will not be able to change the number of columns. There are two methods of editing a grid.
- Method 1: Right click on your grid and select Edit Grid.
- Method 2: Click inside your grid and click on Insert Bootstrap Grid in the Editor Toolbar.
- Aligning text, media, or block items
- Organizing paragraphs or lists into columns
- Once the grid is created, the number of columns cannot be changed
This sample grid has 4 columns of equal size and demonstrates how different elements are resized to fit the Bootstrap Grid.
Column 1 content
This is a column with text and a page view.
Column 2 content
This is column with text and a photo.
Column 3 content
This is a column with just text.
Text in columns is constrained to fit the column width and will adjust if the column width is changed