dominican logo top
 

Example Layout

Examples of some responsive content on a page.

Full Width Images

For example, you may want a full-width image if you are creating a sort of banner that runs across the top of a page. The trick is to have your image width be the same as the full width of your content area at the largest display of our site. For a standard page that has navigation on the left, the largest our content area displays is 870px. For a six column content area (when you have a portlet on the right) the content width becomes 570px.

Responsive Columns

Below are example responsive columns of text. Only use these if you really need to break your text into columns. Otherwise just let your text flow in a single full-width column.

When to Use Responsive Columns

Generally, you should not use columns in your layouts. This is because the only way to control the columns is to go into manual HTML edit mode when editing pages. Even if you understand HTML very well, other people on your content editing team may not. For those who don't understand HTML really well, it becomes harder to update the content on the page if they need to be in manual HTML mode to make an update. With that disclaimer in place, below you can find out how to manipulate responsive columns in your layout in appropriate cases.

Column 1 (class="span3")

orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 2 (class="span3")

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 3 (class="span3")

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To create columns like this

Below is the structure of the code to use when creating columns in a 9 column area on our grid. You don't have to do three columns. You use up to nine columns on a standard page, and mix and match widths in different ways. However, you want all your columns and offsets to add up to 9 since that's how much space you have on a standard page. Read more about this on bootstrap's documents.

You begin by inserting a DIV to create a ROW. Then, inside the ROW DIV, you insert a number of column DIVs like so:

<div class="row">
<div class="span3">Contents here...</div>
<div class="span3">Contents here...</div>
<div class="span3">Contents here...</div>
</div>

Alternatively, you could do two columns, both with a width of four, and the second having an offset of 1. (Offset adds a blank column space between columns.) Since 4 + 4 + 1 = 9, you're all set. Just remember that all your columns and offsets need to add up to 9 in a standard width content area.

<div class="row">
<div class="span4">Contents here...</div>
<div class="span4 offset1">Contents here...</div>
</div>

Common Sites & Pages


Students

Faculty & Staff

Alumni/Parents