Alerts:


Badge:

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badge as part of links/buttons to provide a counter:



Contextual variations:

PrimarySecondarySuccessDangerWarningInfoLightDark

Pill badges:

PrimarySecondarySuccessDangerWarningInfoLightDark

Links:

PrimarySecondarySuccessDangerWarningInfoLightDark

Breadcrumb:


Buttons:



Button tags:

Link

Outline buttons:



Sizes:






Active state:

Primary linkLink

Disabled state:

Primary linkLink

Button plugn:

Toggle states:



Checkbox and radio buttons:





Buttons group:



Button toolbar:



Sizing:







Nesting:



Vertical bariation:


Cards:

100%x180
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Body:

This is some text within a card body.

titles, text, and links:

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card linkAnother link

Images:

Image cap [100%x180]

Some quick example text to build on the card title and make up the bulk of the card's content.


List groups:

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Kitchen sink:

Image cap [100%x180]
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Header and footer:

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Quote

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

Someone famous in Source Title

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Sizing:

Using grid markup:

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Using utilities:

Card title

With supporting text below as a natural lead-in to additional content.

Button
Card title

With supporting text below as a natural lead-in to additional content.

Button

Using custom CSS:

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Text alignment:

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Navigation:

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Images:

Images caps:
100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

100%x180

Image overlays:
100%x270
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago


Card styles:

Background and color:
Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.


Border:
Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.


Mixins utilities:
Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.


Card layout:

Card groups:
100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

100%x180
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

100%x180
Card title

This card has supporting text below as a natural lead-in to additional content.

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.


Card decks:
100%x200
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

100%x200
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

100%x200
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

100%x180
Card title

This card has supporting text below as a natural lead-in to additional content.

100%x180
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.


Card columns:
100%x160
Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

Someone famous in Source Title
100%x160
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

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

Someone famous in Source Title
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

100%x260

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

Someone famous in Source Title
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


Collapse:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Multiple targets:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Accordion example:

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.

Dropdowns:

Single button:




Split button:



Sizing:





Direction:

Dropup:


Dropright:


Dropleft:


Menu items:


Active:
Disabled:

Menu alignment:



Menu content:

Headers:
Dividers:
Text:
Forms:
Forms(alternate):

Dropdown options:


Forms:

We'll never share your email with anyone else.

Form controls:


Sizing:



Range Inputs:


Readonly:


Readonly plain text:


example 2:

Checkboxes and radios:


example 2:

Inline:



example 2:


Without labels:


Layout:

Form groups:

Form grid:

Form row

more complex example:


Horizontal form:
Radios
Checkbox

Horizontal form lavel sizing:

Coulmn sizing:

Auto-sizing:
@

Inline forms:

Help text:
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Help text smaller ver:
Must be 8-20 characters long.

Disabled forms:


Validation:

Custom styles:

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Server side:

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Custom forms:

Checkboxes and radios:

Checkboxes:

Radios:

Inline:


Disabled:
Toggles:

Select menu:


Range:


Input group:

@
@example.com
https://example.com/users/
$
.00
With textarea

Sizing:

Small
Default
Large

Checkboxes and radios:


Multiple inputs:

First and last name

Multiple addons:

$0.00
$0.00

Buttons addons:


Buttons with dropdowns:


Segmented buttons:


Custom forms:

Custom select:


Custom file input:

Upload
Upload

List group:

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

Active items:

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

Disabled items:

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

Links and buttons:

example 2:

Flush:

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

Contextual classes:

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

with action:

With badges:

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

Custom content:


JavaScript behavior:



Modal:

Modal components:

example:



Scrolling long content



Vertically centered:



Tooltips and popovers:


Using the grid:


Varying modal content:



Remove animation:


Optional size:


Navs:


Available styles:

Horizontal alignment:

Right aligned:

Vertical:

Tabs:


Pills:


Fill and justify:


example 2:

Worling with flex utilities:


Using dropdowns:

Tabs with dropdowns:

Pills with dropdowns:

JavaScript behavior:

Text 1
Text 2
Text 3

example 2:

Text 1
Text 2
Text 3

example 3:

Default text
Text 1
Text 2
Text 3

Using data attributes:

...
...
...
...

Navbar


Brand:


Adding image:


Adding image + title:


Nav


example with dropdown:


Forms:


Forms + Title:


example with input groups:


Navbar with text:


Full Navbar with text:


Color schemes:


Containers:


example 2:

Placement:

Default:

Fixed top: (hidden - comment)


Fixed bottom: (hidden - comment)


Sticky top: (hidden - comment)


Responsive behaviors:

Toggler:

With a brand name shown on the left and toggler on the right:

With a toggler on the left and brand name on the right:

External content:


Pagination:

Working with icons:


Disabled and active states:


Sizing:



Alignment:


Popovers:



Four directions:


Dismiss on next click:

Dismissible popover

Disabled elements:




Progress:


example on width:


Labels:

25%

Height:


Backgrounds:


Multiple bars:

Striped:



Animated stripes:


Scrollspy:

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda culpa delectus ducimus eaque eligendi est explicabo fuga, fugiat fugit hic impedit ipsa ipsum itaque, nam odio odit pariatur qui ratione saepe sapiente sed sit sunt tempora unde voluptas. Enim, rerum, similique! A aliquam, aperiam beatae consectetur culpa dignissimos dolore dolores eaque eligendi eum explicabo impedit laboriosam libero neque non numquam odio possimus quas quis recusandae rerum, sunt temporibus vero voluptates voluptatum. Asperiores aspernatur assumenda autem, debitis delectus distinctio eaque et, eum ex excepturi facere fugiat ipsa magni molestias nesciunt odio pariatur praesentium provident, quod ratione suscipit veniam veritatis voluptate? Praesentium?

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Example with nested nav:

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 1-1

Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.

Item 2-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.


Example with list-group:

Item 1

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 4

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.


Tooltips:



example with custom HTML added:


Markup:

Hover over me

Disabled button:



Borders:

Additive:


Subtractive:


Border color:


Border-radius:

75x7575x7575x7575x7575x7575x7575x75

Close icon:



Colors:

Color:

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50


Color (anchor example):

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link


Background color:

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Shadows:

No shadow
Small shadow
Regular shadow
Medium shadow
Large shadow
XL shadow

Sizing:

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

example 2:

Height 25%
Height 50%
Height 75%
Height 100%
Height auto

example 3:

Max-height 100%

Spacing:

Centered element

Text alignment:

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

example 2:

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.


Text wrapping and overflow

This text should overflow the parent.

example - for longer content:

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.

Text transform:

Lowercased text.

Uppercased text.

CapiTaliZed text.


Font weight and italics:

Bold text.

Normal weight text.

Light weight text.

Italic text.

Monospace:

This is in monospace


Code

// This is inline comment
/**
 * Hides dialog loader
 * @function
 * @param {integer} id - The ID of existing dialog
 * @returns {object} dialog - The dialog instance.
 */
@each $color, $value in $shadows {
  .shadow-#{$color} {
    box-shadow: $value;
  }
}

.token.atrule,
.token.builtin,
.token.important,
.token.keyword,
.token.selector {
  color: #cc99cd;
}
import Prism from 'prismjs';
import 'prismjs/components/prism-scss';

const commonDebug = false;

const tooltipOptions = (placement) => {
  const options = {
    animation: false,
    trigger: 'hover',
  };

  return options;
};

Prism.highlightAll();

Font sizes

Font size 8px

Font size 10px

Font size 12px

Font size 13px

Font size 14px

Font size 16px

Font size 18px

Font size 20px

Font size 24px

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda commodi consequatur enim libero natus, optio quaerat quis reiciendis voluptatem?
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3