Components
Progress | Accordion | Badges, pills | Blockquote | Cards | Counter bar | Dropzone list item | Disabled background | Dropdowns | Datepicker | Timepicker | Datepairer | Help-text footer | Tooltips | Alerts | Modals | Error pages | Tables
Progress wizard & bars
Progress Wizard
This is a step-wizard with clickable (links) circles and text lables. 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
Standard Bootstrap
Switch state
Progress wizard
Progress bars
Extra small
Small
Normal
Large
Text inside the progress bars:
Different background colors to indicate stages:
Solid
<h3>Progress 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>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>
Accordion / collapse
Acccordions. Use them with care and consideration.
Detailed docs on how to use the accordion is in the Bootstrap documentation.
Example
<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">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 class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0"><button aria-controls="collapseThree" aria-expanded="false" class="btn btn-link btn-block collapsed" data-target="#collapseThree" data-toggle="collapse" type="button">Collapsible Group Item #3</button></h2>
</div>
<div aria-labelledby="headingThree" class="collapse" data-parent="#accordionExample" id="collapseThree">
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
</div>
</div>
Badges and pills
Badges and pills are small text containers that can be used to give special attention to content. If you need to tell a user that a feature is new, you can use a badge for that. If you want an indicator that a user has 64 unread messages, a badge or pill will work well.
Example
Badges
Note badge badge-info
Note badge badge-primary
Note badge badge-secondaryNote 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-secondaryNote 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
<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>
<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>
<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
Blockquotes are used for direct quotes from people
Example
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?
<p>Blockquote</p>
<blockquote class="blockquote">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolorem</p>
</blockquote>
Cards
Use with care, to avoid endless boxes within boxes.
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), though this is not strictly necessary.
Example
Dark card
This is some text in the proper card-text class.
Naked card
I am a naked card where all borders and backgrounds have been removed.
All the formatting choices
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 link
<div class="row">
<div class="col-md-6 mb-2">
<p>Dark card</p>
<div class="card card-dark">
<div class="card-header">
I'm dark
</div>
<div class="card-body">
<p class="card-text">
This is some text in the proper card-text class.
</p>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<p>Naked card</p>
<div class="card border-0">
<div class="card-header bg-transparent">
Card header
</div>
<div class="card-body">
<p class="card-text">
I am a naked card where all borders and backgrounds have been removed.
</p>
</div>
</div>
</div>
<div class="col-md-6 mb-2">
<p>All the formatting choices</p>
<div class="card">
<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>
</div>
</div>
Status cards
These communicative cards are used for for example system status on a support / help page.
NOTE!
- The card is likely to be wrapped in a .card-deck with other cards.
- The buttons here are NOT buttons but links. Do not copy for other purposes.
- The text is just example.
- Keep the card approximately the proportions used here.
Example
System status unknown
All systems are operating normally.
We are currently experiencing some problems with some functionality.
We are currently experiencing major issues with our systems.
<div class="card-deck">
<div class="card">
<div class="card-header">
<i class="far fa-laptop-medical pr-1"></i>System status
</div>
<div class="card-body">
<h1 class="text-center text-muted pb-3"><i class="far fa-question-circle"></i></h1>
<p class="card-text mb-4">System status unknown</p>
</div>
<div class="card-footer border-0 d-flex bg-transparent">
<a class="btn btn-outline-primary ml-auto" href="#" role="button">See more details</a>
</div>
</div>
<div class="card border-success">
<div class="card-header bg-success text-white">
<i class="fal fa-laptop-medical pr-1"></i>System status
</div>
<div class="card-body">
<h1 class="text-center text-success pb-3"><i class="far fa-smile"></i></h1>
<p class="card-text mb-4">All systems are operating normally.</p>
</div>
<div class="card-footer border-0 d-flex bg-transparent">
<a class="btn btn-outline-success ml-auto" href="#" role="button">See more details</a>
</div>
</div>
<div class="card border-warning">
<div class="card-header bg-warning text-white">
<i class="fal fa-laptop-medical pr-1"></i>System status
</div>
<div class="card-body">
<h1 class="text-center text-warning pb-3"><i class="far fa-meh"></i></h1>
<p class="card-text">We are currently experiencing some problems with some functionality.</p>
</div>
<div class="card-footer border-0 d-flex bg-transparent">
<a class="btn btn-outline-warning ml-auto" href="#" role="button">See more details</a>
</div>
</div>
<div class="card border border-danger">
<div class="card-header bg-danger text-white">
<i class="fal fa-laptop-medical pr-1"></i>System status
</div>
<div class="card-body">
<h1 class="text-center text-danger pb-3"><i class="far fa-frown"></i></h1>
<p class="card-text">We are currently experiencing major issues with our systems.</p>
</div>
<div class="card-footer border-0 d-flex bg-transparent">
<a class="btn btn-outline-danger ml-auto" href="#" role="button">See more details</a>
</div>
</div>
</div>
Counter / stats bar
A bar containing counters. Digits, sparklines, tiny charts, AmCharts, images, or similar statistics. Note: translate aria-lable
Example
65days
Avg. time to hire
78
Active projects
634
Hires
34
Active ads
34
Active projects
543value
Demo counting
<div role="region" aria-label="Statisics summary" class="row statsRow">
<div class="statsBarWrap">
<div class="statsBar d-flex flex-wrap">
<div class="statsBarItem">
<div class="statsBarItemInner d-flex align-items-end justify-content-center">
<div class="statsC">
<h2>65<span class="statsBarUnit">days</span></h2>
<p>Avg. time to hire</p>
</div>
</div>
</div>
<div class="statsBarItem">
<div class="statsBarItemInner d-flex align-items-end justify-content-center">
<div class="statsC">
<h2>78<span class="statsBarUnit"></span></h2>
<p>Active projects</p>
</div>
</div>
</div>
<div class="statsBarItem">
<div class="statsBarItemInner d-flex align-items-end justify-content-center">
<div class="statsC">
<h2>634<span class="statsBarUnit"></span></h2>
<p>Hires</p>
</div>
</div>
</div>
<div class="statsBarItem">
<div class="statsBarItemInner d-flex align-items-end justify-content-center">
<div class="statsC">
<h2>34<span class="statsBarUnit"></span></h2>
<p> Active ads</p>
</div>
</div>
</div>
<div class="statsBarItem">
<div class="statsBarItemInner d-flex align-items-end justify-content-center">
<div class="statsC">
<h2>34<span class="statsBarUnit"></span></h2>
<p>Active projects</p>
</div>
</div>
</div>
<div class="statsBarItem">
<div class="statsBarItemInner d-flex align-items-end justify-content-center">
<div class="statsC">
<h2>543<span class="statsBarUnit">value</span></h2>
<p>Demo counting</p>
</div>
</div>
</div>
</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.
Example
<div class="container">
<div class="row dropFieldItem">
</div>
<div class="row dropFieldItem">
</div>
</div>
Disabled background
Use as background for example when candidate deletes their application, or 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 really, for stripes.
Example
Table example
| Normal table row |
| Table row with .stripesB |
| Normal table row |
h1 class .stripesB
<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"></span>Table row with .stripesB
</td>
</tr>
<tr>
<td>Normal table row</td>
</tr>
</tbody>
</table>
</div>
<h1 class="stripesB">h1 class .stripesB</h1>
Dropdowns
Dropdowns are menus triggered from clicking an element with a dropdown trigger, typically a button but can be any element. It adds the caret, this can be removed or swapped with another icon.
Example
<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>
Datepicker
This component requires including css/flatpickr.min.css and js/flatpickr.min.js in the appropriate places in your page source. See main page template for example.
Use this component for simple date picker popups. For most uses the provided examples will be enough, but if you need more complex functionality, go read the Flatpickr documentation.
Example
<div class="form-group">
<label>Default Functionality</label>
<div class="form-container-width">
<div class="input-group">
<div class="input-group" id="dateWrapper">
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="datepicker" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
<script type="text/javascript">
$('#dateWrapper').flatpickr({wrap: true});
</script>
</div>
</div>
<div class="form-group">
<label>Date format</label>
<div class="form-container-width">
<div class="input-group" id="datepickerFormat">
<input type="text" class="form-control" placeholder="yyyy/mm/dd" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
<script type="text/javascript">
$('#datepickerFormat').flatpickr({
wrap: true,
dateFormat: 'Y/m/d'
});
</script>
</div>
<div class="form-group">
<label>Multiple Dates</label>
<div class="form-container-width">
<div class="input-group" id="datepicker-multiple-date">
<input type="text" class="form-control" placeholder="yyyy-mm-dd" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
<script type="text/javascript">
$('#datepicker-multiple-date').flatpickr({
wrap: true,
mode: 'multiple'
});
</script>
</div>
</div>
<div class="form-group">
<label>Date Range</label>
<div class="form-container-width">
<div class="input-group" id="date-range">
<input type="text" class="form-control" placeholder="yyyy-mm-dd to yyyy-mm-dd" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
<script type="text/javascript">
$('#date-range').flatpickr({
wrap: true,
mode: 'range'
});
</script>
</div>
</div>
Timepicker
This component requires including /css/flatpickr.css and /js/flatpickr.min.js in the appropriate places in your page source.
Use this component for simple time picker popups. For most uses the provided examples will be enough, but if you need more complex functionality, go read the Flatpickr documentation.
Example
<div class="form-group">
<label>Default Functionality</label>
<div class="form-container-width" id="basicWrapper">
<div id="basicTimepciker" class="input-group col-sm-4">
<input type="text" class="form-control" placeholder="hh:mm" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
<script type="text/javascript">
$("#basicTimepciker").flatpickr({
wrap: true,
enableTime: true,
noCalendar: true,
time_24hr: true
});
</script>
</div>
</div>
<div class="form-group">
<label>TimeFormat</label>
<div class="form-container-width">
<div id="timePicker-format" class="input-group col-sm-4">
<input type="text" class="form-control" data-input />
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
<script type="text/javascript">
$("#timePicker-format").flatpickr({
wrap: true,
enableTime: true,
noCalendar: true,
dateFormat: "H:i K",
time_24hr: false
});
</script>
</div>
</div>
DatePairer
This component requires /js/flatpickr.min.js and /js/flatpickr.min.js in the appropriate places in your page source. See main page template for example.
Use this component for for comparing end/start date, time or both. For most uses the provided examples will be enough, but if you need more complex functionality, go read the Flatpickr documentation.
Example
<div class="form-group">
<label>Compare Date</label>
<div class="form-container-width">
<div id="datepair" class="row">
<div class="col-sm-6">
<div class="input-group" id="datepairStart">
<input type="text" class="form-control" placeholder="start date" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group" id="datepairEnd">
<input type="text" provide="datepicker" class="form-control" placeholder="end date" data-input >
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var startPicker = $("#datepairStart").flatpickr({
wrap: true,
onChange: function (dateObj, dateStr) {
var endDate = endPicker.selectedDates[0];
if (endDate < dateObj[0]) {
endPicker.setDate(dateStr, true);
}
}
});
var endPicker = $("#datepairEnd").flatpickr({
wrap: true,
onChange: function (dateObj, dateStr) {
var startDate = startPicker.selectedDates[0];
if (startDate > dateObj[0]) {
startPicker.setDate(dateStr, true);
}
}
});
</script>
</div>
<div class="form-group">
<label>Compare Time</label>
<div class="form-container-width">
<div id="timepair" class="row">
<div id="timepairStart" class="input-group col-sm-4">
<input type="text" class="form-control" placeholder="start time" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
<div id="timepairEnd" class="input-group col-sm-4">
<input type="text" class="form-control" placeholder="end time" data-input>
<div class="input-group-append">
<button class="btn btn-md btn-outline-secondary" type="button" data-toggle>
<i class="fa fa-clock-o"></i>
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var startPicker = $("#timepairStart").flatpickr({
wrap: true,
enableTime: true,
noCalendar: true,
time_24hr: true,
onChange: function (dateObj, dateStr) {
var endDate = endPicker.selectedDates[0];
if (endDate < dateObj[0]) {
endPicker.setDate(dateStr, true);
}
}
});
var endPicker = $("#timepairEnd").flatpickr({
wrap: true,
enableTime: true,
noCalendar: true,
time_24hr: true,
onChange: function (dateObj, dateStr) {
var startDate = startPicker.selectedDates[0];
if (startDate > dateObj[0]) {
startPicker.setDate(dateStr, true);
}
}
});
</script>
</div>
Help-text box
To give unintrusive, human-language-friendly information to newbies – that are easily ignored by experienced users. Therefore, it will be placed at the bottom of the page.
Example
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.
<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, 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, <a href="/">is a link</a> that demonstrates this.</p>
</div>
Tooltips
Tooltips are the handy little descriptive labels that show up when you hover over an element. They can be used on any kind of element, but for this style guide we will demonstrate on buttons.
Beware: On JavaScript generated pages, you may sometimes need to trigger the tooltip script after the page has been rendered: $('[data-toggle="tooltip"]').tooltip();
Example
<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>
Alerts & Toasters/snackbar
Alerts for in-system dismissible messages, toasters for "layered" info.
Alert classes:
alert-infoalert-primaryalert-secondaryalert-successalert-warningalert-danger
Example
Alerts
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
Toasters / snackbar
<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>
<p>Toasters / snackbar</p>
<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>
</div>
Error pages
This is a card for error pages. To be placed directly on the "empty" background (not inside any white container). It should then self-center to the horisontal middle of the page. Buttons are contextual links for for example "go back" or other relevant option. Remove as required.
Image names:
- 400: BadRequestError.svg
- 401: UnauthorizedError.svg
- 403: ForbiddenError.svg
- 404: NotFoundError.svg
- 500: InternalServerError.svg
- 501: NotImplementedError.svg
Example
<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>
Modals
Use Modals for notifications, forms, previews and interactions that don’t require a new page. Add either .modal-sm for small or .modal-lg for large to the element with the .modal-dialog class.
The main content should go in the .modal-body It is recommended, though not required, to include .modal-header and .modal-footer as well.
If your modal contains forms or other interactive elements that require call to action buttons, put these in the .modal-footer
Example
<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>
<div class="card-body">
<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>
Table
Example
| First | Second | Third | Handle |
|---|---|---|---|
| 1 | Mark | mdo | |
| 2 | Link | Thornton | fat |
| 3 | Larry the Bird | ||
