Bootstrap Grid

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.


Image
boostrap grid widths

How to Create a Bootstrap Grid

  1. Create a page or edit an existing one.
  2. Add any content that has the Editor Toolbar (Text, Accordion, Cards, Text with Background, Text on Media) and select Insert Bootstrap Grid.
  3. Select the desired number of columns > Next
  4. Select the desired width of each column (example at right)
    1. 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.
    2. 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.
  5. Save

 

Tip:

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

Note:

Full width (100%) is usually the best option for mobile settings.

Image
Bootstrap grid 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.

  1. Method 1: Right click on your grid and select Edit Grid.
  2. 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.

Image
dancing girls

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

Column 4 content

This is a column with text and a table.

Student Contact
Wilma Wildcat wilmawildcat@email.arizona.edu
Wilbur Wildcat wilburwildcat@email.arizona.edu