1. Home Icon
  2. Web Style Guide
  3. Components

Web Style Guide

Components

Wells

Wells are, well, cool. Wells help to call out content and make aspects of a page stand out. Don't overuse them even though they are so nice. There are three types of wells: default, large and small.

Use the class well on the container div.

Default Well

Bacon ipsum dolor amet short ribs bacon pork chop beef. Chuck frankfurter drumstick, boudin pancetta cupim doner. Meatloaf jowl short ribs shankle rump prosciutto ball tip t-bone tail beef chuck. Pancetta pig pork loin drumstick beef picanha kevin salami meatball kielbasa pastrami landjaeger short ribs. Pastrami tongue filet mignon jerky doner chicken chuck pork chop biltong corned beef sausage pork belly.

Go Somewhere!

Large Well (with a blockquote)

Add the class well as well as well-lg to the container div.

Bacon ipsum dolor amet short ribs bacon pork chop beef. Chuck frankfurter drumstick, boudin pancetta cupim doner.
Go Somewhere!

Small Well

Add the class well as well as well-sm to the container div.

Bacon ipsum dolor amet short ribs bacon pork chop beef. Chuck frankfurter drumstick, boudin pancetta cupim doner. Meatloaf jowl short ribs shankle rump prosciutto ball tip t-bone tail beef chuck. Pancetta pig pork loin drumstick beef picanha kevin salami meatball kielbasa pastrami landjaeger short ribs. Pastrami tongue filet mignon jerky doner chicken chuck pork chop biltong corned beef sausage pork belly.

Go Somewhere!

Callout/ Inline Call to Action

The idea behind this component is to highlight a call to action in the main content. Essentially wrap your content within an a tag (for links) or a div with the class callout

If you add a width and the class pull-left or pull-right you can align the callout and have text wrap around it.

The p tag in a callout will not have a bottom margin or bottom padding, so keep this in mind. Calls to action should be short and to the point.

Callout/ Inline Call to Action as a div

Looking for something?

Click here to get some more information...

Primary Callout/ Inline Call to Action as a div

Just add the class callout-primary to the parent div.

Looking for something?

Click here to get some more information...

Callout/ Inline Call to Action as a link

Help students reach their potential!

Every dollar you donate goes directly to our students. Donate now.

Primary Callout/ Inline Call to Action as a link

Just add the class callout-primary to the parent a tag.

Help students reach their potential!

Every dollar you donate goes directly to our students. Donate now.

Callout/ Inline Call to Action - Floated Right

Add a max-width to the parent container with the class callout

Help students reach their potential!

Every dollar you donate goes directly to our students. Donate now.

Bacon ipsum dolor amet short ribs bacon pork chop beef. Chuck frankfurter drumstick, boudin pancetta cupim doner. Meatloaf jowl short ribs shankle rump prosciutto ball tip t-bone tail beef chuck. Pancetta pig pork loin drumstick beef picanha kevin salami meatball kielbasa pastrami landjaeger short ribs. Pastrami tongue filet mignon jerky doner chicken chuck pork chop biltong corned beef sausage pork belly.

Callout/ Inline Call to Action - Floated Left

Add a max-width to the parent container with the class callout

Help students reach their potential!

Every dollar you donate goes directly to our students. Donate now.

Bacon ipsum dolor amet short ribs bacon pork chop beef. Chuck frankfurter drumstick, boudin pancetta cupim doner. Meatloaf jowl short ribs shankle rump prosciutto ball tip t-bone tail beef chuck. Pancetta pig pork loin drumstick beef picanha kevin salami meatball kielbasa pastrami landjaeger short ribs. Pastrami tongue filet mignon jerky doner chicken chuck pork chop biltong corned beef sausage pork belly.

Toggle Using a Callout

  • Bacon ipsum dolor amet short ribs bacon pork chop beef
  • Pastrami tongue filet mignon
  • Pork ribeye doner short ribs
  • Strip steak shoulder jowl
  • Turducken pork loin brisket shankle venison
  • Bacon ipsum dolor amet short ribs bacon pork chop beef
  • Pastrami tongue filet mignon
  • Pork ribeye doner short ribs
  • Strip steak shoulder jowl
  • Turducken pork loin brisket shankle venison

Panels

Panels are an additional component that takes wells one step further. Panels can have headings, footers, be used for accordion (see below), toggle (see below), list groups, tables, contextual... the possibilities of the panel are endless.

Default/ Basic Panel

Pork ribeye doner short ribs, bresaola pastrami ham hock tenderloin sirloin chicken kielbasa jowl cupim landjaeger porchetta. Strip steak shoulder jowl fatback meatball spare ribs bacon.
<div class="panel panel-default">
<div class="panel-body">
[YOUR CONTENT HERE]
</div>
</div>

Panel with Header (and a primary callout)

This title gets your attention!

Pork ribeye doner short ribs, bresaola pastrami ham hock tenderloin sirloin chicken kielbasa jowl cupim landjaeger porchetta. Strip steak shoulder jowl fatback meatball spare ribs bacon. Turducken pork loin brisket shankle venison chuck tongue short loin shank tail ball tip landjaeger hamburger picanha. Rump salami bacon ground round sausage pork t-bone ham. Alcatra brisket hamburger bresaola, salami pastrami tongue bacon ham cow chicken boudin. Pork chop alcatra capicola tri-tip pancetta. Chuck short ribs ribeye beef ribs pancetta turkey picanha sausage porchetta tenderloin venison pig.

Are you ready to get started?

The time is now. Now is the time. Get started now!

Pork ribeye doner short ribs, bresaola pastrami ham hock tenderloin sirloin chicken kielbasa jowl cupim landjaeger porchetta. Strip steak shoulder jowl fatback meatball spare ribs bacon.

Panel with a Header and Footer

This panel is awesome!

Here is a quick announcement about how awesome this panel is and that you should be so lucky to see this panel.
Do you think this is an awesome footer? It is Awesome!

Panel with an Icon

You can add an icon to a panel in the top right by adding the class panel-icon in conjunction with panel class to the parent div. Then add the icon within the div with the class panel-icon. Only for use with Font Awesome and the icon must have a class of panel-icon-fa.

If you do not include an icon, then this type of panel will just have a yellow top border and not background for the heading.

<div class="panel panel-default panel-icon">
<i class="fa fa-ICON panel-icon-fa"></i>
</div>

Contact Us

  • 1234 Some Street
    City, State 99999
  • email@website.com
  • (888) 999-1010

Contextual Panels

You can use the classes panel-primary, panel-success, panel-info, panel-warning, panel-danger for contextual instances.

Primary Panel

This is the body of the primary panel.

Success Panel

This is the body of the success panel.

Info Panel

This is the body of the info panel.

Warning Panel

This is the body of the warning panel.

Danger Panel

This is the body of the danger panel.

Panel using a List Group

Title of this list group panel.

  • List item here
  • List item here
  • List item here
  • List item here

Popovers

Popovers are displayed on click and can be used on any anchor or button tag.

There is the option to make popovers only dimissable on click of the anchor tag, but in our case and in most cases we want the popover to be dismissable on any click action, but in the case that you might not want dismissable, remove data-trigger="focus" from the button or anchor tag.

Popovers can be displayed bottom, top, right or left.

Click on the examples below to see the popovers in action.

If you want more information on Popovers, including javascript usage, go to http://getbootstrap.com/javascript/#popovers

<a href="#" class="btn btn-defaul" data-container="body" data-toggle="popover" title="The Title of Popover" data-trigger="focus" data-placement="top" data-content="Here is where you content for the popover goes.">VIEW THIS POPOVER</a>

Labels

Labels can be used to highlight an announcement, add meaning to a link, show percentages or numbers, etc. We do so by adding a span tag with the class label label-defaultwithin an element, ie a link or heading tag.

Register for Classes Now Open

View Scholarships 22
<h3>Register for Classes <span class="label label-default">Now Open</span></h3>

You can also use a few different classes to provide color. Specifically: label-default, label-primary, label-gold, label-success, label-info, label-warning, label-danger.

Default 0
Primary 0
Gold 0
Success 0
Info 0
Warning 0
Danger 0

Alerts

The following are styles for alerts. This could be alerts for missed fields in forms, emergency alerts, informational alerts, and so forth.

Homepage Alert

There are two levels of alerts for the homepage. 1. Informational, ie Server Maintenance, Closed Campus, etc. and 2. Emergency, ie Campus Emergency, flood, earthquake, campus lockdown, etc. Emergency should only be envoked by the President or Campus Police.

Both of which will be afixed to the top of the page. The Emergency will most likely not be dismissable.

Information Homepage Alert

There will be system maintenance next week.

All servers and access to the website will be unavailable from 12am PST to 2am PST Sunday for server maintenance. We apologize for any inconvenience.

<div class="alert alert-info>
YOUR CONTENT HERE
</div>
Emergency Homepage Alert
<div class="alert alert-danger">
YOUR CONTENT HERE
</div>

Dismissable Alerts

In order to make an alert dismissable by adding alert-dismissable to the same div you add alert. Then the first child of the div must be a button to close the alert, see below.

<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

Great job! Super success!

Alerts come in different colors...

Just add the appropriate class to the div with the class alert.

List Groups

List groups are used throughout the site specifically for organizing lists and styling them as menus, but primarily list groups are used for sidebar menus (contextual menus/ section toggle navigation).

List groups do not just need to be links, but can have headings and sub-content as well. Let's dive in...

Regular Ol' List Groups

List groups can be used in a number of instances to help organize content.

Basic List Group
  • A list group item
  • A list group item
  • A list group item
  • A list group item
List Group with Badges...

A instance of use might be to display a link that indicates number of available downloads or total items a particular group received.

  • 10%Group A
  • 20%Group B
  • 20%Group C
  • 50%Group D
List Group with Custom Content
List group with links as a link farm.

Heading for Link Farm

You may use this in the body of the content to offer resources or as a component on a landing page, etc.

List Groups as Menus

List groups used as menus primarily. In all these instances add the class list-group-menu to your <ul> tag.

<ul class="list-group list-group-menu">
Menu — List Group

Example of a simple instance of a menu as a list group. Add the class .list-group-menu to the <ul> element.

Menu - List Group with Section Heading
Menu - List Group with Section Heading and Toggle Menu
Social Media List Group Menu
Menu - Menu with Custom Content
Menu - Menu with Custom Content
Menu with active class.

Example menu with active class added to <li>. Active class adds a gray background.

In order to display the caret vertically centered, add the class caret-right to the a tag, ie <a href="" class="caret-right">

Tabs

For more information about tabs and tab usage, specifically in regards to using javascript for tabs, see http://getbootstrap.com/javascript/#tabs.

For tabs to work you need to have a unordered list with the following classes: nav, nav-tabs and a role of tablist. This list corresponds to the content area.

<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tabpanel1" role="tab" data-toggle="tab">Tab 1</a></li>
</ul>

Then for the actual content which relates to the tab used the following structure.

<div class="tab-content">
<div role="tabpanel" class="tab-pane in active fade" id="tabpanel1">YOUR CONTENT HERE</div>
</div>

Regular Ol' Tabs

Tab Panel One

That this group would somehow form a family that's the way we all became the Brady Bunch. Then one day he was shootin' at some food and up through the ground came a bubblin' crude. Oil that is. I have always wanted to have a neighbor just like you. I've always wanted to live in a neighborhood with you! Said Californ'y is the place you ought to be So they loaded up the truck and moved to Beverly. Hills that is. Swimmin' pools movie stars. Flying away on a wing and a prayer. Who could it be? Believe it or not its just me.

Tab Panel Two

That this group would somehow form a family that's the way we all became the Brady Bunch. Then one day he was shootin' at some food and up through the ground came a bubblin' crude. Oil that is. I have always wanted to have a neighbor just like you. I've always wanted to live in a neighborhood with you! Said Californ'y is the place you ought to be So they loaded up the truck and moved to Beverly. Hills that is. Swimmin' pools movie stars. Flying away on a wing and a prayer. Who could it be? Believe it or not its just me.

Tab Panel Three

That this group would somehow form a family that's the way we all became the Brady Bunch. Then one day he was shootin' at some food and up through the ground came a bubblin' crude. Oil that is. I have always wanted to have a neighbor just like you. I've always wanted to live in a neighborhood with you! Said Californ'y is the place you ought to be So they loaded up the truck and moved to Beverly. Hills that is. Swimmin' pools movie stars. Flying away on a wing and a prayer. Who could it be? Believe it or not its just me.

Justified Tabs

Add the class nav-justified to the <ul> element.

<ul class="nav nav-tabs nav-justified">

Tab Panel One

That this group would somehow form a family that's the way we all became the Brady Bunch. Then one day he was shootin' at some food and up through the ground came a bubblin' crude. Oil that is. I have always wanted to have a neighbor just like you. I've always wanted to live in a neighborhood with you! Said Californ'y is the place you ought to be So they loaded up the truck and moved to Beverly. Hills that is. Swimmin' pools movie stars. Flying away on a wing and a prayer. Who could it be? Believe it or not its just me.

Tab Panel Two

That this group would somehow form a family that's the way we all became the Brady Bunch. Then one day he was shootin' at some food and up through the ground came a bubblin' crude. Oil that is. I have always wanted to have a neighbor just like you. I've always wanted to live in a neighborhood with you! Said Californ'y is the place you ought to be So they loaded up the truck and moved to Beverly. Hills that is. Swimmin' pools movie stars. Flying away on a wing and a prayer. Who could it be? Believe it or not its just me.

Tab Panel Three

That this group would somehow form a family that's the way we all became the Brady Bunch. Then one day he was shootin' at some food and up through the ground came a bubblin' crude. Oil that is. I have always wanted to have a neighbor just like you. I've always wanted to live in a neighborhood with you! Said Californ'y is the place you ought to be So they loaded up the truck and moved to Beverly. Hills that is. Swimmin' pools movie stars. Flying away on a wing and a prayer. Who could it be? Believe it or not its just me.

Collapse / Toggle

Creates a toggle effect for content. It can be used on buttons, href, panels, etc.

Toggle using a href

The id of the anchor tag must match the div you are targeting.

Show/ Hide Content

Bacon ipsum dolor amet short ribs bacon pork chop beef. Chuck frankfurter drumstick, boudin pancetta cupim doner. Meatloaf jowl short ribs shankle rump prosciutto ball tip t-bone tail beef chuck. Pancetta pig pork loin drumstick beef picanha kevin salami meatball kielbasa pastrami landjaeger short ribs. Pastrami tongue filet mignon jerky doner chicken chuck pork chop biltong corned beef sausage pork belly.

Toggle Using a Callout

  • Bacon ipsum dolor amet short ribs bacon pork chop beef
  • Pastrami tongue filet mignon
  • Pork ribeye doner short ribs
  • Strip steak shoulder jowl
  • Turducken pork loin brisket shankle venison
  • Bacon ipsum dolor amet short ribs bacon pork chop beef
  • Pastrami tongue filet mignon
  • Pork ribeye doner short ribs
  • Strip steak shoulder jowl
  • Turducken pork loin brisket shankle venison

Accordion

Accordion uses the functionality of collapse, but only one panel can be open at a single time. We use panels to construct the accordion and add the class accordion to the parent element. Ie <div class="panel-group accordion">

Accordion Default

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordion Primary

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordion Black

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Modals

Modals are essentially popup windows to display information to the user or verify a request from the user. They can be initiated on click events, on page load or upon submission of a form amongst other uses.

We are using Magnific Popup for modals as well as lightbox and galleries. You can read more about Magnific Popup at http://dimsemenov.com/plugins/magnific-popup/

A simple example of the modal — click on the button below.

To use this modal with a button or href, add the class popup-modal to the button or href.

A Title Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam arcu massa, interdum ut nisl eget, fermentum semper sapien. Maecenas ex augue, ultrices vel rutrum ac, semper a velit. Aliquam erat volutpat. Mauris luctus sit amet erat eget sollicitudin. Fusce commodo malesuada nisi, et egestas augue mollis eu. Nam non mattis leo. Nam justo ex, fringilla semper vehicula quis, sagittis eget lectus.

Okay?

Modal used for displaying a form or other content with a close / click off modal to close.

This may be useful for displaying a form or content that does not need a verification or call to action.

Instead of using the class popup-modal use the class popup-modal-content on the button or href.

Form

Lightbox has an option to automatically focus on the first input. It's strongly recommended to use inline popup type for lightboxes with form instead of ajax (to keep entered data if the user accidentally refreshed the page).


A few notes on Modals:

  • Use the class popup-modal-dismiss on any button or href to close the popup. Ie for form submit button you could use the class to close the modal once the form is submitted.
  • Make sure on the div that is your modal, to add the class mfp-hide to initially hide the modal.
  • The href or button that opens the modal must match the id of the modal, ie href="#example-modal".
  • Also make sure to include the class white-popup-block to the actual modal for the white styled modal. If you like you can create additional styled modals by changing that class and adding your own styling to the modal.

BOOTSTRAP MODAL

This is Bootstrap's modal, which doesn't work...

Jumbotron

For when you want to make a major impact or great for landing pages.

To make the Jumbotron full width, put it outside any container and put the container within the Jumbotron.

Make a statement!

Sign up now and make the biggest statement you have ever thought you could possibly make.

Sign Up Now

<div class="jumbotron">
[YOUR CONTENT HERE]
</div>

Events / News Items

The following are ways to display the events and news component. Essentially a format to load events and news into a page with other content.

Standard Events/ News Component (linked)

Standard Events/ News Component (not-linked)

  • MAY
    08
    Title of an event

Events/ News Component in a Panel

Events/ News Items in a Row

Using the same ul and li structure above, just add the column widths to the li. For instance <li> class="col-sm-4">

Features

Vertical News/ Feature Callout

This is a another news/ feature that you can utilize. It combines a panel, thumb, title, paragraph and block button.

Sample Image

Title of some news item.

A financing focus growth hacking bandwidth freemium responsive web design funding alpha.

View Entire Story
Sample Image

Title of some news item.

A financing focus growth hacking bandwidth freemium responsive web design funding alpha.

View Entire Story

Horizontal News/ Feature Callout

Sample Image

A horizontal title for the story!

A financing focus growth hacking bandwidth freemium responsive web design funding alpha.

Click here!

Social Sharing

For social sharing you need to include two files. First in your head include social-share-head.php and then where you'd like the social share buttons to be displayed include social-share-buttons.php. Both of these includes are located in includes/social/ directory.

Back to Style Guide Home