How do I create 5 equal columns in DesignPLUS?

DesignPLUS is built to have columns that are a factor of 12, meaning only 1, 2, 3, 4, 6, and 12 columns can be added to a page. This is due to how Bootstrap columns are built. Here are the instructions on how to add 5 equal columns to a page.

To have 5 equal links on a page,

1. Add 5 columns to a single row in the Columns tool
2. Select Container to Edit the Container
3. Select the down arrow under Column Alignment
4. Set the Horizontal Align (Center)
5. Ensure the column size for each column is Column Size (Default)
   1. In the RCE, select the column
   2. In the sidebar, select Column to Edit the Column
   3. Under Column size, select Column Size (Default)
   4. Repeat for each column, if applicable
6. Open the Attributes tool in the sidebar
7. Select the Column <div>
8. Change class col-lg-# to col-lg-2
9. Repeat for each column in the row

To test how these links will appear on various screen sizes, we would recommend using the Preview Content tool.

How do I add 5 equal links to a Link Grid?

To have 5 equal links on a Link Grid,

1. Open the Link Grid tool in the sidebar
2. Add 5 items to the Link Grid under the Content panel
3. Under the Style panel, select 6 columns for a large screen and choose the best option for medium and small screens
4. If you would like 5 columns on the Medium screen (with accessibility taken into account)
   
   1. Open the Attributes tool in the sidebar
   2. Select the <li> element
   3. Change the class col-md-# to col-md-2
   4. Repeat for each link in the Link Grid
5. Open the Attributes tool in the sidebar
6. Select the <ul> element
7. Add the class "justify-content-center"
8. If the Link Grid background color differs from the Links
   1. Open the Style Editor in the sidebar
   2. Select the <ul> or <nav> element
   3. Under the Border & Background panel, choose a background color
   4. Note that this color may need to be adjusted if the Theme or Link Grid style is changed

Note that not every column has to have "col-lg-2" for them to fit on a large screen. Rather, the number at the end can add up to 12 to fit on a screen. This means, 4/5 columns can have the class "col-lg-2" and 1/5 columns can have the class "col-lg-3" or "col-lg-4." Or, 3/4 columns can have the class "col-lg-2" and 2/5 columns can have the class "col-lg-3."