Advanced Styling & Markup

Twitter Bootstrap

In addition to the Lawrence-specific extras listed below, particularly adventurous users can find additional markup classes in the Twitter Bootstrap documention for "Bootstrap CSS." A frequently-used example is adding the Bootstrap table-striped class to tables in order to add alternating styles to even/odd table rows, or pull-left to move highlight boxes to the left-hand side of the page.

Multi-Column Layouts Within Nodes

Another commonly used feature of Bootstrap is for multi-column layouts using the Fluid Grid System. These columns nicely fall into a single column layout on small devices like phones. Below we've included the 2 most common examples (2-column and 3-column equal layouts); use the "Source" tab to paste the code to start, then click "Source" again and edit the column contents. You can modify them by changing the column width classes (col-md-N) - remember that the total widths of all columns must equal 12 (so a half-width column would be col-md-6). Refer to the previous Bootstrap documentation link for more information.

2-Column, Equal Width

Example:

First column

Second column

Markup (to be pasted under Source):

<div class="container-fluid"> <div class="row"> <div class="col-md-6">First column</div> <div class="col-md-6">Second column</div> </div> </div>

3-Column, Equal Width

Example:

First column

Second column

Third column

Markup (to be pasted under Source):

<div class="container-fluid"> <div class="row"> <div class="col-md-4">First column</div> <div class="col-md-4">Second column</div> <div class="col-md-4">Third column</div> </div> </div>

Color Palette

Foreground/Background

Use the classes below to set the foreground (text) color. To change the background color, simply append -bg to the end of the class. For example, color-red becomes color-red-bg.

Foreground and background classes can be combined (separated with a space) to set both text and background colors, for example color-blue-dark-bg color-white will yield white text on a blue background.

General LU Palette

color-black
color-white
color-blue-light
color-blue-medium
color-blue-bootstrap
color-blue-darker-light
color-blue-darker-medium
color-blue-dark
color-blue-darker
color-gray-light
color-gray-lighter-medium
color-gray-medium
color-gray
color-gray-dark
color-green
color-green-dark
color-red
color-red-dark
color-yellow

Class Colors

color-class-red
color-class-green
color-class-yellow
color-class-purple

Mixed-Opacity Shades

These shades are solid colors with some amount of opacity (they allow the background to bleed through to an extent). To demonstrate the bleed-through we've added a green background.

color-black-semi-opaque
color-black-semi-transparent
color-white-semi-opaque
color-white-semi-transparent

Font Icons

Our Bootstrap-based theme comes with Glyphicons (see table at link) to display different icons/symbols in a standards-based way which preserves their clean lines even when printed or shown on high-density displays (like Retina screens). Font icons like Glyphicons are the preferred way to embed icons in content (as opposed to uploading images that get distorted or grainy at different sizes).

Lawrence has enhanced the Glyphicon set by adding new and/or replacement in-house and third-party icons (see table below). These font icons can be displayed by simply adding the corresponding class (e.g. fontello-youtube) to a link or other element. All LU-provided icons can be encircled by adding (separated by a space) the fontello-circle class. Some icons (specifically the social ones) can be colored by adding fontello-auto-color. For example: fontello-youtube fontello-circle fontello-auto-color is displayed as .

For accessibility reasons, try to include text in the link that describes what it is (in case the font icon isn't visible, such as screen readers for the visually-impaired). For example, <a href="//www7.lawrence.edu/..." class="fontello-youtube">Visit our YouTube page</a> becomes:
Visit our YouTube page.

If for aesthetic reasons you want to display just the icon, you can hide the extra text by adding the class fontello-icon-only. For example, <a href="//www7.lawrence.edu/..." class="fontello-youtube fontello-icon-only">Visit our YouTube page</a> becomes:
Visit our YouTube page

Icon class	fontello-circle	fontello-auto-color
fontello-facebook
fontello-twitter
fontello-instagram
fontello-youtube
fontello-play-circled
fontello-videoplay
fontello-webmail
fontello-apply
fontello-article-alt

Text Properties

To achieve sizes in-between these factors, they can be stacked within elements. For example, to approximate a 50% size increase (a factor of 1.5), you can place a <span> or <div> element the text-xs-larger class within another text-xs-larger class element (combined, the factor would be 1.25 * 1.25 = 1.5625): <span class="text-xs-larger"><span class="text-xs-larger">factor = 1.56</span></span>.

Or, to achieve a factor of 4, you can stack text-md-larger (factor 5) and text-xs-smaller (factor 0.80), so 0.8 * 5 = 4: <span class="text-md-larger"><span class="text-xs-smaller">factor = 4</span></span>.

Enlarging Class	Size Factor	Shrinking Class	Size Factor
text-xs-larger	1.25	text-xs-smaller	0.80
text-sm-larger	2.00	text-sm-smaller	0.50
text-md-larger	5.00	text-md-smaller	0.20
text-lg-larger	10.0	text-lg-smaller	0.10

Miscellaneous Properties

Class	Effect
text-middle	vertical-align:middle
text-tight	line-height: 1

Highlight Box Example

	Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

Well, that's certainly good to know. Fear is the true enemy, the only enemy. Yes, absolutely, I do indeed concur, wholeheartedly! They were just sucked into space. My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sorry, Data. Some days you get the bear, and some days the bear gets you.

Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. Our neural pathways have become accustomed to your sensory input patterns. When has justice ever been as simple as a rule book? Travel time to the nearest starbase? I suggest you drop it, Mr. Data. A surprise party? Mr. Worf, I hate surprise parties. I would never do that to you. I'll alert the crew. Mr. Worf, you do remember how to fire phasers?

	pull-left version Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.

Well, that's certainly good to know. Fear is the true enemy, the only enemy. Yes, absolutely, I do indeed concur, wholeheartedly! They were just sucked into space. My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sorry, Data. Some days you get the bear, and some days the bear gets you.

Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. Our neural pathways have become accustomed to your sensory input patterns. When has justice ever been as simple as a rule book? Travel time to the nearest starbase? I suggest you drop it, Mr. Data. A surprise party? Mr. Worf, I hate surprise parties. I would never do that to you. I'll alert the crew. Mr. Worf, you do remember how to fire phasers?

Highlight Box Markup

Pro Tip: Place the highlight box before the content that you want it to appear alongside. Note the order of the box and the paragraphs in our example.

Pro Tip 2: If you want the box to appear on the left side, simply add pull-left to the class list (separated by a space), e.g. <div class="highlight-box pull-left">

<div class="highlight-box">Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</div>

<p>Well, that's certainly good to know. Fear is the true enemy, the only enemy. Yes, absolutely, I do indeed concur, wholeheartedly! They were just sucked into space. My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sorry, Data. Some days you get the bear, and some days the bear gets you.</p>

<p>Maybe if we felt any human loss as keenly as we feel one of those close to us, human history would be far less bloody. Our neural pathways have become accustomed to your sensory input patterns. When has justice ever been as simple as a rule book? Travel time to the nearest starbase? I suggest you drop it, Mr. Data. A surprise party? Mr. Worf, I hate surprise parties. I would <strong>never</strong> do that to you. I'll alert the crew. Mr. Worf, you do remember how to fire phasers?</p>

Call to Action Example

Training Materials

Modified with other classes (in parentheses)

Training Materials (btn-xs)

Training Materials (btn-sm)

Training Materials (btn-lg)

Training Materials (btn-success)

Training Materials (btn-info)

Training Materials (btn-warning)

Training Materials (btn-danger)

Call to Action Markup

<a href="/your-url" class="call-to-action">Heading</a>

Modified with classes (as listed above)

Simply append the modifying classes with a space. For example, to add btn-info and btn-lg classes:

<a href="/your-url" class="call-to-action btn-info btn-lg">Heading</a>

Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

Tabs Markup

<div class="lu-tabs"> <ul> <li><a href="#lu-tabs-1">Tab One</a></li> <li><a href="#lu-tabs-2">Tab Two</a></li> <li><a href="#lu-tabs-3">Tab Three</a></li> </ul> <div id="lu-tabs-1"> <p>Tab One Content</p> </div> <div id="lu-tabs-2"> <p>Tab Two Content</p> </div> <div id="lu-tabs-3"> <p>Tab Three Content</p> </div> </div>

Infoshade Example

Heading One

Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.

Heading Two

Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula.

Or, presented as buttons:

Heading One

Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.

Heading Two

Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens tigernut soybean radish artichoke wattle seed endive groundnut broccoli arugula.

Heading w/Extra Classes (btn-xs)