Easily make use of two color schemes: semantic and grayscale. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

Colors

$pink
$brand-primary
$link-color
$btn-default-color
#ED008C

$pink-dark
$brand-primary-emphasize
$link-hover-color
#D4027B

$pink-light
$brand-primary-muted
#FEF4F8
$magenta
$brand-alt
#8A175B

$magenta-dark
$brand-alt
#78114E

$magenta-deep
$brand-alt-deep-emphasize
#2B1823

$magenta-deeper
$brand-alt-deeper
#190E15
$purple
#48293B
$red
$brand-danger
#D6321C

$red-dark
$state-danger-text
#AD1804

$red-light
#F29F94

$red-lighter
$state-danger-bg
#FDEDEA
$orange
$brand-warning
#FAA342

$orange-dark
$alert-warning-strong-bg
#C76E0A

$orange-light
#F9CFA0

$orange-lighter
#FDF3E8
$blue
$brand-info
#2C97D0

$blue-dark
$alert-info-strong-bg
#0E6FA2

$blue-light
#9BD5ED

$blue-lighter
#ECF6FA
$green
$brand-success
$alert-success-strong-bg
#3EA572

$green-dark
$alert-success-text
#087F44

$green-light
#82D3AB

$green-lighter
$state-success-bg
$alert-success-bg
#D5F4E5
$gray
$input-color
$input-label-text-color
#666

$gray-medium
$link-color-muted
#8e8e8e

$gray-light
$border-color
#CCC

$gray-lighter
$table-bg-hover
$input-bg-disabled
#F2F2F2
$black
$text-color
$gray-base
$gray-dark
#000

$white
#FFF

Customize Variables

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

Typography and links

Bootstrap sets basic global display, typography, and link styles. Specifically, we:

Set background-color: #fff; on the body
Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base
Set the global link color via $link-color and apply link underlines only on :hover
Use .link-muted for a muted link and .link-plain for a completely undecorated link.

These styles can be found within scaffolding.scss.

Link Classes

Default - I'm a default link

.link-primary - I'm a primary link, I'll force default link behavior when needed

.link-secondary - I'm a secondary link

.link-plain - I'm a plain link

.link-muted - I'm a muted link

.link-reverse-plain - I'm a reverse plain link

.link-underline - I'm an underlined link

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Lorem ipsum dolor sit amet, erant dolor phaedrum. Lorem ipsum dolor sit amet, erant dolor phaedrum.

h1. Heading	Book 42px (Desktop: 48px)
h2. Heading	Book 30px (Desktop: 36px)
h3. Heading	Book 22px (Desktop: 30px)
h4. Heading	Book 18px (Desktop: 24px)
h5. Heading	Medium 15px (Desktop: 18px, UPPERCASE)
h6. Heading	Medium 13px (Desktop: 14px, UPPERCASE)
h7. Heading	Medium 11px (Desktop: 12px, UPPERCASE)

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text

h6. Heading Secondary text

Body copy

Bootstrap's global default font-size is 16px, with a line-height of 1.5. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Built with SASS

The typographic scale is based on two SASS variables in variables.scss: $font-size-base and $line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

Tiny text

Use the .tiny class to set text 12px.

This line of text is tiny 12px.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

This line of text is meant to be treated as fine print.

Medium text

Use the .medium class to set text 14px.

This line of text is medium 14px.

Marge text

Use the .marge class to set text 16px.

This line of text is marge 16px.

Large text

Use the .large class to set text 18px.

This line of text is large 18px.

Bold

For emphasizing a snippet of text with a heavier font-weight.

font-weight settings of bold and 600 use Gotham Medium.

font-weight: 900 uses Gotham Bold. Use this is for very small bold text.

The following snippet of text is rendered as bold text. As is this.

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

Uppercase

Display text as uppercase.

The following snippet of text is rendered as uppercase.

Lowercase

Display text as lowercase.

The following snippet of text is RENDERED AS LOWERCASE.

Capitalize

Capitalize each word.

The following snippet of text is rendered with capitalization.

Muted

For muting a snippet of text with the .text-muted class.

The following snippet of text is muteed with the .text-muted class.

Strike Through

For striking text with the .strike-through class.

The following snippet of text is striked.

Underline

For underlining text with the .underline class.

The following snippet of text is underlined.

Alternate elements

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Basic abbreviation

For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.

An abbreviation of the word attribute is attr.

Initialism

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread.

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Blockquote options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Alternate displays

Add .blockquote-reverse for a blockquote with right-aligned content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lists

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Inline

Place all list items on a single line with display: inline-block; and some light padding.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

Description

A list of terms with their associated descriptions.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Horizontal description

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Auto-truncating

Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.

Variables

Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

No borders

Add .table-no-borders for no borders rows.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Sparse table

Add .table-sparse to make tables with first column aligned left, middle columns aligned center and last column aligned right.

ID	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding in half.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Contextual classes

Use contextual classes to color table rows or individual cells.

Class	Description
`.active`	Applies the hover color to a particular row or cell
`.success`	Indicates a successful or positive action
`.info`	Indicates a neutral informative change or action
`.warning`	Indicates a warning that might need attention
`.danger`	Indicates a dangerous or potentially negative action

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content
4	Column content	Column content	Column content
5	Column content	Column content	Column content
6	Column content	Column content	Column content
7	Column content	Column content	Column content
8	Column content	Column content	Column content
9	Column content	Column content	Column content

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

Responsive - Mixed rows and columns

To make columns of <td>s use .t-inline.
To make rows of <td>s use .t-block.
To break into a row after a seris of columns, use .t-row-1 then .t-row-2.

First Name	Last Name	Phone	Email	Online Customer	Actions
Mark	Lorem ipsum dolor sit amet, erant dolor phaedrum.	000-000-0000	mark@otto.com	Lorem ipsum dolor sit amet, erant dolor phaedrum.	•••
Mark	Lorem ipsum dolor sit amet, erant dolor phaedrum.	000-000-0000	mark@otto.com	Lorem ipsum dolor sit amet, erant dolor phaedrum.	•••
Mark	Lorem ipsum dolor sit amet, erant dolor phaedrum.	000-000-0000	mark@otto.com	Lorem ipsum dolor sit amet, erant dolor phaedrum.	•••

Responsive - Absolute columns

Sometimes you need a <td> to act as a column that goes 100% height of the table.

To each <tr>, add .t-has-absolute-col-left and/or .t-has-absolute-col-right.
To the <td> that is to be an "absolute" column, add .t-absolute-col-left or .t-absolute-col-right.

First Name	Last Name	Phone	Email	Online Customer	Actions
Mark	Otto	000-000-0000	mark@otto.com	Lorem ipsum dolor sit amet, erant dolor phaedrum.	•••
Mark	Otto	000-000-0000	mark@otto.com	Lorem ipsum dolor sit amet, erant dolor phaedrum.	•••
Mark	Otto	000-000-0000	mark@otto.com	Lorem ipsum dolor sit amet, erant dolor phaedrum.	•••

Responsive - Column Titles

Column titles in <thead> are moved to the left as 'row titles' on smaller screens.

Use class table-responsive-column-titles on containing div.
Any <td> that should become a 'row' title on small screens will need a data-title attribute that reflects the column title.
For content that should break out of the table and float right, use class mobile-row on <td>
Optionally include a 'mobile sorting' dropdown menu in a <th> in <thead> with class .t-sort. This item will not be visible on large screens and should contain items that reflect the normal column titles. Note this is not required for proper functioning. If omitted, there will simply be no sorting menu.

First Name	Last Name	Phone
Marcus	Winslow	000-000-0000
Marcus	Winslow	000-000-0000
Marcus	Winslow	000-000-0000

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Type declaration required

Inputs will only be fully styled if their type is properly declared.

Input groups

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

Demo `:focus` state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

With optional icons

You can also add optional feedback icons with the addition of an extra class and the right icon.

Optional icons also work on horizontal and inline forms.

With calendar icon. (Calendar itself generated by Angular)


Mon	Tue	Wed	Thu	Fri	Sat	Sun

Control sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Height sizing

Create taller or shorter form controls that match button sizes.

Inputs

Selects

Width sizing

This is to to make the "size" attribute behave correctly. It overrides 100% from bootstrap and also to accounts for the padding added by bootstrap that throws off "size".

Inputs

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

Selects

Use the default option, or add multiple to show multiple options at once.


  {% include components.elements.forms.select %}

  {% include components.elements.forms.select with {
        'options': [
          {'label': 'Option Label 4'},
          {'label': 'Option Label 5'},
          {'label': 'Option Label 6'}
        ]
      }%}

  {% include components.elements.forms.select with {multiple: true %}

Select Picker

bootstrap-select - A js powered select element for robust select dropdowns

Checkboxes

For selecting one or several options in a list. Indeterminate state is built in but must be controlled with javascript if desired.

Checkbox Label


    {% include components.elements.forms.checkbox with {id: 'checkbox1', name: 'checkbox1', classes: 'one two', theValue: 'option1', theLabel: 'Checkbox Label', checked: true} %}

With .input-sm applied

Checkbox Label w .input-sm


    {% include components.elements.forms.checkbox with {id: 'checkbox1', name: 'checkbox1', classes: 'input-sm', theValue: 'option1', theLabel: 'Checkbox Label w.input-sm', checked: true} %}

Proper indents when label text is super long

By registering, you agree to Avon’s Privacy Statement and Conditions of Use, and you are over 18 years old. Bacon ipsum dolor amet biltong tail pork loin doner filet mignon. Shank kevin beef ribs, corned beef doner filet mignon leberkas salami.


    {% include components.elements.forms.checkbox with {id: 'checkbox1', name: 'checkbox1', wrapLabel: true, theLabel: 'By registering, you agree to Avon’s Privacy Statement and Conditions of Use, and you are over 18 years old. Bacon ipsum dolor amet biltong tail pork loin doner filet mignon. Shank kevin beef ribs, corned beef doner filet mignon leberkas salami.'} %}

Radios

For selecting one option from many.

Radio One

Radio Two

Radio Three


    {% include components.elements.forms.radio with {id: 'radio1', name: 'radioGroup', classes: 'one two', theValue: 'option1', theLabel: 'Radio Label', checked: true} %}

With .input-sm applied

Radio 1

Radio 2

Radio 3


    {% include components.elements.forms.radio with {id: 'radio4', name: 'radio4', classes: 'input-sm', theValue: 'radio4', theLabel: 'Radio Label w.input-sm', checked: false} %}

Proper indents when label text is super long

By registering, you agree to Avon’s Privacy Statement and Conditions of Use, and you are over 18 years old. Bacon ipsum dolor amet biltong tail pork loin doner filet mignon. Shank kevin beef ribs, corned beef doner filet mignon leberkas salami.


    {% include components.elements.forms.radio with {id: 'radio1', name: 'radio1', wrapLabel: true, theLabel: 'By registering, you agree to Avon’s Privacy Statement and Conditions of Use, and you are over 18 years old. Bacon ipsum dolor amet biltong tail pork loin doner filet mignon. Shank kevin beef ribs, corned beef doner filet mignon leberkas salami.'} %}

Form Control Modifiers

Modifier classes to be added to .form-control elements.

.form-control--underline

Options

Use any of the available button classes to quickly create a styled button.

Other Button Styles

Other button styles which might come in handy.

Soft Button

Button with normal text and rounded corners

Note

.btn-soft is a modifier, meaning that it requires a base class to work. For example, you can add it to a .btn-primary element or a .btn-default but it won't work on it's own.

Transparent Light Button

A light colored button with a transparent background that sits well on darker colors.

Primary Responsive Button

Looks like .btn-primary on small screens and .btn-default on large screens.

Link Responsive Button

Looks like a normal text link on small screens and .btn-primary on large screens.

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state progammatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

Anchor element

Add the .active class to <a> buttons.

Primary link Link

Disabled state

Make buttons look unclickable by fading them back 50%.

Button element

Add the disabled attribute to <button> buttons.

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality not impacted

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

Context-specific usage

While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's a Firefox bug that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Add classes to an <img> element to easily style images in any project.

A generic square placeholder image with rounded corners

A generic square placeholder image where only the portion within the circle circumscribed about said square is visible

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

Available icons

This is a custom font generated from SVG files the designers produce. Note: All icons are produced at 32x32px with some padding built-in defined by the designer. There are a few examples that don't include padding built in. They are marked below with (No Padding).

lt-icon lt-search
lt-icon lt-eye
lt-icon lt-carat-left
lt-icon lt-carat-up
lt-icon lt-carat-right
lt-icon lt-carat-down
lt-icon lt-left
lt-icon lt-up
lt-icon lt-right
lt-icon lt-down
lt-icon download
lt-icon lt-checkmark
lt-icon lt-close
lt-icon lt-refresh
lt-icon lt-collapse-circle
lt-icon lt-expand-circle
lt-icon lt-right-button
lt-icon lt-info
lt-icon lt-clock
lt-icon lt-tip
lt-icon lt-question
lt-icon lt-pen
lt-icon lt-cart
lt-icon lt-mail
lt-icon lt-comments
lt-icon lt-comment
lt-icon lt-ellipsis
lt-icon lt-heart
lt-icon lt-store
lt-icon lt-bag
lt-icon lt-camera
lt-icon lt-photo
lt-icon lt-phone
lt-icon lt-brochures
lt-icon lt-clipboard
lt-icon lt-location
lt-icon lt-bell
lt-icon lt-calendar
lt-icon lt-lock
lt-icon lt-unlock
lt-icon lt-creditcard
lt-icon lt-warning
lt-icon lt-warning-fill
lt-icon lt-item-entry
lt-icon lt-share
lt-icon lt-trash
lt-icon lt-pdf
lt-icon lt-document
lt-icon lt-print
lt-icon lt-airplane
lt-icon lt-minus (No Padding)
lt-icon lt-triangle-down (No Padding)
lt-icon lt-star (No Padding)
lt-icon lt-checkbox-checkmark (No Padding)
lt-icon lt-checkbox-on (No Padding)
lt-icon lt-checkbox-minus (No Padding)
lt-icon lt-filter

How to use

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

Don't mix with other components

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

Sizes

Sizing classes avaiable for icons: .lt-small, .lt-medium, .lt-large

Small icon

Medium icon

Large icon

Variations

Add a circular border around any icon with the .circular-icon modifier.

Examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Images must be square

The .avatar CSS will clip the circle. If image has the circle clipped from the actual image using transparent background, the .avatar background color will show around the edges of the circle. No one wants that.

Image not available

If no image is available, the person's first initial appears.
Default color is grey.
The number in the class names will make it possible for Magnolia to randomy choose a number when rendering pages and not require storing colors names for each profile.

T T T T T T T

Size options

Images must be at least 120px x 120px or the "large" size will look crappy.

T

Example

Example heading New

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

Default Primary Secondary Success Info Warning Danger

Dismissable

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

Inbox 42

Self collapsing

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

Cross-browser compatibility

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

Adapts to active nav states

Built-in styles are included for placing badges in active states in pill navigations.

Variations

Add class .badge-pill for larger badges with text that can act as dismissable 'tags'. These are very similar to labels.

Tag Another Tag

Color variations:

.badge-primary .badge-secondary .badge-success .badge-info .badge-warning .badge-danger

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

Examples

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

Use the .alert-link utility class to quickly provide matching colored links within any alert.

No default class

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

Success! This message might have a link..

Danger! This message might have a link..

Info! This message might have a link..

Warning! This message might have a link..

Oh snap! Change a few things up and try submitting again.

Strong Alerts

These only get used as "Header Level" messages (full width and just under the header). Never inline, within the page content.

Use the .alert-strong utility class to make a dark version.

Success! (strong) This message might have a link..

Danger! (strong) This message might have a link.

Info! (strong) This message might have a link.

Warning! (strong) This message might have a link.

Dismissable alerts

Build on any alert by adding an optional .alert-dismissable and close button.

Warning! Better check yourself, you're not looking too good.

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

Alerts Level

Header, Page, Section, and Inline

These are specific types of alerts used in certain situaltions and locations on the page.

All "level" alerts share the following structure. Items in { curly braces } show which features maybe be used or not depending on which "level" and options within each "level". See alert-level-template.html.twig for more details.

Header Level

Purpose

System malfunction. You cannot continue. A situation where the webpage experiences an error while calling dynamic / database-driven content.

Notes

Normally this message would be the width of the browser window. If dismissable, the header will stick to the top of the window after scrolling down. The close "X" will appear. See working example.

Use the .alert-level-header and .alert-strong utility classes.

Rules:

Place between header and content.
Headline only. No body text.

Optional:

Icon
Button
Dismissable (.alert-dismissable)

Header Level Optional button


  {% include "_includes/groups/alerts/alert-level-template.html.twig" with {
      alertIcon: 'lt-warning-fill',
      alertHeadline: 'Header Level',
      alertBody: null,
      alertBtnText: 'Optional button',
      alertClasses: 'alert-success alert-strong',
      alertLevel: 'header',
      alertDismissable: true,
      alertId: null
    } %}

Page Level

Purpose

Similar to the system malfunction scenario, but this situation can be corrected by the user.

Show a notification at the top of the page stating the error
Depending on the error, indicate where it is and what can be corrected

Notes

Normally appears below the header, at the top of the page content, and is the width of the page content. See working example.

Use the .alert-level-page.

Rules:

Place as the first element inside the page content: <section class="container container--page"></section>
Headline only. No body text.
Is not dismissable.

Optional:

Icon
Button

Page Level


  {% include "_includes/groups/alerts/alert-level-template.html.twig" with {
      alertIcon: 'lt-warning-fill',
      alertHeadline: 'Page Level',
      alertBody: null,
      alertBtnText: null,
      alertClasses: 'alert-danger',
      alertLevel: 'page',
      alertDismissable: false,
      alertId: null
    } %}

Section Level

Purpose

A situation where a self-contained section of a webpage has an error to address. Almost certainly form-based.

After the error, scroll the user to the top of the affected section.
Show a notification at the top of the section.
Indicate where the error is and what can be corrected.

See working example.

Use the .alert-level-content. Note, there is no .alert-level-section class.

Rules:

Place as the top of the "section" where the error occured.
Headline.
Is not dismissable.

Optional:

Icon
You can put any content inside body: <span class="alert-body"></span>. However, if you include a bulleted list, use this class: <ul class="alert-list"></ul>

Section level

Error 1
Error 2
Error 3


  {% include "_includes/groups/alerts/alert-level-template.html.twig" with {          
      alertIcon: 'lt-warning-fill',
      alertHeadline: 'Section level',
      alertBody: '
      <ul class="alert-list">
        <li>Error 1</li>
        <li>Error 2</li>
        <li>Error 3</li>
      </ul>',
      alertBtnText: null,
      alertClasses: 'alert-danger',
      alertLevel: 'content',
      alertDismissable: false,
      alertId: null
    } %}

Inline Level

Placed next to where the error occured. This suppliments a Section Level error.

Use the .alert-level-content. Note, there is no .alert-level-inline class.

Rules:

Place next to where the error occured.
Is not dismissable.

Optional:

Icon
Headline
You can put any content inside body: <span class="alert-body"></span>. However, if you include a bulleted list, use this class: <ul class="alert-list"></ul>

Error 1
Error 2


  {% include "_includes/groups/alerts/alert-level-template.html.twig" with {          
      alertIcon: null,
      alertHeadline: null,
      alertBody: '
      <ul class="alert-list">
        <li>Error 1</li>
        <li>Error 2</li>
      </ul>',
      alertBtnText: null,
      alertClasses: 'alert-danger',
      alertLevel: 'content',
      alertDismissable: false,
      alertId: null
    } %}

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Basic example

Default progress bar.

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

Striped

Uses a gradient to create a striped effect. Not available in IE8.

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

Stacked

Place multiple bars into the same .progress to stack them.

Segmented Radial

The segmented radial progress bar uses javascript. See here

Styleguide Elements

Colors

Colors

Customize Variables

Typography

Typography and links

Link Classes

Headings

Lorem ipsum dolor sit amet, erant dolor phaedrum. Lorem ipsum dolor sit amet, erant dolor phaedrum.