The CKEditor Bootstrap Grid tool lets you create responsive rows and columns directly in the IWP text editor. Use it when you need to place text, images or other content side by side while keeping the layout mobile-friendly.
Use Bootstrap Grid for page layout, not tables. Tables should only be used for tabular data, such as information that belongs in rows and columns. If you are trying to position text, images or other content side by side, use the Bootstrap Grid instead.
What It Can Do
- Insert rows and columns into page content
- Control the width of each column
- Add text, images or other media inside columns
- Create layouts that adapt to different screen sizes
Tips for Using Grid Layouts
- Keep layouts simple and easy to scan
- Use the grid for layout, not to make every section of the page look different
- Keep related content together within each row
- Avoid putting too much text inside narrow columns
- Keep headings in logical order even when they appear inside grid columns
- Use images that are similar in size and proportion when displaying multiple items in a consistent layout
Common Layout Examples
The examples below show a few ways you can use the Bootstrap Grid on a page.
Image and Text
A 33:66 layout works well when you want to pair an image with a short description, featured resource or call to action.
Featured Resource
Use a short description to introduce a resource, service, program or other information you want visitors to notice.
Repeating List Layout
You can stack several grid rows to create a consistent list of resources, stories, programs or other featured content.
For each item:
- Keep the image in one column and the related text in the other
- Use a clear heading and concise description
- Include one clear link or action when needed
- Keep the structure consistent from item to item
Resource Title
Add a short description that helps visitors understand what the resource is and why it may be useful.
Resource Title
Add a short description that helps visitors understand what the resource is and why it may be useful.
How to Use the Bootstrap Grid
- Place your cursor in the text editor where you want to add the layout, then select the Bootstrap Grid icon
- Choose the number of columns you want to use, then select Next
- Choose your grid settings and column widths, then select Save
The grid settings include several options:
- Container: Controls how the grid is contained and aligned within the page
- Gutters: Control the spacing between columns
- Small, Medium and Large: Control how wide each column appears at different screen sizes
Example: If you select a breakpoint such as Small, you can choose how much of the 12-column grid each column should use.
- Click inside each column to add text, images or other media. Use the text editor toolbar to format the content as needed
- To change the layout later, select the grid and choose Edit Grid
Understanding Column Widths
Bootstrap uses a 12-column system. The widths you choose for columns should add up to 12.
- 6 + 6 creates two equal columns
- 4 + 8 creates a one-third and two-thirds layout
- 4 + 4 + 4 creates three equal columns
You can also set different column widths for different screen sizes so the layout adjusts on tablets and mobile devices.
Learn more about the Bootstrap grid system
Using Bootstrap Utility Classes
Advanced users can add Bootstrap utility classes through the grid's Advanced Settings to adjust spacing, backgrounds and borders.
Background Colors
Background utility classes begin with bg-.
Examples include bg-primary and bg-light.
Learn more about Bootstrap background utilities
Margin and Padding
Use m for margin outside an element and p for padding inside an element.
- Values range from 0–5
- mt-5 adds margin to the top
- my-5 adds margin to the top and bottom
- p-3 adds padding on all sides
Learn more about Bootstrap spacing utilities
Borders
Use Bootstrap border classes when a simple border helps distinguish a section of content.
Examples include border and border border-dark.