DLIFLC Harmony Design System

Overview

The Defense Language Institute Foreign Language Center Brand Guide was developed to ensure a shared visual experience that reinforces DLIFLC’s identity and the core priorities that are the key elements of the brand.

The foundation of the institute's brand is the DLIFLC Mission Statement:
The DLIFLC mission is to provide the highest quality culturally based foreign language education, training and evaluation to enhance the national security of the United States; and, as an Associate of Arts Degree and certificate granting Institution, DLIFLC is wholly committed to student service member success.


Harmony's Objective

The purpose of this guide is to ensure that no matter how people engage with the DLIFLC – on the website, via email or U.S. mail, through social media, livestream broadcasts or photographs – they are left with an impression that accurately reflects the institute’s brand identity, mission and values.


Values

Commitment

We are committed to our students, employees, stakeholders, life-long learning and institutional excellence.

Adaptability

We promote flexibility and drive innovative change as individuals and as an institution.

Integrity

We expect personal and professional integrity.

Respect

We honor our cultural and social diversity by treating others with dignity and respect.

The Institute shares the DLIFLC story daily through official statements and a variety of informational products, engaging with many audiences around the world. Communicators should refer to this guide for correct use of the DLIFLC brand in all communications from inception to production and delivery, in all media.

Theme Color Choices

Color palette based on options below. Click to select theme to then view how theme colors are applied to the components.

$dliflc-purple or $primary
#470A68
rgba(71, 10, 104, .9)
$gloss-blue
#3478BD
rgba(52, 120, 189, .9)
$dliflc-teal
#115E67
rgba(17, 94, 103, .9)
$grotto-blue
#6AAEAA
rgba(106, 174, 170, .9)
$mintleaf
#789D4A
rgba(120, 157, 74, .9)
$dliflc-orange
#ED8B00
rgba(237, 139, 0, .9)
$hs2-orange
#D35E13
rgb(211, 94, 19, .9)
$default
#171717
rgba(71, 10, 104, .9)

Functions and Interactions

Add one of the 7 color SCSS classnames to body or section wrapper element in HTML. (This is in addition to any existing 'non-theme' related classes already present) 
<body class="dliflc-purple"> or <body class="primary">
<body class="gloss-blue">
<body class="dliflc-teal">
<body class="grotto-blue">
<body class="mintleaf">
<body class="dliflc-orange">
<body class="hs2-orange">

Typography

Paragraph Styles

Normal Body and Paragraph - (Open Sans @ 16px)html, body, p, p.normal

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Large Paragraph - (Open Sans @ 19px)p.large

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Reduced Paragraph - (Open Sans @ 14px)p.reduced

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

X-Small Paragraph - (Open Sans @ 12px)p.xsmall

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Heading Styles

Headlines H1(Open Sans @ 2.4em)h1, .h1

Headline 1 (default)

Headline 1 - .light

Headline 1 - .text-primary

Headline 1 - .text-gray

Headlines H2(Open Sans @ 1.9em)h2, .h2

Headline 2 (default)

Headline 2 - .text-primary

Headline 2 - .text-gray

Headlines H3(Open Sans @ 1.5em)h3, .h3

Headline 3 (default)

Headlines H4(Open Sans @ 1.3em)h4, .h4

Headline 4 (default)

Headlines H5(Open Sans @ 1.2em)h5, .h5

Headline 5 (default)

Headlines H6(Open Sans @ 1em)h6, .h6

Headline 6 (default)

Styled & Special Typography

Bold text(Open Sans:700)b, strong, .strong

Bold text.

Subtitle 1(Open Sans @ 18px).subtitle-1

Subtitle 1

Subtitle 2(Open Sans @ 14px).subtitle-2

Subtitle 2

Bullet List.bullet
  • Because we use more non-bullet lists than with bullets, we use "list-style-type:none" as default.
  • Add class ".bullet" to <ul> to revert and display "list-style-type:disc".
Caption(Open Sans @ 12px).caption

Caption

Overline(Open Sans @ 10px).overline

Overline

News Heading(Crimson Text @ 27px/18px).news

News Heading

News copy

Display Heading Styles

Display Heading 1(Open Sans @ 5em).display-1

Display 1 (default)

Display 1 - .bold

Display 1 - .text-primary

Display 1 - .text-gray

Display Heading 2(Open Sans @ 3em).display-2

Display 2 (default)

Display 2 - .bold

Display 2 - .text-primary

Display 2 - .text-gray

Display Heading 3(Open Sans @ 2.5em).display-3

Display 3 (default)

Display 3 - .bold

Display 3 - .text-primary

Display 3 - .text-gray

Functions and Interactions

| Bootstrap Documentation
Manually copy html from code block below 
<!-- Body and paragraphs -->
<p>Normal body and paragraph</p>
<p class="large">Large paragraph</p>
<p class="reduced">Reduced paragraph</p>
<p class="xsmall">X-Small paragraph</p>

<!-- Special Typography -->
<p class="strong">Bold text.</p>
<p class="subtitle-1">Subtitle 1</p>
<p class="subtitle-2">Subtitle 2</p>
<ul>
	<li>DEFAULT BULLET LIST - NO CLASS</li>
	<li>Default bullet list is without bullet symbol</li>
</ul>
<ul class="bullet">
	<li>Because we use more non-bullet lists than with bullets, we use "list-style-type:none" as default.</li>
	<li>Add class ".bullet" to <ul> to revert and display "list-style-type:disc".</li>
</ul>
<p class="caption">Caption</p>
<p class="overline">Overline</p>
<p class="h4 news">News Heading</p>
<p class="news">News copy</p>

<!-- Headings -->
<h1>Headline 1 (Default)</h1>
<h1 class="light">Headline 1 (light)</h1>
<h1 class="text-primary">Headline 1 (text-primary)</h1>
<h1 class="text-gray">Headline 1 (text-gray)</h1>

<h2>Headline 2 (Default)</h2>
<h2 class="text-primary">Headline 2 (text-primary)</h2>
<h2 class="text-gray">Headline 2 (text-gray)</h2>

<h3>Headline 3 (Default)</h3>

<h4>Headline 4 (Default)</h4>

<h5>Headline 5 (Default)</h5>

<h6>Headline 6 (Default)</h6>

<!-- Special Styles & Typography -->
<p class="strong">Bold text</p>
<p class="subtitle-1">Subtitle 1</p>
<p class="subtitle-2">Subtitle 2</p>
<p class="caption">Caption</p>
<p class="overline">Overline</p>
<p class="news">News Heading</p>

<!-- Display Text -->
<p class="display-1">Display 1 (Default)</p>
<p class="display-1 bold">Display 1 (bold)</p>
<p class="display-1 text-primary">Display 1 (text-primary)</p>
<p class="display-1 text-gray">Display 1 (text-gray)</p>

<p class="display-2">Display 2 (Default)</p>
<p class="display-2 bold">Display 2 (bold)</p>
<p class="display-2 text-primary">Display 2 (text-primary)</p>
<p class="display-2 text-gray">Display 2 (text-gray)</p>

<p class="display-3">Display 3 (Default)</p>
<p class="display-3 bold">Display 3 (bold)</p>
<p class="display-3 text-primary">Display 3 (text-primary)</p>
<p class="display-3 text-gray">Display 3 (text-gray)</p>

Official DLIFLC Branding Colors

Primary Color Palette

$dliflc-purple or $primary
#470A68
rgba(71, 10, 104, .9)
$black-80 or $alt
#333333
rgba(51, 51, 51, .9)
$white
#FFFFFF
rgba(255, 255, 255, .9)

Alt Color Palette

$dliflc-teal
#115E67
rgba(17, 94, 103, .9)
$grotto-blue
#6AAEAA
rgba(106, 174, 170, .9)
$black-3
#F7F7F7
rgba(247, 247, 247, .9)
$black-5
#F2F2F2
rgba(242, 242, 242, .9)
$black-10
#E5E5E5
rgba(229, 229, 229, .9)
$black-50
#808080
rgba(128, 128, 128, .9)
$black-70
#4D4D4D
rgba(77, 77, 77, .9)
$black-90
#1A1A1A
rgba(26, 26, 26, .9)

Tertiary Color Palette

$pop-purple
#5F259F
rgba(95, 37, 159, .9)
$mintleaf
#789D4A
rgba(120, 157, 74, .9)
$dliflc-green
#4A773C
rgba(74, 119, 60, .9)
$lt-yellow
#F6BE00
rgba(246, 190, 0, .9)
$dliflc-yellow
#F2A900
rgba(242, 169, 0, .9)
$dliflc-orange
#ED8B00
rgba(237, 139, 0, .9)
$scarlet
#BA0020
rgba(186, 0, 32, .9)
$gloss-blue
#3478BD
rgba(52, 120, 189, .9)
$bay-blue
#11747F
rgba(17, 116, 127, .9)
$portola-teal
#00AFA9
rgba(0, 175, 169, .9)
$dk-sandstone
#B49D80
rgba(180, 157, 128, .9)
$hs2-orange
#D35E13
rgb(211, 94, 19, .9)
$vfb-blue
#445464
rgb(68, 84, 100, .9)

Layout Grids

Examples

1024px content width .row.dliflc-full-width
  • Modifier class to add to outer structural ".rows"
  • Removes padding of row to allow true 100% of it's parent's width.
  • Use for outer wrapping ".rows" that contain additional ".col" or ".col > .row > .col"... sequences.
1400px
1024px content width, 22px padding.dliflc-full-width-padding
980px = 1024px - (22px x 2px)
12 grid responsive layout.col-1, .col-2 ... .col-12
.col-4 (33.3%)
.col-4 (33.3%)
.col-4 (33.3%)
Small and large screens triggers.col-num .col-md-num
.col-12 .col-md-6 (small 100%, large 50%)
.col-12 .col-md-6 (small 100%, large 50%)
Rows containing 0 margin inner columns.row.row-negative-offset
.col-6
.col-6

Functions and Interactions

| Bootstrap Documentation 
<div class="dliflc-full-width row">
    <div class="col-12">1024px</div>
</div>
<div class="dliflc-full-width-padding row">
    <div class="col-12">980px = 1024px - (22px x 2px)</div>
</div>
<div class="dliflc-full-width-padding row">
    <div class="col-4">.col-4 (33.3%)</div>
    <div class="col-4">.col-4 (33.3%)</div>
    <div class="col-4">.col-4 (33.3%)</div>
</div>
<div class="dliflc-full-width-padding row">
    <div class="col-12 col-md-6">.col-12 .col-md-6 (small 100%, large 50%)</div>
    <div class="col-12 col-md-6">.col-12 .col-md-6 (small 100%, large 50%)</div>
</div>
<div class="dliflc-full-width-padding row row-negative-offset">
    <div class="col-12 col-md-6">.col-6</div>
    <div class="col-12 col-md-6">.col-6</div>
</div>

BG Colors

Examples

.bg-dark
.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-orange
.bg-danger
.bg-light
.bg-white

Functions and Interactions

<div class="bg-dark">{content}</div>
<div class="bg-primary">{content}</div>
<div class="bg-info">{content}</div>
<div class="bg-success">{content}</div>
<div class="bg-warning">{content}</div>
<div class="bg-orange">{content}</div>
<div class="bg-danger">{content}</div>
<div class="bg-light">{content}</div>
<div class="bg-white">{content}</div>

Borders

Examples

Default - 1px solid border with 4px border radius
.border-primary
.border-alt
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white

Functions and Interactions

<div class="border-primary">{content}</div>
<div class="border-alt">{content}</div>
<div class="border-success">{content}</div>
<div class="border-danger">{content}</div>
<div class="border-warning">{content}</div>
<div class="border-info">{content}</div>
<div class="border-light">{content}</div>
<div class="border-dark">{content}</div>
<div class="border-white">{content}</div>

Box Shadow

Examples

Box Shadow Option 1 (Soft Shadow)
.box-shadow-1
Box Shadow Option 2 (Darker Shadow)
.box-shadow-2

Functions and Interactions

<div class="box-shadow-1">.box-shadow-1</div>
<div class="box-shadow-2">.box-shadow-2</div>

HR Tag and Dividers

Examples

Full width divider element<hr />
Horizontal divider.horizontal-divider
Link|Link|Link

Functions and Interactions

Horizontal Rule
    <hr />

Horizontal Dividers
<div>Link<span class="horizontal-divider">|</span>Link<span class="horizontal-divider">|</span>Link</div>

Header

Examples

Global Nav Dark (Default)header #global_nav_wrapper
Global Nav Lightheader #global_nav_wrapper.navlite
Local Navheader #local_nav_wrapper

Functions and Interactions

| Bootstrap Documentation

Tabbed Nav

Examples

Tab Navigation Large Tabs: div.row > ul.nav.nav-tabs > li.nav-item Content: div.row > div.tab-content > div#ID.tab-pane.fade

Demo Content for Tab 1

Note-this content demo is for tab content illustration only.

Demo Content for Tab 2

Note-this content demo is for tab content illustration only.

Demo Content for Tab 3

Note-this content demo is for tab content illustration only.

Horizontal Pill NavigationTabs: ul.nav.nav-pills.mb-3 > li.nav-item > button.nav-link Content: div.tab-content > div#ID.tab-pane.fade

Home Tab Content

Sed pharetra mollis risus, rutrum consectetur est sagittis non. Vestibulum auctor massa nec quam congue, in ornare lectus dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt varius metus ut sodales. Vestibulum elementum ultricies pulvinar. Praesent vel dui vitae eros pretium lacinia vel dapibus diam. Cras arcu felis, pellentesque mattis interdum ut, accumsan et metus. Proin ac mi turpis. Ut vel risus pretium, laoreet lacus vel, ultrices velit. Etiam gravida, metus ornare pretium volutpat, risus velit cursus tortor, et elementum nulla ante sed magna. Donec iaculis lacus in neque sollicitudin, et egestas lacus hendrerit. Nunc sed enim mattis, dignissim ante vel, laoreet elit.

Student Profile Tab Content

Sed pharetra mollis risus, rutrum consectetur est sagittis non. Vestibulum auctor massa nec quam congue, in ornare lectus dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt varius metus ut sodales. Vestibulum elementum ultricies pulvinar. Praesent vel dui vitae eros pretium lacinia vel dapibus diam. Cras arcu felis, pellentesque mattis interdum ut, accumsan et metus. Proin ac mi turpis. Ut vel risus pretium, laoreet lacus vel, ultrices velit. Etiam gravida, metus ornare pretium volutpat, risus velit cursus tortor, et elementum nulla ante sed magna. Donec iaculis lacus in neque sollicitudin, et egestas lacus hendrerit. Nunc sed enim mattis, dignissim ante vel, laoreet elit.

Student Status Tab Content

Sed pharetra mollis risus, rutrum consectetur est sagittis non. Vestibulum auctor massa nec quam congue, in ornare lectus dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt varius metus ut sodales. Vestibulum elementum ultricies pulvinar. Praesent vel dui vitae eros pretium lacinia vel dapibus diam. Cras arcu felis, pellentesque mattis interdum ut, accumsan et metus. Proin ac mi turpis. Ut vel risus pretium, laoreet lacus vel, ultrices velit. Etiam gravida, metus ornare pretium volutpat, risus velit cursus tortor, et elementum nulla ante sed magna. Donec iaculis lacus in neque sollicitudin, et egestas lacus hendrerit. Nunc sed enim mattis, dignissim ante vel, laoreet elit.

Vertical Pill Navigationdiv.row > Tabs: div.row > div.col-12.col-md-4.nav.nav-pills.flex-column > button.nav-link Content: div.col-12.col-md-8.tab-content > div#ID.tab-pane.fade

Home Tab Content

Sed pharetra mollis risus, rutrum consectetur est sagittis non. Vestibulum auctor massa nec quam congue, in ornare lectus dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt varius metus ut sodales. Vestibulum elementum ultricies pulvinar. Praesent vel dui vitae eros pretium lacinia vel dapibus diam. Cras arcu felis, pellentesque mattis interdum ut, accumsan et metus. Proin ac mi turpis. Ut vel risus pretium, laoreet lacus vel, ultrices velit. Etiam gravida, metus ornare pretium volutpat, risus velit cursus tortor, et elementum nulla ante sed magna. Donec iaculis lacus in neque sollicitudin, et egestas lacus hendrerit. Nunc sed enim mattis, dignissim ante vel, laoreet elit.

Student Profile Tab Content

Sed pharetra mollis risus, rutrum consectetur est sagittis non. Vestibulum auctor massa nec quam congue, in ornare lectus dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt varius metus ut sodales. Vestibulum elementum ultricies pulvinar. Praesent vel dui vitae eros pretium lacinia vel dapibus diam. Cras arcu felis, pellentesque mattis interdum ut, accumsan et metus. Proin ac mi turpis. Ut vel risus pretium, laoreet lacus vel, ultrices velit. Etiam gravida, metus ornare pretium volutpat, risus velit cursus tortor, et elementum nulla ante sed magna. Donec iaculis lacus in neque sollicitudin, et egestas lacus hendrerit. Nunc sed enim mattis, dignissim ante vel, laoreet elit.

Student Status Tab Content

Sed pharetra mollis risus, rutrum consectetur est sagittis non. Vestibulum auctor massa nec quam congue, in ornare lectus dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt varius metus ut sodales. Vestibulum elementum ultricies pulvinar. Praesent vel dui vitae eros pretium lacinia vel dapibus diam. Cras arcu felis, pellentesque mattis interdum ut, accumsan et metus. Proin ac mi turpis. Ut vel risus pretium, laoreet lacus vel, ultrices velit. Etiam gravida, metus ornare pretium volutpat, risus velit cursus tortor, et elementum nulla ante sed magna. Donec iaculis lacus in neque sollicitudin, et egestas lacus hendrerit. Nunc sed enim mattis, dignissim ante vel, laoreet elit.

Student Attendance Tab Content

Sed pharetra mollis risus, rutrum consectetur est sagittis non. Vestibulum auctor massa nec quam congue, in ornare lectus dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean tincidunt varius metus ut sodales. Vestibulum elementum ultricies pulvinar. Praesent vel dui vitae eros pretium lacinia vel dapibus diam. Cras arcu felis, pellentesque mattis interdum ut, accumsan et metus. Proin ac mi turpis. Ut vel risus pretium, laoreet lacus vel, ultrices velit. Etiam gravida, metus ornare pretium volutpat, risus velit cursus tortor, et elementum nulla ante sed magna. Donec iaculis lacus in neque sollicitudin, et egestas lacus hendrerit. Nunc sed enim mattis, dignissim ante vel, laoreet elit.

Requirements for Tab Nav

Mandatory

On the tab (button.nav-link)

  • On first / default selected tab button, add .active class.
  • [#ID] on ".nav-link"
  • data-bs-toggle="[pill or tab]"
  • data-bs-target="[#targeted-tabpanel-ID]"
  • role="tab" on each tab button
  • If using nav > div > button, add role="tablist" to wrapping div.
  • If using ul > li > button, add role="tablist" to ul & role="presentation" to li for screen readers.

On the tabpanel (div.tab-content > div.tab-pane)

  • On first / default selected tab panel, add .active class.
  • [#ID] on div.tab-content wrapper.
  • [#ID] and ".tab-pane.fade" classes on each tab pane.
  • role="tabpanel" on each tab pane.
Optional

On the tab button (button.nav-link)

  • Use "button.nav-link" vs "a.nav-link"
  • aria-controls="[#tab-pane-ID]"
  • aria-selected="[true or false]" (true on default panel, false on all others).

On the tabpanel (div.tab-content > div.tab-pane)

  • Add optional ".box-shadow-1" to wrapping div (div.tab-content) to give a little more contrast & dimension
  • aria-labelledby="[ID for its button.nav-link item]"

Functions and Interactions

| Bootstrap Documentation

Sidebar

Sidebar Navigation

View working example of sidebar component here.


Functions and Interactions

<!-- NOTE Styling requires sidebar component to be enclosed as shown in template snippet below. -->
<body class="sidebar-template">
	<header>...</header>
	<main class="container-fluid main-content">
		<div class="row g-5 w-100">
			<div class="col-md-2 mt-0 pe-0 ps-1 box-shadow-1">
				<!-- START 'sidebar component code' -->
				<div data-component="sidebar" class="sidebar">
					<ul class="sidebar-list-group">
					<li class="parent-item"><button id="homeBtn" class="btn-link" onclick="location.href='/'">Home</button></li>
					<li class="parent-item has-sublist"><button class="btn-link">Menu item 1</button>
						<ul class="sub-list">
						<li class="sub-item"><button class="btn-link" onclick="location.href='#'">Link 1</button></li>
						<li class="sub-item"><button class="btn-link" onclick="location.href='#'">Link 2</button></li>
						<li class="sub-item"><button class="btn-link" onclick="location.href='#'">Link 3</button></li>
						</ul>
					</li>
					<li class="parent-item has-sublist"><button class="btn-link">Menu item 2</button>
						<ul class="sub-list">
						<li class="sub-item"><button class="btn-link" onclick="location.href='#'">Link 1</button></li>
						<li class="sub-item"><button class="btn-link" onclick="location.href='#'">Link 2</button></li>
						<li class="sub-item"><button class="btn-link" onclick="location.href='#'">Link 3</button></li>
						</ul>
					</li>
					<li class="parent-item has-sublist"><button class="btn-link">Menu item 3</button>
						<ul class="sub-list">
						<li class="sub-item"><button class="btn-link" onclick="location.href='#'">Link 1</button></li>
						<li class="sub-item"><button class="btn-link" onclick="location.href='#'">Link 2</button></li>
						<li class="sub-item"><button class="btn-link" onclick="location.href='#'">Link 3</button></li>
						</ul>
					</li>
					<li class="parent-item"><button class="btn-link" onclick="location.href='#'">Menu item 4</button></li>
					</ul>
				</div>
				<!-- END 'sidebar component code' -->
			</div>
			<div class="col-md-10">
				Main section contents
			</div>
		</div>
	</main>
	<footer>...</footer>
</body>

Form Layouts

Examples

Grid layout with Gutters and floating labelsdiv.row.g-3 > div.col > [form-input] ~ [label]

On floating label inputs, label must be after input, and input must have placeholder attribute.

Functions and Interactions

| Bootstrap Documentation 
<form class="row g-3">
<div class="col-md-6 form-label-group floating-label">
  <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
  <label for="inputEmail4">Email</label>
</div>
<div class="col-md-6 form-label-group floating-label">
  <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
  <label for="inputPassword4">Password</label>
</div>
<div class="col-12 form-label-group floating-label">
  <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  <label for="inputAddress">Address</label>
</div>
<div class="col-12 form-label-group floating-label">
  <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  <label for="inputAddress2">Address 2</label>
</div>
<div class="col-md-6 form-label-group floating-label">
  <input type="text" class="form-control" id="inputCity" placeholder="City">
  <label for="inputCity">City</label>
</div>
<div class="col-md-4 form-label-group floating-label">
  <select id="inputState" class="form-control form-select" placeholder="State">
  <option></option>
  <option>AL</option>
  <option>AK</option>
  <option>AZ</option>
  <option>AR</option>
  </select>
  <label for="inputState">State</label>
</div>
<div class="col-md-2 form-label-group floating-label">
  <input type="text" class="form-control" id="inputZip" placeholder="Zip Code">
  <label for="inputZip">Zip</label>
</div>
<div class="col-4 form-label-group floating-label">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="gridCheck">
    <label class="form-check-label" for="gridCheck">Check me out</label>
  </div>
</div>
<div class="col-4 form-label-group floating-label">
  <button type="submit" class="btn btn-lg btn-alt">Cancel</button>
</div>
<div class="col-4 form-label-group floating-label">
  <button type="submit" class="btn btn-lg btn-primary">Sign in</button>
</div>
</form>

Text Inputs

Normal Inputs

Input with floating label - REQUIRES Placeholder to work properly.
Input with regular label and placeholder - Markup example below

Disabled Inputs

Disabled input with floating label - Markup example below
Disabled input with regular label - Markup example below
| Bootstrap Documentation 
	<!-- Floating Label -->
	<div class="form-label-group floating-label">
		<input type="email" class="form-control" id="email_ID" placeholder="Email Address">
		<label for="email_ID">Email address</label>
	</div>

	<!-- Regular Label & Placeholder -->
	<div class="form-group">
		<label for="input_ID">First Name</label>
		<input type="text" class="form-control" id="input_ID" placeholder="Please type first name">
	</div>

	<!-- Regular Label Disabled -->
	<div class="form-group">
		<label for="input_nonEdit_ID">Non-editable</label>
		<input type="text" class="form-control" id="input_nonEdit_ID" value="john@apple.com" disabled>
	</div>

	<!-- Floating Label Disabled -->
	<div class="form-label-group floating-label">
		<input type="email" class="form-control" id="input_nonEdit_floating_ID" value="john@apple.com" disabled>
		<label for="input_nonEdit_floating_ID">Email address</label>
	</div>

Select

Examples

Select box example with floating label
Select box example with regular label
Select box example with Multi-Select
| Bootstrap Documentation 
<!-- Select with Floating Label -->
<div class="col-12 form-label-group floating-label">
	<select class="form-control" id="Select_Box_Example">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
	<label for="Select_Box_Example">Select Box Label</label>
</div>
<!-- Select with Regular Label -->
<div class="col-12 form-label-group">
	<label for="Select_Box_Example2">Select Box Label 2</label>
	<select class="form-control" id="Select_Box_Example2">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
</div>

<!-- Customized BootstrapSelect Multi-selector -->
<div class="col-12 form-label-group">
	<select 
		class="selectpicker" multiple="true" data-live-search="true" data-actions-box="true" data-selected-text-format="count" data-max-options="2">
		<option>Mustard</option>
		<option>Ketchup</option>
		<option>Relish</option>
	</select>
</div>

Special Inputs

Search Input

Search input with icon and clear input buttondiv.form-label-group.col-[#] > input=[type="search"].form-control.search

Date Input

Date Inputdiv.form-label-group.col-[#] > label ~ input=[type="date"].form-control

File Input

File Inputdiv.form-label-group.col-[#] > label ~ input=[type="file"].form-control

eMail Input

Regular eMail Inputdiv.form-label-group.col-[#] > label ~ input=[type="email"].form-control
Floating Label eMail Inputdiv.form-label-group.floating-label.col-[#] > input=[type="email"].form-control ~ label

Password Input

Regular Password Input(See copyable HTML Snippet below)
Floating Label Password Input(See copyable HTML Snippet below)

Telephone Input

Regular Telephone Inputdiv.form-label-group.col-[#] > label ~ input=[type="tel"].form-control
Floating Label Telephone Inputdiv.form-label-group.floating-label.col-[#] > label ~ input=[type="tel"].form-control
Format: 123-456-7890

URL Input

Regular URL Inputdiv.form-label-group.col-[#] > label ~ input=[type="url"].form-control
Floating Label URL Inputdiv.form-label-group.floating-label.col-[#] > label ~ input=[type="url"].form-control
| Bootstrap Documentation 
<!-- Search Input -->
	<div class="form-label-group col-12">
		<input class="form-control search" id="demo-search" name="demo-search" placeholder="Search" type="search">
	</div>

<!-- Date Input -->
	<div class="form-label-group col-12">
		<label for="demoDate">Pick Date</label>
		<input type="date" class="form-control" id="demoDate" name="trip-start" min="2018-01-01" max="2018-12-31">
	</div>

<!-- File Input -->
	<div class="form-label-group col-12">
		<label for="avatar">Choose a profile picture:</label>
		<input type="file" class="form-control" id="avatar" name="avatar" accept="image/png, image/jpeg">
	</div>

<!-- eMail Input -->
	<!-- Normal Label and Input Placeholder -->
	<div class="form-label-group col-12">
		<label for="email">@dliflc.edu eMail Address</label>
		<input type="email" class="form-control" placeholder="@dliflc.edu eMail" id="email" pattern=".+@dliflc\.edu" size="30" required>				
	</div>

	<!-- Floating Label -->
	<div class="form-label-group floating-label col-12">
		<input type="email" class="form-control" id="email-floating" placeholder="@dliflc.edu eMail" pattern=".+@dliflc\.edu" size="30" required>				
		<label for="email-floating">@dliflc.edu eMail</label>
	</div>

<!-- Password Input -->
	<!-- Normal Label and Input Placeholder -->
		<div class="form-label-group col-12">
			<div>
				<label for="username">Username</label>
				<input type="text" class="form-control" placeholder="Username" id="username" name="username">
			</div>
			<div class="mt-3">
				<label for="pass">Password</label>
				<input type="password" class="form-control" id="pass" placeholder="Password (8 characters minimum)" name="password" minlength="8" required>
			</div>
			<input type="submit" class="btn btn-primary mt-3" value="Sign in">				
		</div>

	<!-- Floating Label -->
		<div class="form-label-group-wrapper row col-12">
			<div class="form-label-group floating-label px-0">
				<input type="text" class="form-control" placeholder="Username placeholder" id="username2" name="username">
				<label for="username2">Username</label>
			</div>
			<div class="form-label-group floating-label mt-lg-4 px-0">
				<input type="password" class="form-control" placeholder="Password placeholder" id="pass2" name="password" minlength="8" required>
				<label for="pass2">Password (8 characters minimum)</label>
			</div>
			<div class="form-label-group px-0">
				<input type="submit" class="btn btn-primary" value="Sign in">
			</div>
		</div>

<!-- Tel Input -->
	<!-- Normal Label and Input Placeholder -->
		<div class="form-label-group col-12">
			<label for="phone">Enter your phone number:</label>
			<input type="tel" class="form-control" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
			<small>Format: 123-456-7890</small>			
		</div>

	<!-- Floating Label -->
		<div class="form-label-group floating-label col-12">
			<input type="tel" class="form-control" placeholder="Phone format: 123-456-7890" id="phone2" name="phone2" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
			<label for="phone2">Phone (Format: 123-456-7890)</label>
		</div>

<!-- URL Input -->
	<!-- Normal Label and Input Placeholder -->
		<div class="form-label-group col-12">
			<label for="url">Enter an https:// URL:</label>
			<input type="url" class="form-control" name="url" id="url" placeholder="Format: 'https://example.com'" pattern="https://.*" size="30" required>
		</div>
	<!-- Floating Label -->
		<div class="form-label-group floating-label col-12">
			<input type="url" class="form-control" name="url2" id="url2" placeholder="Format: 'https://example.com'" pattern="https://.*" size="30" required>
			<label for="url2">Enter URL in format: 'https://example.com'</label>
		</div>

Textarea

Examples

Textarea with floating labeldiv.form-label-group.floating-label.col-[#] > textarea.form-control ~ [label]
Textarea with regular labeldiv.form-label-group.floating-label.col-[#] > [label] ~ textarea.form-control

Functions and Interactions

| Bootstrap Documentation 
<!-- Floating Label Textarea -->						
<div class="form-label-group floating-label col-12">
	<textarea class="form-control" id="textarea_Demo_ID" placeholder="Textarea Floating Label Demo"></textarea>
	<label for="textarea_Demo_ID">Textarea Floating Label Demo</label>
</div>
<!-- Regular Label Textarea -->
<div class="form-label-group col-12">
	<label for="textarea_Demo_ID_Reg">Textarea Demo</label>
	<textarea class="form-control" id="textarea_Demo_ID_Reg"></textarea>
</div>

Buttons

Examples

Default Button.btn
Button Styles(+) .btn, .btn-flat, .btn-cancel, .btn-cancel-flat, .btn-accent, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-light
Button Sizes(+) .btn-lg, .btn-md, .btn-sm


Special Attributes(+) .btn-block, .btn-rounded, .disabled, .text-truncate (requires max-width value), .text-wrap (requires max-width value)




Button Linksbutton.btn-link, a.btn-link (+ .btn-arrow)

Functions and Interactions

| Bootstrap Documentation 
<!-- Be sure to place buttons in sized wrapping container. -->
<div class="col-12">
<!-- Default Buttons -->
<button type="button" class="btn">Theme button (default)</button>

<!-- Styled Buttons -->
<button type="button" class="btn-flat">Theme flat button</button>
<button type="button" class="btn-cancel">Cancel button</button>
<button type="button" class="btn-alt-flat">Cancel flat button</button>
<button type="button" class="btn-accent">Accent button</button>
<button type="button" class="btn-info">Info button</button>
<button type="button" class="btn-success">Success button</button>
<button type="button" class="btn-warning">Warning button</button>
<button type="button" class="btn-danger">Danger button</button>
<button type="button" class="btn-light">Light button</button>

<!-- Sized Buttons -->
<button type="button" class="btn btn-lg">Large theme button</button>
<button type="button" class="btn-cancel btn-lg">Large cancel button</button>
<br>
<button type="button" class="btn btn-md">Medium theme button</button>
<button type="button" class="btn-cancel btn-md">Medium cancel button</button>
<br>
<button type="button" class="btn btn-sm">Small theme button</button>
<button type="button" class="btn-cancel btn-sm">Small cancel button</button>

<!-- Special Buttons -->
<button type="button" class="btn btn-block">Button block 100% width</button>
<button type="button" class="btn btn-round">Rounded corner</button>
<button type="button" class="btn disabled" disabled="">Disabled</button>
<button type="button" class="btn text-truncate">Text-truncate lorem ipsum dolor sit amet</button>
<button type="button" class="btn text-wrap">Text-wrap lorem ipsum dolor sit amet</button>		

<!-- Button Links -->
<button type="button" class="btn-link">See options</button>
<button type="button" class="btn-link btn-arrow ml-3">Learn more here</button>
</div>

Button Group

Use case mirrors that of a radio button. Configured to be used when user makes single selection from a choice of two or more options. User can navigate between options of a group using arrows on keyboard and can tab between groups using tab key.

Examples

Segmented three buttons.btn-group > .btn.btn-segmented
Segmented two buttons.btn-group > .btn.btn-segmented
Button selectors blocks.btn-group > ul.btn-group-wrapper > .btn.btn-selector
Button selectors with text.btn-group-vertical > .btn.btn-textlabel

Functions and Interactions

| Bootstrap Documentation 
<!-- Segmented Button Group (3) -->
<div class="col-12">
	<div class="btn-group btn-group-sm btn-group-toggle">
		<input type="radio" class="btn-check" name="options" id="option1" value="option1" autocomplete="off" checked="">
		<label class="btn btn-segmented strong active" for="option1">Option 1</label>

		<input type="radio" class="btn-check" name="options" id="option2" value="option2" autocomplete="off">
		<label class="btn btn-segmented strong" for="option2">Option 2</label>

		<input type="radio" class="btn-check" name="options" id="option3" value="option3" autocomplete="off">
		<label class="btn btn-segmented strong" for="option3">Option 3</label>
	</div>
</div>

<!-- Segmented Button Group (2) -->
<div class="col-12">
	<div class="btn-group btn-group-toggle">
		<input type="radio" class="btn-check" name="btnGrp2" id="id-1" autocomplete="off" checked="">
		<label class="btn btn-segmented strong" for="id-1">Option 1</label>
		<input type="radio" class="btn-check" name="btnGrp2" id="id-2" autocomplete="off">
		<label class="btn btn-segmented strong" for="id-2">Option 2</label>
	</div>
</div>

<!-- Button Selector Blocks -->
<div class="col-12">
	<div class="btn-group">
		<ul class="row btn-group-wrapper">
			<li class="col-6 btn-group-toggle">
				<input class="btn-check" value="selector-1" name="BlockSelector" id="Blocks_Selector_1" type="radio" checked="">
				<label class="btn btn-selector" for="Blocks_Selector_1">
					<h4>12 <span class="h5">Months</span></h4>
				</label>
			</li>
			<li class="col-6 btn-group-toggle">
				<input class="btn-check" value="selector-2" name="BlockSelector" id="Blocks_Selector_2" type="radio">
				<label class="btn btn-selector" for="Blocks_Selector_2">
					<h4>24 <span class="h5">Months</span></h4>
				</label>
			</li>
			<li class="col-6 btn-group-toggle">
				<input class="btn-check" value="selector-3" name="BlockSelector" id="Blocks_Selector_3" type="radio">
				<label class="btn btn-selector" for="Blocks_Selector_3">
					<h4>36 <span class="h5">Months</span></h4>
				</label>
			</li>
		</ul>
	</div>
</div>

<!-- Button Selector Blocks with Text -->
<div class="col-12">
	<div class="btn-group-vertical btn-group-toggle">
		<input class="btn-check" name="TextSelector" id="TextLabel_Selector_1" type="radio" checked="">
		<label class="btn btn-textlabel" for="TextLabel_Selector_1">
			<div class="row">
				<div class="col-3 text-left strong p-0">Yes</div>
				<div class="col-9 text-right p-0">I would like this option.</div>
			</div>
		</label>
		<input class="btn-check" name="TextSelector" id="TextLabel_Selector_2" type="radio">
		<label class="btn btn-textlabel" for="TextLabel_Selector_2">
			<div class="row">
				<div class="col-3 text-left strong p-0">No</div>
				<div class="col-9 text-right p-0">I would like to waive this option.</div>
			</div>
		</label>
	</div>
</div>

Dropdowns

Used to create a dropdown menu with links, like often seen in navigation. It is also configured to use 'popper.js' for position awareness, which enables it to know if the dropdown should be going up/down/left/right based on it's current position in the page. (Be sure to include the appropriate "data-" attributes as shown in copy HTML snippet below.)

Examples

Dropdown with header & divider Togglediv.dropdown > button.btn.dropdown-toggle ~ div.dropdown-menu > div.dropdown-pointer ~ (h4.dropdown-header / a.dropdown-item / div.dropdown-divider, etc.)

User Name

user@email.com
Action Another action
Sign out
Button dropdowndiv.dropdown > button.btn.btn-alt.dropdown-toggle ~ div.dropdown-menu > div.dropdown-pointer ~ a.dropdown-item
Action Another action Something else here
Button Link Dropdown Togglediv.dropdown > button.btn-link.dropdown-toggle ~ div.dropdown-menu > div.dropdown-pointer ~ a.dropdown-item
Action Another action Something else here

Functions and Interactions

| Bootstrap Documentation 
<!-- Dropdown with header & divider Toggle -->
<div class="col-12">
	<div class="dropdown">
		<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
			Dropdown with header & divider Toggle
		</button>
		<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
			<div class="dropdown-pointer"></div>
			<h4 class="dropdown-header">User Name</h4>
			<h6 class="dropdown-subheader">user@email.com</h6>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Action</a>
			<a class="dropdown-item" href="#">Another action</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Sign out</a>
		</div>
	</div>
</div>
<!-- Button dropdown -->
<div class="col-12">
	<div class="dropdown">
		<button class="btn btn-alt dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
		Button dropdown
		</button>
		<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
			<div class="dropdown-pointer"></div>
			<a class="dropdown-item" href="#">Action</a>
			<a class="dropdown-item" href="#">Another action</a>
			<a class="dropdown-item" href="#">Something else here</a>
		</div>
	</div>
</div>
<!-- Button Link Dropdown Toggle -->
<div class="col-12">
	<div class="dropdown">
		<button class="btn-link dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
			Button Link Dropdown Toggle
		</button>
		<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
			<div class="dropdown-pointer"></div>
			<a class="dropdown-item" href="#">Action</a>
			<a class="dropdown-item" href="#">Another action</a>
			<a class="dropdown-item" href="#">Something else here</a>
		</div>
	</div>
</div>

Checkboxes

Examples

Vertical stacked default / disabled checkboxdiv.form-check > input[type="checkbox"].form-check-input + label.form-check-label
Inline default / disabled checkboxdiv.form-check.form-check-inline > input[type="checkbox"].form-check-input + label.form-check-label

Radio Buttons

Examples

Vertical stacked radio with disabled option and default selectiondiv.form-check > input[type="radio"].form-check-input + label.form-check-label
Inline radio with disabled option and no default selectiondiv.form-check.form-check-inline > input[type="radio"].form-check-input + label.form-check-label

Toggle Switch

Examples

Basic switch [input type="checkbox"].form-group.toggle-wrapper[tabindex="1"] + input[type="checkbox"].toggle.toggle-btn[role="switch"] + label (see syntax example)

Functions and Interactions

| Bootstrap Documentation 
<!-- Stacked Checkboxes -->
<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
	<label class="form-check-label" for="defaultCheck1">
		Default Stacked checkbox
	</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
	<label class="form-check-label" for="defaultCheck2">
		Disabled Stacked checkbox
	</label>
</div>

<!-- Inline checkboxes -->
<div class="form-check form-check-inline">
	<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
	<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
	<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
	<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
	<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
	<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

<!-- Inline radio buttons -->
<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
	<label class="form-check-label" for="inlineRadio1">Inline #1</label>
</div>
<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
	<label class="form-check-label" for="inlineRadio2">Inline #2</label>
</div>
<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
	<label class="form-check-label" for="inlineRadio3">Inline #3 (disabled)</label>
</div>

<!-- Toggle Switch -->
<div class="form-check form-switch">
	<input class="form-check-input" type="checkbox" role="switch" id="toggle-demo-checkbox">
	<label class="toggle-label-off toggle-label" for="toggle-demo-checkbox">Off</label>
	<label class="toggle-label-on toggle-label" for="toggle-demo-checkbox">On</label>
</div>

Range Input

Examples

Min/Max range (with whole integer step increments)input[type="range"].form-range (+ name="" & min="" & max="") ~ div > output(+ name="(customInputRangeName)"])
3
Min/Max range with custom half step incrementsinput[type="range"].form-range (+ name="" & min="" & max="") ~ div > output(+ name="(customInputRangeName)"] & step="0.5")
2.5
Disabled Rangeinput[type="range"].form-range (+ 'disabled')

Functions and Interactions

| Bootstrap Documentation 
<!-- Min/Max range (with whole integer step increments) -->
	<div class="row">
		<div class="col-9 d-flex align-items-center">
			<input type="range" class="form-range" name="customRange2Name" value="3" min="0" max="5" id="customRangeInput2" oninput="customRangeOutput2.value = customRangeInput2.value">
		</div>
		<div class="col-3 d-flex align-items-center">
			<output name="customRange2Name" id="customRangeOutput2">3</output>
		</div>
	</div>

<!-- Min/Max range with custom half step increments -->
	<div class="row">
		<div class="col-9 d-flex align-items-center">
			<input type="range" class="form-range" name="customRange3Name" value="2.5" min="0" max="5" step="0.5" id="customRangeInput3" oninput="customRangeOutput3.value = customRangeInput3.value">
		</div>
		<div class="col-3 d-flex align-items-center">
			<output name="customRange3Name" id="customRangeOutput3">2.5</output>
		</div>
	</div>

<!-- Disabled Range -->
	<div class="row">
		<div class="col-12">
			<label for="disabledRange" class="form-label">Disabled range</label>
			<input type="range" class="form-range" id="disabledRange" disabled>
		</div>
	</div>

Validation

Examples

User Input Validation(See specifics in code snippet)
Looks good!
Looks good!
Please provide a valid city.
Please select a valid state.
Please provide a valid Zip.
You must agree before submitting.

Functions and Interactions

| Bootstrap Documentation 
<form class="row g-3 needs-validation" novalidate>
	<div class="col-md-4 form-label-group floating-label">
		<input type="text" class="form-control" id="validationCustom01" value="Mark" required placeholder="First name">
		<label for="validationCustom01" class="form-label">First name</label>
		<div class="valid-feedback">Looks good!</div>
	</div>
	<div class="col-md-4 form-label-group floating-label">
		<input type="text" class="form-control" id="validationCustom02" value="Otto" required placeholder="Last name">
		<label for="validationCustom02" class="form-label">Last name</label>
		<div class="valid-feedback">Looks good!</div>
	</div>
	<div class="col-md-6 form-label-group floating-label">
		<input type="text" class="form-control" id="validationCustom03" required placeholder="City">
		<label for="validationCustom03" class="form-label">City</label>
		<div class="invalid-feedback">Please provide a valid city.</div>
	</div>
	<div class="col-md-3 form-label-group floating-label">
		<select class="form-select form-control" id="validationCustom04" required placeholder="State">
			<option selected disabled value="">Choose...</option>
			<option>...</option>
		</select>
		<label for="validationCustom04" class="form-label">State</label>
		<div class="invalid-feedback">Please select a valid state.</div>
	</div>
	<div class="col-md-3 form-label-group floating-label">
		<input type="text" class="form-control" id="validationCustom05" required placeholder="Zip">
		<label for="validationCustom05" class="form-label">Zip</label>
		<div class="invalid-feedback">Please provide a valid Zip.</div>
	</div>
	<div class="col-12">
		<div class="form-check">
			<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
			<label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
			<div class="invalid-feedback">You must agree before submitting.</div>
		</div>
	</div>
	<div class="col-12">
		<button class="btn btn-primary" type="submit">Submit form</button>
	</div>
</form>

<script>
	// Example starter JavaScript for disabling form submissions if there are invalid fields
	(function () {
	'use strict'

	// Fetch all the forms we want to apply custom Bootstrap validation styles to
	var forms = document.querySelectorAll('.needs-validation')

	// Loop over them and prevent submission
	Array.prototype.slice.call(forms)
		.forEach(function (form) {
		form.addEventListener('submit', function (event) {
			if (!form.checkValidity()) {
			event.preventDefault()
			event.stopPropagation()
			}

			form.classList.add('was-validated')
		}, false)
		})
	})()
</script>

Accordion

Examples

Default Accordion.accordion > .accordion-item > .accordion-item-header > .accordion-toggle.collapsed (plus "data-bs-" attributes below)
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.
Default Accordion.accordion.bg > .accordion-item > .accordion-item-header > .accordion-toggle.collapsed (plus "data-bs-" attributes below)
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordion options and requirements

Mandatory

On '.accordion-item-header' or its child (".accordion-toggle")

  • #ID on ".accordion-header" wrapper
  • data-bs-toggle="collapse" on ".accordion-toggle"
  • data-bs-target="[#collapseContentWrapperID]" on ".accordion-toggle"

On '.accordion-collapse' content container

  • [#ID] on .accordion-collapse wrapper
  • ".collapse" on ".accordion-collapse" wrapper
Optional

On main wrapping '.accordion' item

  • Add ".basic" to exclude theme colored border.

On '.accordion-item-header' or its child ("button.accordion-toggle")

  • ".collapsed" to default closed on ".accordion-toggle"
  • aria-expanded="false" (default close) on ".accordion-toggle"
  • aria-controls="[#collapseContentWrapperID]" on ".accordion-toggle"

On '.accordion-collapse' content container

  • aria-labelledby="[ID for its .accordion-item-header]"
  • data-bs-parent="[Accordion component outermost wrapper ID]"

Accessibility best practices

  • DO usearia-expanded="(true/false)" on control element.
    (If default expanded, use true. If default collapsed, use false.)
  • If control is NOT <button> (ie: <a>, etc.), addrole="button"
  • DO use aria-controls="collapseContainerID" to convey relationship to assistive technologies.

Read more about implementing accessibility for this component.

Functions and Interactions

| Bootstrap Documentation 
<!-- Default Accordion -->
<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <div class="accordion-item-header" id="heading1">
            <div class="accordion-toggle collapsed d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseID-1" aria-expanded="true" aria-controls="collapseID-1">
                <h3 class="col">Accordion Group Item #1</h3>
            </div>
        </div>
        <div id="collapseID-1" class="accordion-item-body-wrapper collapse" aria-labelledby="heading1" data-bs-parent="#accordionExample">
            <div class="accordion-item-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-item-header" id="heading2">
            <div class="accordion-toggle collapsed d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseID-2" aria-expanded="true" aria-controls="collapseID-2">
                <h3 class="col">Accordion Group Item #2</h3>
            </div>
        </div>
        <div id="collapseID-2" class="accordion-item-body-wrapper collapse" aria-labelledby="heading2" data-bs-parent="#accordionExample">
            <div class="accordion-item-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-item-header" id="heading3">
            <div class="accordion-toggle collapsed d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseID-3" aria-expanded="true" aria-controls="collapseID-3">
                <h3 class="col">Accordion Group Item #3</h3>
            </div>
        </div>
        <div id="collapseID-3" class="accordion-item-body-wrapper collapse" aria-labelledby="heading3" data-bs-parent="#accordionExample">
            <div class="accordion-item-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
</div>

<!-- Themed Accordion with Background Headers -->
<div class="accordion bg" id="accordionExample2">
    <div class="accordion-item">
        <div class="accordion-item-header" id="heading_2-1">
            <div class="accordion-toggle collapsed d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseID_2-1" aria-expanded="true" aria-controls="collapseID_2-1">
                <h3 class="col">Accordion Group 2 Item #1</h3>
            </div>
        </div>
        <div id="collapseID_2-1" class="accordion-item-body-wrapper collapse" aria-labelledby="heading_2-1" data-bs-parent="#accordionExample2">
            <div class="accordion-item-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-item-header" id="heading_2-2">
            <div class="accordion-toggle collapsed d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseID_2-2" aria-expanded="true" aria-controls="collapseID_2-2">
                <h3 class="col">Accordion Group 2 Item #2</h3>
            </div>
        </div>
        <div id="collapseID_2-2" class="accordion-item-body-wrapper collapse" aria-labelledby="heading_2-2" data-bs-parent="#accordionExample2">
            <div class="accordion-item-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-item-header" id="heading_2-3">
            <div class="accordion-toggle collapsed d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseID_2-3" aria-expanded="true" aria-controls="collapseID_2-3">
                <h3 class="col">Accordion Group 2 Item #3</h3>
            </div>
        </div>
        <div id="collapseID_2-3" class="accordion-item-body-wrapper collapse" aria-labelledby="heading_2-3" data-bs-parent="#accordionExample2">
            <div class="accordion-item-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
</div>

Alerts

Examples

Alert danger.alert .alert-danger
Alert success.alert .alert-success
Alert Primary.alert .alert-primary
Alert alt.alert .alert-alt
Alert Danger Dismissible.alert .alert-danger .alert-dismissible
Alert Alt Dismissible.alert .alert-alt .alert-dismissible

Functions and Interactions

| Bootstrap Documentation 
<div class="alert alert-danger" role="alert">
	<div class="dliflc-full-width-padding m-auto">An urgent danger alert with a link example at the end. <a href="#">Get More Info Here.</a></div>
</div>
<div class="alert alert-primary" role="alert">
	<div class="dliflc-full-width-padding m-auto">A primary alert announcement with a link example at the end. <a href="#">Get More Info Here.</a></div>
</div>
<div class="alert alert-alt" role="alert">
	<div class="dliflc-full-width-padding m-auto">A alt alert announcement with a link example at the end. <a href="#">Get More Info Here.</a></div>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
	<div class="dliflc-full-width-padding m-auto">A dismissible alert announcement with <strong>bolded text</strong> and a <a href="#">link example</a>.</div>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-alt alert-dismissible fade show" role="alert">
	<div class="dliflc-full-width-padding m-auto">A dismissible alert announcement with <strong>bolded text</strong> and a <a href="#">link example</a>. </div>
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Toasts

Examples
Simple Toast(See 'Copy HTML' for full snippets)

Simple Toast

| Bootstrap Documentation

Modal

Examples

Large custom modal

Functions and Interactions

| Bootstrap Documentation

Tables

Examples

Basic Data-Tabletable.dataTable.dli-data-table (+ add this to on-page <script>: "jQuery('#Table-ID').DataTable();")
DODID # First Last EMail
816592 Kiley Ohl kiley.ohl@dliflc.edu
258917 Jacob Thornton jacob.thornton@dliflc.edu
657824 Larry Davis larry.davis@dliflc.edu
Small tabletable.table-sm.dli-data-table
DODID # First Last EMail
189284 Kiley Ohl kiley.ohl@dliflc.edu
258917 Jacob Thornton jacob.thornton@dliflc.edu
657824 Larry Davis larry.davis@dliflc.edu
Bordered tabletable.table-bordered
DODID # First Last EMail
189284 Kiley Ohl kiley.ohl@dliflc.edu
258917 Jacob Thornton jacob.thornton@dliflc.edu
657824 Larry Davis larry.davis@dliflc.edu
SM Bordered tabletable.table-sm.table-bordered
DODID # First Last EMail
189284 Kiley Ohl kiley.ohl@dliflc.edu
258917 Jacob Thornton jacob.thornton@dliflc.edu
657824 Larry Davis larry.davis@dliflc.edu
Color variants table(See class names below)
Use case Class Name to use on <tr> or <td>
Primary (tr/td).table-primary
Alt (tr/td).table-alt
Success (tr/td).table-success
Danger (tr/td).table-danger
Warning (tr/td).table-warning
Info (tr/td).table-info
Light (tr/td).table-light
Dark (tr/td).table-dark
Responsive, horizontally scrollable tablediv.table-responsive > table
# Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell

Notes about tables

  • Combine class names for multiple style attributes to be applied. (ie: <table class="table-sm table-bordered"> would produce the table with reduced padding and the added external border around table).
  • Table widths default to 100% of their parent.
  • Responsive horizontal scrolling tables need to be wrapped in a "<div class="table-responsive">"

Functions and Interactions

| Bootstrap Documentation 
<!-- Create a Data Table -->
	<table class="dli-data-table">
<!-- Create a Small Table -->
	<table class="table-sm">
<!-- Create a Bordered Table -->
	<table class="table-bordered">
<!-- Create a Responsive Table -->
	<div class="table-responsive">
		<table> ... </table>
	</div>

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.

Examples

Basic List-group with optional active & disabled itemsul.list-group > li.list-group-item(.active)(.disabled)
  • Active item
  • Disabled item
  • A third item
  • A fourth item
  • A fifth item
Actionable custom content list groupdiv.list-group > a.list-group-item(.list-group-item-action)

Use <a> or <button> to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.

List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.

Functions and Interactions

| Bootstrap Documentation 
<!-- Basic list group snippet -->
<ul class="list-group">
	<li class="list-group-item active" aria-current="true">Active item</li>
	<li class="list-group-item disabled" aria-disabled="true">Disabled item</li>
	<li class="list-group-item">A third item</li>
	<li class="list-group-item">A fourth item</li>
	<li class="list-group-item">A fifth item</li>
</ul>

<!-- Custom content list group snippet -->
<div class="list-group">
	<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
	  <div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">List group item heading</h5>
		<small>3 days ago</small>
	  </div>
	  <p class="mb-1">Some placeholder content in a paragraph.</p>
	  <small>And some small print.</small>
	</a>
	<a href="#" class="list-group-item list-group-item-action">
	  <div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">List group item heading</h5>
		<small class="text-muted">3 days ago</small>
	  </div>
	  <p class="mb-1">Some placeholder content in a paragraph.</p>
	  <small class="text-muted">And some muted small print.</small>
	</a>
	<a href="#" class="list-group-item list-group-item-action">
	  <div class="d-flex w-100 justify-content-between">
		<h5 class="mb-1">List group item heading</h5>
		<small class="text-muted">3 days ago</small>
	  </div>
	  <p class="mb-1">Some placeholder content in a paragraph.</p>
	  <small class="text-muted">And some muted small print.</small>
	</a>
</div>

Badges

Badges are a multi-use component that is great for adding a 'count' to something or labeling. See some examples below.

Examples

Button with Badgebutton.btn > span.badge.{modifier classes for style as shown}
Large Primary Badge.badge .badge-primary / .badge-alt
Large Badge
Large Badge
Large Filled Badge.badge.badge-filled .badge-primary / .badge-alt
Large Filled Primary Badge
Large Filled Alt Badge
Badge Primary/Alt Compact.badge.badge-compact (optional .badge-filled) .badge-primary / .badge-alt (or color modifier)
Compact Primary
Compact Alt
Background Color Modifier Classes.badge.{modifier color classes as shown}
.badge.bg-primary .badge.bg-light.text-dark .badge.bg-success .badge.bg-danger .badge.bg-warning.text-dark .badge.bg-info.text-light .badge.bg-dark
| Bootstrap Documentation 
<span class="badge badge-primary">Large Badge</span>
<span class="badge badge-alt">Large Badge</span>
<span class="badge badge-filled badge-primary">Large Filled Primary Badge</span>
<span class="badge badge-filled badge-alt">Large Filled Alt Badge</span>
<span class="badge badge-primary badge-compact">Compact Primary</span>
<span class="badge badge-alt badge-compact">Compact Alt</span>

<button type="button" class="btn btn-primary">Notifications <span class="badge bg-light btn-badge text-dark">4</span></button>

<span class="badge bg-primary">.badge.bg-primary</span>
<span class="badge bg-light text-dark">.badge.bg-light.text-dark</span>
<span class="badge bg-success">.badge.bg-success</span>
<span class="badge bg-danger">.badge.bg-danger</span>
<span class="badge bg-warning text-dark">.badge.bg-warning.text-dark</span>
<span class="badge bg-info text-light">.badge.bg-info.text-light</span>
<span class="badge bg-dark">.badge.bg-dark</span>

Cards

Examples

Default Card.card
Default card title

Card heading text

Cards are great for content you want to draw attention to. Can be used with/without buttons, images, etc.

Confirm Cancel
Small card with headings and button.card-sm
Small card title

Small card heading text

Small card version has same style & features as default card, but adds max-width of 480px. (Height has no maximum limit.)

The following data is for official use only, and is subject to PRIVACY ACT. Please confirm to proceed.

Confirm Cancel

Functions and Interactions

| Bootstrap Documentation 
<div class="card">
    <div class="card-body">
      <h5 class="card-title">Default card title</h5>
      <h2 class="mb-2">Card heading text</h2>
      <p class="card-text">Cards are great for content you want to draw attention to. Can be used with/without buttons, images, etc.</p>
      <hr>
      <a href="#" class="btn btn-primary">Confirm</a>
      <a href="#" class="btn btn-alt">Cancel</a>
    </div>
</div>
<div class="card-sm">
    <div class="card-body">
      <h5 class="card-title">Small card title</h5>
      <h2 class="mb-2">Small card heading text</h2>
      <p class="card-text">Small card version has same style & features as default card, but adds max-width of 480px. (Height has no maximum limit.)</p>
      <p class="card-text">The following data is for official use only, and is subject to PRIVACY ACT. Please confirm to proceed.</p>
      <hr>
      <a href="#" class="btn btn-primary">Confirm</a>
      <a href="#" class="btn btn-alt">Cancel</a>
    </div>
</div>

Tooltips

Tooltips are a great way to offer additional information to users, as they interact with UI elements. They are toggled on hover as well as sticking when focused until they lose focus.

Examples

Tooltip on link text with placement<a> (plus 'data-bs-' attributes shown below)

Placeholder text to demonstrate some inline links with tooltips.

Tooltip on button with placementbutton.btn (plus 'data-bs-' attributes shown below)
Tooltip with HTML.section-classname

Tooltip options and requirements

Must be initialized using .js (example below)
<script>

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

	return new bootstrap.Tooltip(tooltipTriggerEl)

})

</script>
Mandatory
  • data-bs-toggle="tooltip"
  • data-bs-title="[your title (& optional HTML)]"
Optional
  • data-bs-html="true" - (Mandatory if using HTML)
  • data-bs-placement="[top (default)/right/bottom/left]"

Functions and Interactions

| Bootstrap Documentation 
<!-- Initialize script to activate tooltips -->
<script>

	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

		return new bootstrap.Tooltip(tooltipTriggerEl)

	})

</script>

<!-- Tooltip on text link -->
<p>Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip" data-bs-placement="top">inline links</a> with tooltips.</p>

<!-- Tooltip on button -->
<button type="button" class="btn btn-alt" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
	Tooltip on top
</button>
<button type="button" class="btn btn-alt" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
	Tooltip on right
</button>
<button type="button" class="btn btn-alt" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
	Tooltip on bottom
</button>
<button type="button" class="btn btn-alt" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
	Tooltip on left
</button>

<!-- Tooltip on button with HTML -->
<button type="button" class="btn btn-alt" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
	Tooltip with HTML
</button>

Popovers

Examples

Popover on a.btn-linkbutton.btn (plus 'data-bs-' attributes shown below)
Using a button link as a popover.
Styled Bootstrap Popoverbutton.btn (plus 'data-bs-' attributes shown below)
Dismissable Popover.section-classname
Dismissible popover

Popover options and requirements

Must initialize using .js (example below)
<script>

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))

var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {

	return new bootstrap.Popover(popoverTriggerEl)

})

</script>
Mandatory
  • data-bs-toggle="popover"
  • data-bs-content="[your content]"
Optional
  • data-bs-title="[your title]"
  • data-bs-placement="[top (default)/right/bottom/left]"
  • data-bs-trigger="focus" (else default is toggled on/off by clicking object)

Functions and Interactions

| Bootstrap Documentation 
<!-- Initialize script to activate popovers -->
<script>

	var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))

	var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {

		return new bootstrap.Popover(popoverTriggerEl)

	})

</script>						

<!-- Button Link Example -->
Using a <a tabindex="0" class="btn-link" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="[Popover title]" data-bs-content="[Popover content]">button link</a> as a popover.

<!-- Toggleable Popover on Button -->
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="[Popover content]" popover-link="#">Click to toggle popover</button>

<!-- Dismissable Popover on Button -->
<a tabindex="0" class="btn btn-lg btn-primary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="[Popover title]" data-bs-content="[Popover content]">Dismissible popover</a>

Close/Dismiss

Examples

Default close/dismiss buttonbutton.btn-close
Disabled close/dismiss buttonbutton.btn-close:disabled
On dark background close/dismiss buttonbutton.btn-close.btn-close-white

Functions and Interactions

| Bootstrap Documentation 
<!-- Default -->
<button type="button" class="btn-close" aria-label="Close"></button>
<!-- Disabled -->
<button type="button" class="btn-close" disabled aria-label="Close"></button>
<!-- Dark BG -->
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>

Collapse

Examples

Text link with hrefa.btn-link (href="#targetId" data-bs-toggle="collapse" role="button")
Button with 'data-' attributebutton.btn.btn-primary (href="#targetId" data-bs-toggle="collapse")
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Accessibility

  • DO usearia-expanded="(true/false)" on control element.
    (If default expanded, use true. If default collapsed, use false.)
  • If control is NOT <button> (ie: <a>, etc.), addrole="button"
  • DO use aria-controls="collapseContainerID" to convey relationship to assistive technologies.

Read more about implementing accessibility for this component.

Functions and Interactions

| Bootstrap Documentation 
<!-- Text link example -->
<a class="btn-link collapsed" href="#collapseExample-BtnLink" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample-BtnLink">
	Link with href
</a>
<div class="collapse mt-3" id="collapseExample-BtnLink">
	<div class="card card-body">
		Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
	</div>
</div>

<!-- Button example -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample-Btn" aria-expanded="false" aria-controls="collapseExample-Btn">
	Collapse Button
</button>
<div class="collapse mt-3" id="collapseExample-Btn">
	<div class="card card-body">
	Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
	</div>
</div>

Progress

Examples

Progress Barsdiv.progressLabel ~ div.progress > div.progress-bar
Label Name

Functions and Interactions

| Bootstrap Documentation 
<!-- Bootstrap HTML -->
<div class="progressLabel" translate [translateParams]="(Parameters)">Label Name</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Pagination

Examples

Default paginationul.pagination > li.page-item > a.page-link
Pagination with disabled & active states
ul.pagination > li.page-item.[active/disabled] > a.page-link

Functions and Interactions

| Bootstrap Documentation 
<nav aria-label="...">
	<ul class="pagination justify-content-center">
		<li class="page-item disabled">
			<a class="page-link">Previous</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item active" aria-current="page">
			<a class="page-link" href="#">2</a>
		</li>
		<li class="page-item"><a class="page-link" href="#">3</a></li>
		<li class="page-item">
			<a class="page-link" href="#">Next</a>
		</li>
	</ul>
</nav>

Spinners

Examples

Border Spinners.classes
{example HTML}
Growing Spinners.classes
{example HTML}
Button Spinners.classes
{example HTML}

Functions and Interactions

| Bootstrap Documentation