Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border

Add classes to an element to remove all borders or some borders.

          
  <span class="border"></span>
  <span class="border-0"></span>
  <span class="border-top-0"></span>
  <span class="border-right-0"></span>
  <span class="border-bottom-0"></span>
  <span class="border-left-0"></span>

Border color

Change the border color using utilities built on our theme colors.

          
  <span class="border border-primary"></span>
  <span class="border border-secondary"></span>
  <span class="border border-success"></span>
  <span class="border border-info"></span>
  <span class="border border-warning"></span>
  <span class="border border-danger"></span>
  <span class="border border-light"></span>
  <span class="border border-dark"></span>

Border-radius

Add classes to an element to easily round its corners.

          
  <img src="..." alt="..." class="rounded">
  <img src="..." alt="..." class="rounded-top">
  <img src="..." alt="..." class="rounded-right">
  <img src="..." alt="..." class="rounded-bottom">
  <img src="..." alt="..." class="rounded-left">
  <img src="..." alt="..." class="rounded-circle">
  <img src="..." alt="..." class="rounded-0">

Breakpoints

xs:
0
sm:
576px
md:
768px
lg:
992px
xl:
1200px

iPhone Portrait: 320px
Galaxy Nexus Portrait: 360px
iPhone 6 Portrait: 375px
iPhone 6 Plus Portrait: 414px
Galaxy Note 3 Portrait: 540px
iPhone Landscape: 568px
Google Nexus 7 Portrait: 604px
Galaxy Nexus Landscape: 640px
iPhone 6 Landscape: 667px
iPhone 6 Plus Landscape: 738px
iPad Portrait: 768px
Galaxy Note 3 Landscape: 960px
Google Nexus 7 Landscape: 966px
iPad Landscape: 1024px
11" MacBook Air: 1366px
13" MacBook Air: 1440px
21.5" iMac: 1980px

To add or change these items, override Bootstrap's $grid-breakpoints inside _variables.scss

See Bootstrap's docs for more.

Colors

To add to these items, add and override colors in _colors.scss:$theme-colors(). See Bootstrap's docs for more.

rgb(46, 51, 68)

primary

Usage:

$theme-colors(primary);

Luminance: 51.1644

rgb(83, 97, 144)

secondary

Usage:

$theme-colors(secondary);

Luminance: 97.417

rgb(82, 144, 139)

success

Usage:

$theme-colors(success);

Luminance: 130.4578

rgb(45, 115, 170)

info

Usage:

$theme-colors(info);

Luminance: 104.089

rgb(195, 187, 74)

warning

Usage:

$theme-colors(warning);

Luminance: 180.5422

rgb(119, 69, 67)

danger

Usage:

$theme-colors(danger);

Luminance: 79.4856

rgb(248, 249, 250)

light

Usage:

$theme-colors(light);

Luminance: 248.8596

rgb(34, 38, 51)

dark

Usage:

$theme-colors(dark);

Luminance: 38.0882

Text Color

Colors can also be used with text classes. _colors.scss:$theme-colors() is again the go-to here. text-white and text-black are available by default.

text-primary: <p class="text-primary">text-primary </p>

text-secondary: <p class="text-secondary">text-secondary </p>

text-success: <p class="text-success">text-success </p>

text-info: <p class="text-info">text-info </p>

text-warning: <p class="text-warning">text-warning </p>

text-danger: <p class="text-danger">text-danger </p>

text-light: <p class="text-light">text-light </p>

text-dark: <p class="text-dark">text-dark </p>

Background Colors

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

bg-primary:
<div class="bg-primary"></div>

bg-secondary:
<div class="bg-secondary"></div>

bg-success:
<div class="bg-success"></div>

bg-info:
<div class="bg-info"></div>

bg-warning:
<div class="bg-warning"></div>

bg-danger:
<div class="bg-danger"></div>

bg-light:
<div class="bg-light"></div>

bg-dark:
<div class="bg-dark"></div>

spacing

▼

Spacing

To add to these items, adjust $spacing() in _variables.scss

5px : $spacing(s)

25px : $spacing(m)

50px : $spacing(l)

tables

▼

Tables

Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.

Examples

Basic

Quickly create a table style with the .table class as <table class="table">.

This caption example was created with `<caption></caption>`.
#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

Dark Basic

As easy as adding the table-dark class to the table as <table class="table-dark">!

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

Table Head Options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark in your <thead> for a light or dark gray appearance. For example, <thead class="thead-dark"> or <thead class="thead-light">.

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

Striped Rows

Use the .table-striped class with basic or dark tables to add zebra-striping to any table. <table class="table table-striped"> or <table class="table table-dark table-striped">

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

Bordered table

Add .table-bordered for borders on all sides of the table and cells. Available for both basic and dark tables. <table class="table table-bordered"> or <table class="table table-dark table-bordered">

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>. <table class="table table-hover"> or <table class="table table-dark table-hover">

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

Small table

Add .table-sm to make tables more compact by cutting cell padding in half. <table class="table table-sm"> or <table class="table table-dark table-sm">

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

#	First Name	Last Name	Username
1	Antone	Baumbach	@eveniet
2	Arne	Orn	@magnam
3	Delfina	Larkin	@nostrum

Contextual classes

Use contextual classes to color table rows or individual cells.

Type	Row Code	Cell Code
primary	`<tr class="table-primary">...</tr>`	`<td class="table-primary">...</td>`
secondary	`<tr class="table-secondary">...</tr>`	`<td class="table-secondary">...</td>`
success	`<tr class="table-success">...</tr>`	`<td class="table-success">...</td>`
info	`<tr class="table-info">...</tr>`	`<td class="table-info">...</td>`
warning	`<tr class="table-warning">...</tr>`	`<td class="table-warning">...</td>`
danger	`<tr class="table-danger">...</tr>`	`<td class="table-danger">...</td>`
light	`<tr class="table-light">...</tr>`	`<td class="table-light">...</td>`
dark	`<tr class="table-dark">...</tr>`	`<td class="table-dark">...</td>`

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

Type	Row Code	Cell Code
primary	`<tr class="bg-primary">...</tr>`	`<td class="bg-primary">...</td>`
secondary	`<tr class="bg-secondary">...</tr>`	`<td class="bg-secondary">...</td>`
success	`<tr class="bg-success">...</tr>`	`<td class="bg-success">...</td>`
info	`<tr class="bg-info">...</tr>`	`<td class="bg-info">...</td>`
warning	`<tr class="bg-warning">...</tr>`	`<td class="bg-warning">...</td>`
danger	`<tr class="bg-danger">...</tr>`	`<td class="bg-danger">...</td>`
light	`<tr class="bg-light">...</tr>`	`<td class="bg-light">...</td>`
dark	`<tr class="bg-dark">...</tr>`	`<td class="bg-dark">...</td>`

type

▼

Font Families

Font families can be added via _type.scss and imported to this list via styleguide/_scss2json.scss.

Family: $font-family-base

Fonts: Noto Sans JP, -apple-system, BlinkMacSystemFont, Array, Roboto, Array, Arial, sans-serif, Array, Array, Array

            
  .class {
    font-family: $font-family-base;
  }

Regular

Qui quibusdam sapiente dolorem veritatis fuga.

Bold

Qui quibusdam sapiente dolorem veritatis fuga.

Italic

Qui quibusdam sapiente dolorem veritatis fuga.

Family: $font-family-monospaceFonts: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

            
  .class {
    font-family: $font-family-monospace;
  }

Regular

Qui quibusdam sapiente dolorem veritatis fuga.

Bold

Qui quibusdam sapiente dolorem veritatis fuga.

Italic

Qui quibusdam sapiente dolorem veritatis fuga.

Font Sizes

Font sizes can be added via _type.scss and imported to this list via styleguide/_scss2json.scss.

Sm: 0.875rem

officia a maiores eius veritatis fuga non

Lg: 1.25rem

officia a maiores eius veritatis fuga non

Base: 1rem

officia a maiores eius veritatis fuga non

Headings

These are heading styles, including both element and classed version. Use the element version in markup following Accessibility guidelines. Use the class version to match font styling of heading. See WebAim for details.

Header	Code
fugiat nihil voluptatem	`<h1 contenteditable>h1. fugiat nihil voluptatem</h1>`
fugiat nihil voluptatem	`<h2 contenteditable>h1. fugiat nihil voluptatem</h2>`
fugiat nihil voluptatem	`<h3 contenteditable>h1. fugiat nihil voluptatem</h3>`
fugiat nihil voluptatem	`<h4 contenteditable>h1. fugiat nihil voluptatem</h4>`
fugiat nihil voluptatem	`<h5 contenteditable>h1. fugiat nihil voluptatem</h5>`
fugiat nihil voluptatem	`<h6 contenteditable>h1. fugiat nihil voluptatem</h6>`

You can use these as either the element or as a class. For example:

Paragraph	Code
fugiat nihil voluptatem	`<p class="h1">p1. fugiat nihil voluptatem</p>`
fugiat nihil voluptatem	`<p class="h2">p2. fugiat nihil voluptatem</p>`
fugiat nihil voluptatem	`<p class="h3">p3. fugiat nihil voluptatem</p>`
fugiat nihil voluptatem	`<p class="h4">p4. fugiat nihil voluptatem</p>`
fugiat nihil voluptatem	`<p class="h5">p5. fugiat nihil voluptatem</p>`
fugiat nihil voluptatem	`<p class="h6">p6. fugiat nihil voluptatem</p>`

Display headings

Bootstrap style for larger headlines. For example:

Display Heading	Code
maiores atque	`<h1 class="display-1">maiores atque</h1>`
maiores atque	`<h1 class="display-2">maiores atque</h1>`
maiores atque	`<h1 class="display-3">maiores atque</h1>`
maiores atque	`<h1 class="display-4">maiores atque</h1>`

Text Styles

Lead

A paragraph p class to help text standout. Ut eum autem aperiam debitis iste adipisci nemo dolorem. Adipisci placeat ut voluptatem at laborum.

          
  <p class="lead">
    Qui quibusdam sapiente dolorem veritatis fuga.
  </p>

Paragraphs

Paragraph One Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Paragraph Two after an hr Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header + Paragraphs

Header 1

Paragraph following an h1Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 2

Paragraph following an h2Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 3

Paragraph following an h3Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 4

Paragraph following an h4Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 5

Paragraph following an h5Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Header 6

Paragraph following an h6Tenetur consequatur quisquam cum illo eligendi dolores eaque fugit. Unde et sunt velit eos asperiores ipsa. Eligendi qui dolores modi tempora. Qui eos et sit sit voluptatem quasi. Est nam vitae impedit nisi quisquam accusamus. Harum vel nihil non dicta in.

Misc

This is a text link.

Italic text is used for stylistic purposes in i

This text has added emphasis in em

Bolded text is used for stylistic purposes in b

Strong is used to indicate strong importance in strong

This text is ^superscript

This text is _subscript

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Lists

This is a list item in an Unordered List
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

This is a list item in an Ordered List
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

Definition List: A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.: This is the definition of that term, which both live in a dl.
Here is another term.: And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.: And it gets a definition too, which is this line.

welcome

▼

株式会社メタ・インフォ

スタイルガイド

alerts

▼

Success!

These alerts are a useful way to call attention to pieces of content you want to highlight. The type is altered in the component match for Bootstrap. For example, this is a status message that gets success styling!

They even have useful footer areas for more info! Footers can be overridden if you don't want them!

Warning!

A nice little warning message. We're not too serious. By default our messages set aria-live="polite"

Error! Danger!

Okay, not really any big deal because we planned it. We're setting role="alert" to get some extra attention!

Informational message!

We can add messages of several kinds! We're not limited to what Drupal provides. See the background classes for additional ideas!

Did you know you can click the x to dismiss these messages?

With a close button

These alerts are a useful way to call attention to pieces of content you want to highlight. The type is altered in the component match for Bootstrap. For example, this is a status message that gets success styling!

badges

▼

Badges

Documentation and examples for badges, our small count and labeling component.

More Info

Badge Sizes

Note: Badges scale to match the size of the immediate parent element

Badge

Badge Button

Badge Colors

primary secondary success info warning danger light dark

Pill Badges

primary secondary success info warning danger light dark

Badge Links

primary secondary success info warning danger light dark

brandings

▼

Branding Examples

Different applications of a branding block.

breadcrumbs

▼

Breadcrumbs

Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. Breadcrumbs take an array and render each as a list item. You can set the items in breadcrumbs.yml. Separators are automatically added in CSS through ::before and ::content.

buttons

▼

Buttons

Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

More Info

Button colors

Button outline

Button elements

Link

Button size

Button block

Button state

Button toggle

dropdowns

▼

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

More Info

Basic Dropdown

<a> element dropdown

Colors

Split Button Drop Down

Sizing

Dropup

Note: Menus will automatically dropup if there is not enough room at the bottom of the page for them to dropdown

Menu Items

Note: Historically dropdown menu contents had to be links, but that’s no longer the case with Bootstrap v4. Now you can optionally use <button> elements in your dropdowns instead of just <a>s.

Menu alignment

In-menu options

Menu forms

grid demo

▼

Grid Demo

Grids are exceptionally documented. Encourage reading the grid docs on Bootstrap. Basics: Wrap content in a container. See Layout Demo for info on containers. Rows are wrappers for columns via the .row class. Use col- classes to size your columns between 1 - 12, ex.

One column

Two columns

Three columns

Four columns

layout demo

▼

Layout Demo

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time). While containers can be nested, most layouts do not require a nested container.

While nesting containers is possible, it's not recommended. See Bootstrap for usage details.

Container Standard

Use .container for the standard version. Padding is set as an expression of $grid-gutter-width / 2.

Container Fluid

Use .container-fluid for a full width container, spanning the entire width of the viewport.

Container in Container Fluid

icons

▼

Icons

Use

An icon font is generated from all SVGs within the folder @atoms/icon/svg/. Simply add the icon--name class to any element to add an icon. For instance, if there is a search.svg within the svg folder, you can add a search icon like this: <i class="icon--search"></i> which will result in: .

A Sass mixin is also provided that gives greater flexibility. To add a search icon as a pseudo element to any element, simply @include icon(search);. Besides icon name, this mixin includes parameters for pseudo position, text-replacement, size, color, and block display. See @atoms/icon/scss/_icon-mixins.scss for more detail.

Considerations

It is recommended that all SVGs be on the same size canvas (512px x 512px). All glyphs are scaled up to the size of the largest glyph otherwise.
Adding new SVGs to the folder requires restarting the webpack dev server.
Font icons inherit the color of their parent text.
The generated font named iconfont will be base64 inlined into the output CSS.

chevron-down

chevron-left

chevron-right

chevron-up

close

menu

person

search

Font Awesome

Font Awesome icons are also available for use inside patterns.

These can be easily added to inline elements (we recommend using span or i tags) with two classes: fa and fa-icon-name.

Font awesome icons can also be implemented in Sass, in just two lines: @include fa-icon(); content: $fa-icon-name;

See _icon.scss for an example of how the Sass approach works.

There are currently 675 icons available from Font Awesome, sky's the limit.

fa fa-battery-full

fa fa-moon-o

fa fa-medkit

@include fa-icon();content: $fa-var-train;

@include fa-icon();content: $fa-var-compass;

@include fa-icon();content: $fa-var-apple;

image img

▼

SVG (in pattern)

PNG (demo-only)

image inline

▼

Inline SVG

Grab and inline any svg within source by passing its namespace'd path. For instance: @atoms/icon/svg/person.svg:

Or @atoms/image/logo.svg:

image styles

▼

Image styles

list groups

▼

List Group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Every example is using at least the item_text variable. Because of how many classes can be applied to each list item, item_classes is an empty array for the user to put their classes in.

Basic Examples

This shows a basic list group and how individual list items' color can be changed by adding list-group-item-(color) to the item_classes variable

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

Porta ac consectetur ac
Dapibus ac facilisis in
Porta ac consectetur ac
Cras justo odio
Vestibulum at eros
Cras justo odio
Dapibus ac facilisis in
Cras justo odio

Active and Disabled Items

Add the active class to a list-item to indicate the current active selection. Add the disabled class to a list-item to make it appear disabled. Add the action class to make the list-item change on hover

Active Items

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

Disabled Items

Porta ac consectetur ac
Dapibus ac facilisis in
Morbi leo risus
Morbi leo risus
Morbi leo risus

Action

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

Other elements

Lists are usually made of li tags, but they can be made of div, a, and button tags as well

Link List

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Porta ac consectetur ac

Vestibulum at eros

Button

Adding Elements

List items can contain things like badges and custom html. The badges are using several utility classes to display correctly including list-group-item-warning, justify-content-between, d-flex, align-items-center

Badges

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

Custom HTML

List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
List group item heading
3 days ago

Donec 8id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
List group item heading
3 days ago

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

Toggleable Items

List items can use the tab Javascript plugin to allow list group to create tabbable panes of content. You can activate a list group navigation without writing any JavaScript by simply specifying data-toggle="list" or on an element. Use these data attributes on .list-group-item.

To make tabs panel fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.

More Info

Toggleable

Home Profile Messages Settings

This is home content!

This is profile content!

This is messages content!

This is settings content!

banner

▼

cards

▼

Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Each card has at least the card_title and card_text variables in use and will have a card like this one above it explaining the other variables it is using. Also, each row is demonstrating a different feature of the bootstrap grid system.

Text

Variables: card_subtitle, text_alignment, card_link, card_link_text, text_color, card_flush

Grid: This row is using the standard hand-coded class="col-sm" bootstrap system

More Info

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 Title

Card subtitle

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

Card link

Card Title

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

Grid: This row uses the pattern lab "grid-3" atom located in source/_patterns/01-atoms/grid

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 Title

Card subtitle

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

Card link

Card Title

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

Width

Variables: card_width

Grid: This row is occupying the whole container by using the col-sm-12 class.

More Info

Card Title

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

Card Title

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

Card Title

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

Image

Variables: card_image, card_image_location, card_image_overlay

Grid: This row is using the card-deck class which is unique to cards. It sets all of its cards to an equal width and height.

More Info

Card Title

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

Card Title

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

Card Title

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

Structure

Variables: card_header, card_footer, button_text, button_color, card_list

Grid: This row is using the card-group class which is unique to cards. It renders cards as a single, attached element with equal width and height columns.

More Info

Header

Card Title

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

Card Title

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

Footer

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

Background and Border

Variables: card_background, card_border

Grid: This row is using the card-columns class which is unique to cards. It renders cards in the optimal position based on vertical space.

More Info

Card Title

These cards have variable body length

Card Title

In order to show off bootstrap's column functionality

Card Title

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

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet facilisis erat. Suspendisse ultrices sed massa a faucibus. Vivamus scelerisque eleifend dui, ut consectetur tellus rutrum in. Nullam lobortis, ex vel rutrum volutpat, magna eros tristique nisi, quis bibendum urna erat consequat sapien.

Card Title

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

Card Title

I'm using a lot of extra words and characters in this sentence to make sure it takes at least three lines!

Card Title

This card takes two lines. Oops, not quite enough characters, heres some more.

Card Title

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

Variation

This example card uses twig's block system to override the provided default body template with new elements

First Title

Second Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet facilisis erat. Suspendisse ultrices sed massa a faucibus.

carousels

▼

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Carousel in Pattern Lab

Please note that clicking carousel control arrows skips page down to that element due to the Pattern Lab iFrame. To see the Carousel outside of the iFrame, either click the gear icon at the top right of the page and select "Open in New Window" or right-click the control and select "open in new tab."

Slides Only

Here’s a carousel with slides only. The .active class must be on at least one item initially to show.

With Controls

Adding in the previous and next controls:

With Indicators

You can also add the indicators to the carousel, alongside the controls, too.

With Captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

example widgets

▼

Example Widget

jumbotrons

▼

this is a pretitle text.

Hello, world!

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

It uses utility classes for typography and spacing to space content out within the larger container.

Fluid Jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

this is a pretitle text.

Dark Jumbotron

This is a dark jumbotron.

this is a pretitle text.

Image Jumbotron

This is a image jumbotron.

this is a pretitle text.

Image Jumbotron width overlay

This is a jumbotron width ovarlay.

The Jumbotron is fairly basic. Use the jumbotron_fluid boolean variable to manage the type. You can adjust the default background color and padding via Bootstrap variables in the _jumbotron.scss file via $jumbotron-padding and $jumbotron-bg.

navs

▼

Navs

Documentation and examples for how to use Bootstrap's included navigation components.

More Info

Horizontal Alignment

Vertical Alignment

Tabs

Pills

Fill

Justify

Responsive nav

Dropdown

Javascript Tabs

This is home content!

This is profile content!

This is contact content!

paginations

▼

Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

Default

This is the default pagination. A list of links to the pages available.

Icons

Optionally use icons in place of Previous and Next. Be sure to provide proper screen reader support with aria attributes and the .sr-only utility.

Sizes

Optionally set the size with pagination_size to either sm or lg.

Small

Large

accordions

▼

Accordion

Accordions make usee of Bootstrap's Collapse with the card component. Default collapse behavior is extended to create an accordion.

Collapsible Group Item #1

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.

Collapsible Group Item #2

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.

Collapsible Group Item #3

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.

articles

▼

Article Demonstration

A simple demonstration of an article within our grid and 1 column. It uses several Bootstrap components, such as an image floated right, a list of tags using list-inline-item and a blockquote footer to display author and date information.

Lucidus

Cogo haero jus pala patria proprius turpis valde wisi. Eu feugiat laoreet si usitas valde vulputate. Bene dolus gilvus hos pala quibus ulciscor voco. Ad camur incassum ymo.

Caecus esca iustum lobortis nimis quibus uxor. Aliquip aptent conventio illum singularis turpis ullamcorper validus. Appellatio illum luptatum secundum suscipere. Amet dolor duis esca pecus plaga verto. Brevitas caecus huic melior modo nibh nunc. Aptent at bene exputo loquor os. Aliquam cui diam esse ideo melior minim premo quis vicis. Abdo accumsan autem. Cui jugis quia tincidunt. Appellatio nibh quidne uxor.

Cui incassum loquor paratus ratis refero uxor volutpat. Adipiscing consequat enim erat imputo magna neque probo rusticus secundum. Augue commodo consequat conventio dolor elit minim molior similis torqueo. Et gemino interdico nutus praesent probo scisco tamen utrum. Amet feugiat odio pneum quidem sagaciter voco. Hendrerit minim quibus si.

Haero lobortis odio proprius. Exputo incassum iriure. Similis validus vel. Acsi eligo eros eum exerci feugiat haero huic oppeto quadrum. Capto luctus ludus neo quis sit ulciscor.

Consequat dignissim genitus oppeto. Laoreet luctus os proprius sino sit tation utrum. Commoveo interdico melior oppeto ratis tincidunt. Capto minim natu ulciscor usitas. Molior sudo ut veniam. Abluo aliquip cogo gilvus modo quae ratis singularis ullamcorper vereor.

Blandit cui hos mauris. Causa elit esse et paulatim. Abdo cogo dolor enim inhibeo ludus mauris saluto vindico. Commoveo distineo esse gravis ille lobortis occuro oppeto ulciscor veniam.

Camur ea elit facilisis haero interdico loquor venio. Accumsan antehabeo decet imputo os. Aptent esse eu hos luctus nobis similis ullamcorper. Appellatio comis damnum ibidem praesent quia quis verto. Aptent damnum duis esca ibidem ludus nulla pneum velit venio. Abigo at eum meus pertineo ratis secundum ulciscor volutpat vulputate. Conventio cui ea exputo inhibeo iriure magna mauris neque ratis.

Conventio damnum eros pala pertineo velit verto. Adipiscing eum jus pertineo tum turpis ulciscor ullamcorper vereor volutpat. Genitus importunus lenis modo natu nimis nunc populus te.

Singularis sit torqueo tum validus. Fere quis vindico. Duis iusto occuro paratus qui scisco valetudo. Abdo decet dolor ea erat ex nulla ratis vel veniam. Blandit diam duis exerci proprius quidne tation venio vindico. Abbas aliquam commodo iaceo pagus quis sed tego. Feugiat pala sagaciter turpis ullamcorper vero. Ibidem neo ullamcorper vereor. Ad amet camur consectetuer dolor facilisis feugiat ideo quibus.

Dolore erat huic iusto melior pneum. Gemino quibus singularis. Bene comis obruo quis wisi. Hendrerit illum imputo lucidus olim os. Ex natu tamen. Diam dolor inhibeo lenis macto mauris validus. Acsi pagus pala paratus pecus quis sed sudo.

Brevitas commoveo jus. Accumsan commoveo hos imputo molior odio proprius te. Caecus luctus neque nutus paratus. Brevitas capto euismod ex jus ludus mauris mos tego wisi.

Antehabeo appellatio humo interdico olim os qui. Aptent dolor gravis melior oppeto si veniam vindico. Imputo secundum singularis sit voco. Acsi cui ille lucidus molior praemitto qui quidne tamen. Euismod nulla plaga virtus. Accumsan acsi dolore et euismod quis. Caecus et lobortis tamen. Abico blandit diam huic plaga ratis similis velit veniam. Cogo patria refero.

Tags:

Submitted by Joe P. Author on 11/19/2017 - 08:30

card grids

▼

Card Grids Demonstration

This is for demonstration purposes only to show cards within a Grid. See code for usage examples within individual apps.

Mos Nisl

Augue decet meus os. Duis sino suscipit utinam. Caecus commoveo defui luptatum macto sagaciter uxor vereor vulputate. Aptent decet nunc torqueo turpis ut.

Lucidus

Cogo haero jus pala patria proprius turpis valde wisi. Eu feugiat laoreet si usitas valde vulputate. Bene dolus gilvus hos pala quibus ulciscor voco. Ad camur incassum ymo.

Os

Antehabeo eligo ille laoreet sit ulciscor utrum. Causa damnum dignissim ea patria. Diam enim hos jumentum pagus quis roto typicus usitas.

Abbas Qui

Aptent blandit dolore veniam. Ad commodo decet distineo eum feugiat magna nostrud ratis sit. Imputo inhibeo suscipit. Abbas gemino quis. Abdo cui hendrerit oppeto pneum quae quidem velit vindico.

Interdico

Fere loquor luptatum nunc secundum suscipit typicus vel vulpes. Nobis qui secundum tamen. Blandit defui fere gilvus pala plaga sit tamen utrum. Eum exputo illum imputo neque quadrum vereor.

footer

▼

navbars

▼

Navbar

Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

More Info

section-header

▼

quia est

article