CommonSpot Bootstrap Layout

The bootstrap layout is structured by adding containers and specifying grid rows.

• Containers allow you to break the page up into sections with background colors.
• Grid rows allow you to format your content into rows and columns inside your container.
• You can see here how a basic bootstrap is laid out using containers and rows.

To Create a Bootstrap layout:

1. Navigate to your sub site and create a new page from the Commonspot menu and choose, New > Page.
   
   
2. Fill out the properties for your new page:
   
   
   
1. Name: filename for the new page (spaces will be hyphenated).
2. CommonSpot Title: Heading for the page. Will be displayed as a Heading 1 (H1) at the top of the page and used for internal searching within Commonspot.
3. Page Title: Displayed in the browser tab, also used by search engines. Append with ‘ | UW-Parkside’.
4. Category: Choose Bootstrap.
5. Click Next
   
   
3. Define the custom properties for your new page:
1. Hero Image: A large image that can be added to the top of your page. Make sure to crop your photos to a width of 1920px with a recommended height of 500 – 800px.
2. Hero Caption: Alternate text for the hero image. Describe the image and any words used in it.
3. Display Sidebar: Toggle showing the “Who are you?” box on the edge of the page.
4. Page Header Options: Use to control spacing between heading and default container.
5. Hide page header section: Will hide the default Heading 1 and text block. If this is checked, you must make sure to include an H1 at the top of the page manually.

To Format your page:

1. The default layout gives you a formatted text block under the page heading you can add content into.
   
   
2. Add Containers: You can customize your layout further by breaking your page up into sections by color. To do this, insert container elements into the base default container proved with the layout.
   Add enough containers for each alternate color section you want, being careful not to nest containers into the new containers you’ve added.
   
   
   
3. Define your grid rows:
1. Click on the square next to the container you want to edit and choose: ‘Layout Properties’
2. Click the ‘grid’ tab.
   
3. Change Row 1 to a bootstrap column of your choice.
4. Add more rows as necessary.
5. By clicking the + sign next to a row, you can control the padding on the top or bottom of a it by choosing the pencil icon (edit) next to the container.
6. Under the ‘Layout’ tab, you can also define a background image for the container. (It’s recommended to chose ‘cover’ for the background size) If it's a dark image be sure to choose a background color for the container style that has contrasting text (see below).
7. Save
   
   
4. To style the color of your container section, click on the square container icon and choose 'style'.
1. From here there are some styles you can choose from including the background options for color.
   
   
2. Save.
   
   
5. You can now add your elements into the grid row sections to start adding content to the page.