DMS

Details: By Super User; Category: Awesome Styles; 06 April 2020

Heading Text

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text

h6. Heading Secondary text

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

Example body text

This is a lead paragraph.
Make a paragraph stand out by adding .lead.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

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.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Address

Company Name
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
P: (123) 456-7890

This email address is being protected from spambots. You need JavaScript enabled to view it.

Emphasis classes

This is a .mute paragraph.

This is a .text-primary paragraph.

This is a .text-warning paragraph.

This is a .text-danger paragraph.

This is a .text-success paragraph.

This is a .text-info paragraph.

Alignment classes

This is a left aligned text .text-left

This is a center aligned text .text-center

This is a right aligned text .text-right

This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify class.

This is a <blockquote> in a <.well>.
Quote's author in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote's author in Source Title

Link Button Styles

button outline inverse

Link as orange button

Link as red button

Link as orange button

Link as red button

Link as cyan button

Link as violet button

Link as cyan button

Link as violet button

Usage: <a class="link-button button-xxx">This is link text.</a>, where xxx is the button color name selected from: light, dark, green, orange, blue and red.

If you want to use the round-corner button, please use <a class="link-button button-xxx border-radius-x">This is link text.</a>.

If you want to use the button outline, please use <a class="link-button button-+++">This is link text.</a>, where +++ is the button outline selected from: outline and outline-inverse

Example: <a class="link-button button-orange">See plans & pricing.</a>

Combination of Button and Icon Styles

Light button & Home icon

Dark button & Calendar icon

Blue button & Mail icon

Green button & Image icon

Pink button &amp User icon

Red button & Star icon

Cyan button &amp Selection icon

Violet button & Search icon

Usage: <a class="link-button button-xxx">This is link text.</a>, where xxx and yyy are button color and icon names respectively.

Example: <a class="link-button button-green">Add to cart.</a>

Number list styles

Blue Bullet number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Green Bullet number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Violet Bullet number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Orange Bullet number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Red Bullet number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Grey Bullet number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Blue Digit number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Green Digit number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Violet Digit number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Orange Digit number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Red Digit number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Grey Digit number list

1Lorem ipsum dolor sit amet
2Consetetur sadipscing elitr
3Sed diam voluptua

Brand Colors

#428bca: Brand Primary

#fc615d: Brand Secondary

#f0ad4e: Brand Warning

#d9534f: Brand Danger

#5bc0de: Brand Info

#5cb85c: Brand Success

Grayscale Levels

#222222: Gray Darker

#333333: Gray Dark

#555555: Gray

#999999: Gray Light

#eeeeee: Gray Lighter

#f7f7f7: Gray Lightest

Normal Button Primary Button Success Button

Warning Button Danger Button Info Button

Tabs

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

Vertical Menus

Inputs

Input success

Input error

Input warning

Disabled input

Sample Basic Form

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

Primary Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Call to Action

Alerts and Notifications

Success! You successfully read this alert message.

Warning! You successfully read this alert message.

Danger! You successfully read this alert message.

Info! You successfully read this alert message.

Badges

Labels

Default Primary Success Info Warning Danger

List groups

14 Cras justo odio
2 Dapibus ac facilisis in
Morbi leo risus
1 Morbi leo risus
2 Dapibus ac facilisis in

9 Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus.

List group item heading

Donec id elit non mi porta gravida at eget metus.

Panels

Panel heading

Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Wells

Look, I'm in a small well!

Look, I'm in a well!

Look, I'm in a large well!

Details: By Super User; Category: Awesome Styles; 06 April 2020