Bard College at Simon's Rock: the Early College
  1. Home
  2. Guide
  3. Patterns
  4. Layout
  5. Columns

Columns

Use columns to break up the monotony of the text. 

  • Use columns to compare two different kinds of content such as text and image or text and aside.
  • Don't use columns to jam lots of text on the page. Be wary of using multiple text-heavy columns.  
People sitting outside

Column Image

Break up text with an image.

  1. Select Snippet: "Column Photo Column Text"
  2. Customize column size (see below)
  3. Customize Image (resize to the appropriate size)
  4. Customize text
  5. If including a header in the column, use the Headings Styles to reduce the top margin and top align.

Aside

Text connected to the body of the page goes here. The other box has tangential call to action.

  1. Select Snippet: "Column Text Column Aside"
  2. Customize body text
  3. Customize aside text
  4. Customize link URL(s)

Calls to action are a vital part of the primary goals of the website to increase enrollment, build relationships and strengthen the College's fundraising efforts. There are a variety of CTAs to choose from. This pattern makes use of Columns.

Give some context for the call the call to action

Give some context for the call the second call to action

Sidebar

Text connected to the body of the page goes here. The grey background sidebar is a shorter piece or text that accompanies the longer body of text in the main section of the site. While it appears to be separate, it should be related to the main idea.

  1. Select Snippet: "Column Text Column Sidebar"
  2. Customize body text
  3. Customize sidebar text

Use the sidebar for text longer than the aside. This could include related news or events. 

Instructions

  1. Add Snippet
  2. Columns
  3. Update Column Classes to add up to 12. 
  4. Add additional columns by adding a row

Width

Columns divide up a 12 point grid. The width of the columns should add up to 12. Options include 6+6, 4+4+4, 8+4, etc.

You can also use a single 12-width column for a section break.

Classes

Mix and match settings in the Row Class(es)

Column Classes Options

  • "row" will almost always be good to include
  • "margin-bottom" will keep left/right margin even with content outside the column, will almost always be good to include 
  • "row-margin-bottom-none" will prevent a bottom margin. Use if the column layout is within a section and you want to avoid a white space break. Each of these classes are cumulative, so you may add all three: "row margin-bottom row-margin-bottom-none". If adding the class is not working, try deleting the space prior to "row-margin-bottom-none" and then re-adding it. Sometimes, in code the space is replaced by nbsp; in the code which displays as a space, but won't work in the code.
  • "margin-top-bottom" will add margin to the top and bottom
  • If there is too little space underneath the columns, check to see if the paragraphs within the columns are set to 'paragraph'. Even if it says 'paragraph' try highlighting and setting to paragraph.
  • "row-col-highlight" will float column right (but stay on top on mobile) and add a background color. Add a div with class ".text-wrapper" to pad between the background and edge. Use this pattern on Gatekeeper Template.
  • Use columns to prevent a text wrap or float. Add a .clearfix and everything below will start on a new row.
    <div class="row">
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

      <!-- Add clearfix and everything will clear beneath it -->
      <div class="clearfix"></div>  

      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

      <!-- Add clearfix for only the required viewport -->
      <div class="clearfix visible-xs-block"></div>

      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>
  • Swap the order of the columns on different screen sizes by adding push and pull classes to column.  
    .col-xs-push-4 <!-- move columns at xs-size to the right 4 units -->
    .col-sm-pull-8 <!-- move columns at sm-size to the left 8 units -->

Style Dropdowns for Column-Spacing

img fluid img

Use on elements to create a space beneath an element. Particularly useful for an image that is used as the entire content of an initial column in a multi-column layout. The spacing will be needed when the columns collapse on smaller viewports.

sample image

The image above has a class fluid-image

sample image

The image above does not have a class

Headings

On multi-column layouts, remove header top margins.

 

Bootstrap

The columns are built with the Bootstrap framework. Add offsets and clears using the documented code.