Components
= not available in Styleguide
= only available in Styleguide
Advanced options
Check Bootstrap for more advanced options
Accordion / collapse
Show code
<div class="accordion accordion-icons" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button aria-controls="collapseOne" aria-expanded="true"
class="btn btn-block btn-link" data-target="#collapseOne" data-toggle="collapse"
type="button">
<img
src="https://storybook.talentech.io/images/svg/products/light/talentech.svg">
Collapsible Group Item #1</button>
</h2>
</div>
<div aria-labelledby="headingOne" class="collapse show" data-parent="#accordionExample"
id="collapseOne">
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0"><button aria-controls="collapseTwo" aria-expanded="false"
class="btn btn-link btn-block collapsed" data-target="#collapseTwo"
data-toggle="collapse" type="button">Collapsible Group Item #2</button>
</h2>
</div>
<div aria-labelledby="headingTwo" class="collapse" data-parent="#accordionExample"
id="collapseTwo">
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
Alert
Alert info
h2 subtitle
Paragraph
Alert primary
h2 subtitle
Paragraph
Alert secondary
h2 subtitle
Paragraph
Alert success
h2 subtitle
Paragraph
Alert warning
h2 subtitle
Paragraph
Alert danger
h2 subtitle
Paragraph
Show code
<div class="alert alert-info shadow alert-dismissible fade show" role="alert">
<div class="d-flex">
<div class="alert-image pr-4">
<img src="images/svg/alert-info.svg" alt="">
</div>
<div class="flex-grow-1">
<h1>Alert info</h1>
<h2>h2 subtitle</h2>
<p>Paragraph</p>
</div>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-outline-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-primary shadow alert-dismissible fade show" role="alert">
<div class="d-flex">
<div class="alert-image pr-4">
<img src="images/svg/alert-info.svg" alt="">
</div>
<div class="flex-grow-1">
<h1>Alert primary</h1>
<h2>h2 subtitle</h2>
<p>Paragraph</p>
</div>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-outline-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-secondary shadow alert-dismissible fade show" role="alert">
<div class="d-flex">
<div class="alert-image pr-4">
<img src="images/svg/alert-secondary.svg" alt="">
</div>
<div class="flex-grow-1">
<h1>Alert secondary</h1>
<h2>h2 subtitle</h2>
<p>Paragraph</p>
</div>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-outline-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success shadow alert-dismissible fade show" role="alert">
<div class="d-flex">
<div class="alert-image pr-4">
<img src="images/svg/alert-success.svg" alt="">
</div>
<div class="flex-grow-1">
<h1>Alert success</h1>
<h2>h2 subtitle</h2>
<p>Paragraph</p>
</div>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-outline-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-warning shadow alert-dismissible fade show" role="alert">
<div class="d-flex">
<div class="alert-image pr-4">
<img src="images/svg/alert-warning.svg" alt="">
</div>
<div class="flex-grow-1">
<h1>Alert warning</h1>
<h2>h2 subtitle</h2>
<p>Paragraph</p>
</div>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-outline-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-danger shadow alert-dismissible fade show" role="alert">
<div class="d-flex">
<div class="alert-image pr-4">
<img src="images/svg/alert-danger.svg" alt="">
</div>
<div class="flex-grow-1">
<h1>Alert danger</h1>
<h2>h2 subtitle</h2>
<p>Paragraph</p>
</div>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-outline-primary">Button</button>
<button class="btn btn-primary">Button</button>
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Avatar
.avatar .avatar-{size} .{radius} .avatar-{variant}
For example
.avatar .avatar-xxl .rounded-circle .avatar-outline
Circle .rounded-circle
xxs
16
FL
xs
24
FL
sm
32
FL
md
40
FL
lg
48
FL
xl
56
FL
xxl
64
FL
3xl
80
FL
4xl
96
FL
5xl
112
FL
6xl
128
FL
7xl
144
FL
Square .rounded-lg
xxs
16
FL
xs
24
FL
sm
32
FL
md
40
FL
lg
48
FL
xl
56
FL
xxl
64
FL
3xl
80
FL
4xl
96
FL
5xl
112
FL
6xl
128
FL
7xl
144
FL
Variants
avatar-outline rounded-circle
Icon
Letter
FL
Image
avatar-filled rounded-circle
FL
avatar-outline rounded-lg
FL
avatar-filled rounded-lg
FL
Avatar + author left and right
Add helper classes for margins/padding depending on context.
Left
Firstname Lastname
Optional subtitle
Right
Firstname Lastname
Optional subtitle
Show code
<h3>Left</h3>
<div class="avatar-author avatar-author-left d-inline-flex">
<div class="avatar avatar-lg avatar-outline rounded-circle">
<img src="http://www.thispersondoesnotexist.com">
</div>
<div class="d-flex">
<div class="row-column align-self-center">
<h3 class="h5 author p-0 m-0">Firstname Lastname</h3>
<p class="p-0 m-0">Optional subtitle</p>
</div>
</div>
</div>
<h3>Right</h3>
<div class="avatar-author avatar-author-right d-inline-flex">
<div class="avatar avatar-lg avatar-outline rounded-circle">
<img src="http://www.thispersondoesnotexist.com">
</div>
<div class="d-flex">
<div class="row-column align-self-center">
<h3 class="h5 author p-0 m-0">Firstname Lastname</h3>
<p class="p-0 m-0">Optional subtitle</p>
</div>
</div>
</div>
Badges and pills
Badges and pills take the text size of the parent. If placed with a heading, it'll be that height.
Badges
Note badge badge-info
Note badge badge-primary
Note badge badge-secondary
Note badge badge-success
Note badge badge-warning
Note badge badge-danger
Note badge badge-light
Note badge badge-dark
Pills
Note badge badge-pill badge-info
Note badge badge-pill badge-primary
Note badge badge-pill badge-secondary
Note badge badge-pill badge-success
Note badge badge-pill badge-warning
Note badge badge-pill badge-danger
Note badge badge-pill badge-light
Note badge badge-pill badge-dark
Show code
<p>Badges</p>
<p><span class="badge badge-info">Note</span> badge badge-info</p>
<p><span class="badge badge-primary"> Note</span> badge badge-primary</p>
<p><span class="badge badge-secondary"> Note</span> badge badge-secondary</p>
<p><span class="badge badge-success">Note</span> badge badge-success</p>
<p><span class="badge badge-warning">Note</span> badge badge-warning</p>
<p><span class="badge badge-danger">Note</span> badge badge-danger</p>
<p><span class="badge badge-light">Note</span> badge badge-light</p>
<p><span class="badge badge-dark">Note</span> badge badge-dark</p>
<p>Pills</p>
<p><span class="badge badge-pill badge-info">Note</span> badge badge-pill badge-info</p>
<p><span class="badge badge-pill badge-primary">Note</span> badge badge-pill badge-primary</p>
<p><span class="badge badge-pill badge-secondary">Note</span> badge badge-pill badge-secondary</p>
<p><span class="badge badge-pill badge-success">Note</span> badge badge-pill badge-success</p>
<p><span class="badge badge-pill badge-warning">Note</span> badge badge-pill badge-warning</p>
<p><span class="badge badge-pill badge-danger">Note</span> badge badge-pill badge-danger</p>
<p><span class="badge badge-pill badge-light">Note</span> badge badge-pill badge-light</p>
<p><span class="badge badge-pill badge-dark">Note</span> badge badge-pill badge-dark</p>
Blockquote
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Show code
<p>Blockquote</p>
<blockquote class="blockquote">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolorem</p>
</blockquote>
Box
"Box" is not a component, but a collection of helper classes that create a container with border, shadows, colors etc. They allow for highly flexible design of a container. They can be attatched to virtually anything such as row, container, column, p, H-, a etc.
a col-5 box
a box
a H2 box
Breadcrumbs
Show code
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Candidate list</a></li>
<li class="breadcrumb-item active" aria-current="page">John Andersen</li>
</ol>
</nav>
Buttons
These buttons are smaller than the Figma design. This is because of legacy: we have a lot of forms where a button comes right after an input field, and until input fields are also changed to the right height, these buttons keep the old height to match.
Solid
Solid disabled
Outline
Outline disabled
Sizing: large, default, small
Sizing: block
!Custom button: for use with Danish Mit-ID only!
Show code
<p class="pt-3">Solid</p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<p class="pt-3">Solid disabled</p>
<button type="button" class="btn btn-primary" disabled>Primary</button>
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-success" disabled>Success</button>
<button type="button" class="btn btn-danger" disabled>Danger</button>
<button type="button" class="btn btn-warning" disabled>Warning</button>
<button type="button" class="btn btn-info" disabled>Info</button>
<button type="button" class="btn btn-light" disabled>Light</button>
<button type="button" class="btn btn-dark" disabled>Dark</button>
<button type="button" class="btn btn-link" disabled>Link</button>
<p class="pt-3">Outline</p>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<p class="pt-3">Outline disabled</p>
<button type="button" class="btn btn-outline-primary" disabled>Primary</button>
<button type="button" class="btn btn-outline-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-outline-success" disabled>Success</button>
<button type="button" class="btn btn-outline-danger" disabled>Danger</button>
<button type="button" class="btn btn-outline-warning" disabled>Warning</button>
<button type="button" class="btn btn-outline-info" disabled>Info</button>
<button type="button" class="btn btn-outline-light" disabled>Light</button>
<button type="button" class="btn btn-outline-dark" disabled>Dark</button>
<p class="pt-3">Sizing: large, default, small</p>
<button type="button" class="btn btn-primary btn-lg">primary lg</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-primary btn-sm">primary sm</button>
<p class="pt-3">Sizing: block</p>
<button type="button" class="btn btn-primary btn-block">primary block</button>
<p class="pt-3">!Custom button: for use with Danish Mit-ID only!</p>
<button type="button" class="btn btn-primary btn-mitid">Mit-ID</button>
Action buttons
Vertical
Horisontal
Show code
<p>Vertical</p>
<button type="button" class="btn btn-sq">
<i class="fal fa-plus fa-fw"></i>
<p>Project</p>
</button>
<button type="button" class="btn btn-sq btn-sq-success">
<i class="fal fa-plus fa-fw"></i>
<p>Project</p>
</button>
<button type="button" class="btn btn-sq btn-sq-danger">
<i class="fal fa-plus fa-fw"></i>
<p>Project</p>
</button>
<p class="pt-5">Horisontal</p>
<button type="button" class="btn btn-sq-horisontal btn-sq-horisontal"><i
class="fal fa-plus fa-fw"></i></i>Project</button>
<button type="button" class="btn btn-sq-horisontal btn-sq-horisontal-success"><i
class="fal fa-plus fa-fw"></i>Project</button>
<button type="button" class="btn btn-sq-horisontal btn-sq-horisontal-danger"><i
class="fal fa-plus fa-fw"></i>Project</button>
Button group
Single button group:
And groups of button groups:
Show code
<p>Single button group:</p>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<p>And groups of button groups:</p>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary">1</button>
<button type="button" class="btn btn-outline-primary">2</button>
<button type="button" class="btn btn-outline-primary">3</button>
<button type="button" class="btn btn-outline-primary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-primary">5</button>
<button type="button" class="btn btn-outline-primary">6</button>
<button type="button" class="btn btn-outline-primary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-outline-primary">8</button>
</div>
</div>
Export file buttons
Show code
<ul role="navigation" class="nav exportIcons" aria-label="file export options">
<li aria-label="code export"><a href="/"><span class="fal fa-file-code-o hr-purple"></span></a>
</li>
<li aria-label="Excel"><a href="/"><span class="fal fa-file-excel-o hr-green"></span></a></li>
<li aria-label="pdf"><a href="/"><span class="fal fa-file-pdf-o hr-red"></span></a></li>
<li aria-label="Powerpoint"><a href="/"><span
class="fal fa-file-powerpoint-o hr-orange"></span></a></li>
<li aria-label="zip"><a href="/"><span class="fal fa-file-archive-o hr-yellow"></span></a></li>
<li aria-label="comma-separated"><a href="/"><span class="fal fa-file-csv hr-green"></span></a>
</li>
<li aria-label="Word"><a href="/"><span class="fal fa-file-word-o hr-blue"></span></a></li>
</ul>
Card
All formatting options.
For proper padding in the card container, the content needs to be wrapped in their corresponding containers. .card-header for the header content, .card-body for body content, .card-footer for the footer, and .card-img-top for images. Text inside the .card-body should use formatting classes (.card-title, .card-subtitle, .card-text and .card-link). See Bootstrap documentation for card-deck, card rows, directions, and colour handling.
Card header title
Card title
Card subtitle
Text properly formatted using the .card-text CSS class. Looks great doesn’t it? Yes, it certainly does.
Card link Another linkShow code
<div class="card">
<img class="card-img-top" src="https://picsum.photos/400/70" alt="">
<div class="card-header">
Card header title
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Text properly formatted using the .card-text CSS class. Looks
great doesn’t it? Yes, it certainly does.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
<div class="card-footer">
Card footer text
</div>
</div>
Chat
Firstname Lastname badge
16:52
Sed ut perspiciatis unde omnis iste @username natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt atur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Lorem ipsum
Firstname Lastname badge
16:52
Sed ut perspiciatis unde omnis iste @username natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt atur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Lorem ipsum
Show code
<div class="chat">
<div class="chat-wrap">
<div class="chat-date-bar">
<h3 class="chat-date chat-date-line h5">Nov 24, 2023</h3>
</div>
<div class="chat-left">
<div class="chat-author-wrap d-flex justify-content-between">
<div class="chat-author">
<div class="avatar-author avatar-author-left d-inline-flex">
<div class="avatar avatar-md avatar-outline rounded-circle">
<img src="http://www.thispersondoesnotexist.com">
</div>
<div class="d-flex">
<div class="row-column align-self-center">
<h3 class="h5 author p-0 m-0">Firstname Lastname <div class="badge badge-success">badge</div></h3>
<p class="p-0 m-0">16:52</p>
</div>
</div>
</div>
</div>
<div class="chat-more">
<button role="button" class="btn btn-outline-secondary border-0 bg-transparent"><i class="fa fa-ellipsis"></i></button>
</div>
</div>
<div class="chat-bubble-wrap">
<div class="chat-bubble">
Sed ut perspiciatis unde omnis iste <a href="#">@username</a> natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt atur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
<div class="chat-bubble-wrap">
<div class="chat-bubble">
Lorem ipsum
</div>
</div>
</div>
<div class="chat-date-bar">
<h3 class="chat-date chat-date-line h5">Nov 24, 2023</h3>
</div>
<div class="chat-right">
<div class="chat-author-wrap d-flex justify-content-between">
<div class="chat-author">
<div class="avatar-author avatar-author-right d-inline-flex">
<div class="avatar avatar-md avatar-outline rounded-circle">
<img src="http://www.thispersondoesnotexist.com">
</div>
<div class="d-flex">
<div class="row-column align-self-center">
<h3 class="h5 author p-0 m-0">Firstname Lastname <div class="badge badge-success">badge</div></h3>
<p class="p-0 m-0">16:52</p>
</div>
</div>
</div>
</div>
<div class="chat-more">
<button role="button" class="btn btn-outline-secondary border-0 bg-transparent"><i class="fa fa-ellipsis"></i></button>
</div>
</div>
<div class="chat-bubble-wrap">
<div class="chat-bubble">
Sed ut perspiciatis unde omnis iste <a href="#">@username</a> natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt atur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
<div class="chat-bubble-wrap">
<div class="chat-bubble">
Lorem ipsum
</div>
</div>
</div>
</div>
<div class="chat-comment-wrap">
<div class="chat-comment p-2">
<form>
<div class="form-group">
<label for="exampleFormControlTextarea1">New comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Enter your comment" rows="1"></textarea>
</div>
<div class="d-flex flex-row-reverse">
<button type="submit" id="submit" class="btn btn-primary pull-right">Add</button>
</div>
</form>
</div>
</div>
</div>
Show code
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehend
</div>
</div>
Counterbar / statsbar
A bar containing counters. Digits, sparklines, tiny charts, AmCharts, images, or similar statistics. Note: translate aria-lable.
counter-card-title
45.324
counter-card-title
6543
counter-card-title
1,000
counter-card-title
12
Show code
<div role="region" aria-label="Statisics summary" class="counter-bar">
<div class="col">
<div class="card-deck counter-card-deck card-columns">
<div class="card counter-card">
<div class="card-body counter-card-body">
<div class="card-title counter-card-title lead h5">counter-card-title</div>
<div class="d-flex">
<div class="px-2">
<p class="card-text counter-card-text">45.324</p>
<div class="card-footer counter-card-footer">
<p class="text-muted">counter-card-footer</p>
</div>
</div>
</div>
</div>
</div>
<div class="card counter-card ">
<div class="card-body counter-card-body">
<div class="card-title counter-card-title lead h5">counter-card-title</div>
<div class="d-flex">
<div class="px-2">
<p class="card-text counter-card-text">6543</p>
<div class="card-footer counter-card-footer">
<p class="text-muted">counter-card-footer</p>
</div>
</div>
</div>
</div>
</div>
<div class="card counter-card ">
<div class="card-body counter-card-body">
<div class="card-title counter-card-title lead h5">counter-card-title</div>
<div class="d-flex">
<div class="px-2">
<p class="card-text counter-card-text">1,000</p>
<div class="card-footer counter-card-footer">
<p class="text-muted">counter-card-footer</p>
</div>
</div>
</div>
</div>
</div>
<div class="card counter-card">
<div class="card-body counter-card-body">
<div class="card-title counter-card-title lead h5">counter-card-title</div>
<div class="d-flex">
<div class="counter-dataviz">
<img src="/v2/images/illustrations/doughnut-chart.png"/><!--PLACEHOLDER FOR DATAVIZ-->
</div>
<div class="px-2">
<p class="card-text counter-card-text">12</p>
<div class="card-footer counter-card-footer">
<p class="text-muted">counter-card-footer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Disabled background / stripey
Use as background when information that one would expect to find, is not available. Provide an information-popup with the fa-info-circle to explain why this is not available unless this information is explicitly provided somewhere else in the context. Simply add the class stripesB on anything for stripes.
Table example
| Normal table row |
| Table row with .stripesB |
| Normal table row |
h1 class .stripesB
Show code
<h4 class="pt-3">Table example</h4>
<div class="table-responsive">
<table class="table table-hover">
<tbody class="">
<tr>
<td>Normal table row</td>
</tr>
<tr class="stripesB">
<td>
<span class="fa fa-info-circle hr-blue pr-1"></span>Table row with .stripesB
</td>
</tr>
<tr>
<td>Normal table row</td>
</tr>
</tbody>
</table>
</div>
<h1 class="stripesB">h1 class .stripesB</h1>
Dropdown
Show code
<div class="row">
<div class="dropdown mr-1">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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 class="dropdown mr-1">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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 class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop up
</button>
<div class="dropdown-menu" aria-labelledby="dropupMenuButton">
<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>
Dropzone list item
These are simulated list items for a visual hint on a dropzone. They indicate that you can drag a row from somewhere and dump it on top of these.
Show code
<div class="container">
<div class="row dropFieldItem">
</div>
<div class="row dropFieldItem">
</div>
</div>
Help-text box
To give unintrusive, human-language-friendly information to newbies – that are easily ignored by experienced users. Therefore, placed at the bottom of the container.
Here is a very friendly and unobtrusive help text. It can be quite long, and the language should be as if a person is talking to another. Use "you" and "we". Also, this would be a good place to put context (aware) links to help pages etc. I even made the links in this box a little different, to go with chatty tone and to set it apart from the formality of the rest of the applications. Here, is a link that demonstrates this.
Show code
<div class="col-12 helpBox">
<p class="text-muted pt-1"><span class="far fa-info-circle"></span>
Here is a very friendly and unobtrusive help text. It can be quite long..</p>
</div>
Figure (image w caption)
Show code
<figure class="figure">
<img src="https://picsum.photos/500/300" class="figure-img img-fluid rounded"
alt="DESCRIBE IMAGE">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
Show code
<a href="#">I'm a link</a>
List group / link list
See Bootstrap for a plethora of options.
Show code
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Active link item
</a>
<a href="#" class="list-group-item list-group-item-action">
Dapibus ac facilisis in
<span class="badge badge-primary d-block float-right">64</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
Morbi leo risus
</a>
<a href="#" class="list-group-item list-group-item-action">
Porta ac consectetur ac
<span class="badge badge-success d-block float-right">Completed</span>
</a>
<a href="#" class="list-group-item list-group-item-action disabled">
Disabled link item
</a>
</div>
Modal
Show code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExample1">
Modal with header, footer and form
</button>
<div class="modal fade" id="modalExample1" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">This is a form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="to-email" class="col-form-label">Send email to:</label>
<input type="text" class="form-control" id="to-email">
</div>
<div class="form-group">
<label for="email-text" class="col-form-label">Email text:</label>
<textarea class="form-control" id="email-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send the email</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExample2">
Large modal
</button>
<div class="modal fade" id="modalExample2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
This is a large modal
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExample3">
Small modal
</button>
<div class="modal fade" id="modalExample3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
This is a small modal
</div>
</div>
</div>
</div>
Navbar
Show code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<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="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Offcanvas
bs-canvas-header
Sticky section
bs-canvas-content
Content
Show code
<!--Trigger-->
<button class="btn btn-danger" type="button" data-toggle="canvas" data-target="#bs-canvas-right" aria-expanded="false" aria-controls="bs-canvas-right">Trigger</button>
<!--Trigger-->
<div id="bs-canvas-right" class="bs-canvas bs-canvas-right position-fixed bg-light w-100 h-100">
<div class="sticky-top bg-light">
<header class="bs-canvas-header p-3 overflow-auto border-bottom">
<button type="button" class="bs-canvas-close float-right close" aria-label="Close" aria-expanded="false"><span aria-hidden="true">×</span></button>
<h3 class="h4 d-inline-block mb-0 float-left">bs-canvas-header</h3>
</header>
<div class="d-inline-flex p-3 py-3">
<div class="d-flex">
<p>Sticky section</p>
</div>
</div>
</div>
<div class="bs-canvas-content px-3 pt-2 h-100 d-flex flex-column border-top">
<h3 class="h5">bs-canvas-content</h3>
<div class="col">
<p>Content</p>
</div>
<div class="bs-canvas-footer bg-light pt-3">
<div class="mb-3">
<h3 class="h5">Sticky-canvas-footer</h3>
</div>
<div class="border-top row">
<div class="col p-3">
<button type="button" class="btn btn-outline-primary btn-block bs-canvas-close " aria-label="Close" aria-expanded="false"><span aria-hidden="true">Close</span></button>
</div>
</div>
</div>
</div>
</div>
Pagination
Append .disabled to the .page-item as per the example.
The current active page should have the class .active. For the “previous” and “next” links, make sure you add the screen-reader only (.sr-only)
text, as icon-only is not good enough for accessibility. Wrap in a <nav> element with a descriptive aria-label.
Show code
<nav aria-label="Pagination">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<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="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Progress & wizard
Wizard
Note! This wizard has not been tested with lots of steps. Please verify for small screens. To control the colours per step the finished step(s) must have the class is-complete and the active (current) must have the class is-active
Progress bars
Extra small
Small
Normal
Large
Text inside the progress bars:
Different background colors to indicate stages:
Solid
Show code
<h3 class="h5">Wizard</h3>
<div class="progress-wizard">
<ol class="steps">
<li class="step is-complete" data-step="1">
<a href="#">Item one</a>
</li>
<li class="step is-active" data-step="2">
<a href="#">Item two</a>
</li>
<li class="step" data-step="3">
<a href="#">Item three</a>
</li>
</ol>
</div>
<h3 class="h5">Progress bars</h3>
<p>Extra small</p>
<div class="progress progress-xs mb-1">
<div class="progress-bar progressbarBkg" role="progressbar" style="width: 77%"
aria-valuenow="77" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p>Small</p>
<div class="progress progress-sm mb-1">
<div class="progress-bar progressbarBkg" role="progressbar" style="width: 77%"
aria-valuenow="77" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p>Normal</p>
<div class="progress mb-1">
<div class="progress-bar progressbarBkg" role="progressbar" style="width: 77%"
aria-valuenow="77" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>Large</p>
<div class="progress progress-lg mb-1">
<div class="progress-bar progressbarBkg" role="progressbar" style="width: 77%"
aria-valuenow="77" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>Text inside the progress bars:</p>
<div class="progress mb-1">
<div class="progress-bar progressbarBkg" role="progressbar" style="width: 80%"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
Almost done! 80%
</div>
</div>
<p>Different background colors to indicate stages:</p>
<div class="progress">
<div class="progress-bar progressbarBkg3" role="progressbar" style="width: 5%"
aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar progressbarBkg2" role="progressbar" style="width: 43%"
aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar progressbarBkg1" role="progressbar" style="width: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p>Solid</p>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 5%" aria-valuenow="15"
aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 43%" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
Spinner
Expected results: this spinner in the size of your choice, centered on a white opacity overlay.
To add/remove the opacity overlay, add/delete class modal-loading2 and ID
loading2
Small
Loading...
Medium
Loading...
Large
Loading...
Show code
<div class="">
<div class="fa-1x">
<span class="sr-only">Loading...</span>
<i id="" class="spinB fad fa-spin" aria-hidden="true"></i>
</div>
</div>
<p>Medium</p>
<div class="">
<div class="fa-2x">
<span class="sr-only">Loading...</span>
<i id="" class="spinB fad fa-spin" aria-hidden="true"></i>
</div>
</div>
<p>Large</p>
<div class="">
<div class="fa-3x">
<span class="sr-only">Loading...</span>
<i id="" class="spinB fad fa-spin" aria-hidden="true"></i>
</div>
</div>
Splashscreen / errorpage
Place directly on the "empty" background (not inside any white container). It will self-center to the horisontal center of the page.
Show code
<div class="errorCard card col-md-8 col-xl-6 m-auto">
<img src="images/ForbiddenError.svg" class="card-img-top" alt="">
<div class="card-body text-center">
<h1>Title</h1>
<p class="card-text">Description</p>
<div class="row d-flex justify-content-center">
<a href="#" class="btn btn-primary m-1">Link 1</a>
<a href="#" class="btn btn-outline-primary m-1">Link 2</a>
</div>
</div>
</div>
Tabs
Indicate the current active page with .active on the tab link, and disabled with
.disabled
Show code
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Toaster / snackbar
Info! You should check in on some of those
fields below.
Primary You should check in on some of those
fields below.
Secondary You should check in on some of those fields below.
Success! You should check in on some of those fields below.
Danger! You should check in on some of those
fields below.
Warning! You should check in on some of those fields below.
Show code
<div class="toaster">
<div class="alert alert-info shadow alert-dismissible fade show" role="alert">
<strong>Info!</strong> You should check in on some of <a href="#"
class="alert-link">those fields below</a>.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="toaster">
<div class="alert alert-primary shadow alert-dismissible fade show" role="alert">
<strong>Primary</strong> You should check in on some of <a href="#"
class="alert-link">those fields below</a>.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="toaster">
<div class="alert alert-secondary shadow alert-dismissible fade show" role="alert">
<strong>Secondary</strong> You should check in on some of <a href="#"
class="alert-link">those fields below</a>.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="toaster">
<div class="alert alert-success shadow alert-dismissible fade show" role="alert">
<strong>Success!</strong> You should check in on some of <a href="#"
class="alert-link">those fields below</a>.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="toaster">
<div class="alert alert-danger shadow alert-dismissible fade show" role="alert">
<strong>Danger!</strong> You should check in on some of <a href="#"
class="alert-link">those fields below</a>.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="toaster">
<div class="alert alert-warning shadow alert-dismissible fade show" role="alert">
<strong>Warning!</strong> You should check in on some of <a href="#"
class="alert-link">those fields below</a>.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Tooltip
Show code
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right"
title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom"
title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left"
title="Tooltip on left">
Tooltip on left
</button>
v1.0.841-rev-f8d5cfe+f8d5cfe75d5a52f58b13d21aa1ee045f0808d96d
