Palette — Components

Accordion / collapse

Acccordions. Use them with care and consideration.

We have two versions of accordions:

  • One for single collapse (only one "fold")
  • One for multiple folds

The difference is that the single-fold has no borders, but the multiple-fold does. This is achieved with the class .border-0 on the .card

Detailed docs on how to use the accordion is in the Bootstrap documentation.

Examples
Single "fold" accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Multiple fold accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<div class="accordion accordion-icons" id="accordionExample2">
<div class="card">
	<div class="card-header" id="headingOne2">
		<h2 class="mb-0"><button aria-controls="collapseOne2" aria-expanded="false" class="btn btn-link btn-block collapsed" data-target="#collapseOne2" data-toggle="collapse" type="button">Collapsible Group Item #1</button></h2>
	</div>
	<div aria-labelledby="headingOne2" class="collapse hide" data-parent="#accordionExample2" id="collapseOne2">
		<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</div>
<h6>Multiple fold accordion</h6>
<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 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
	</div>
</div>

                

Badges

Badges 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 could be a good way to tell them.

Examples
  • You have new emails 64

  • Visit your updated inbox New

  • Delete all your emails?


                    <h1>
                        You have new emails
                        <span class="d-block float-right badge badge-pill badge-info">64</span>
                    </h1>
                    <h4>
                        Visit your updated inbox
                        <span class="badge badge-success">New</span>
                    </h4>
                    <h4>
                        <span class="badge badge-pill badge-danger"><i class="fa fa-warning"></i></span>
                        Delete all your emails?
                    </h4>
                

Cards

When you need to box in some content to separate it from other content, you might want to use a card. Don’t go crazy though, make sure the card layout makes sense. If in doubt, consult a front-end person.

A card can be a very simple container for some text, or it can contain more complex layouts with a header title and footer links, even images.

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.

For a darker, more distinct look, use .card.card-dark for the wrapper instead of just .card.

Examples
Simple example
This is some text without the proper formatting class.
Dark example
I'm dark
This is some text without the proper formatting class.
All the formatting choices
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 link
Card with image, centered text and a button link
Alt text

Text properly formatted using the .card-text CSS class. Looks great doesn’t it? Yes, it certainly does.

Go away

                    <!-- Simple example -->
                    <div class="card">
                        <div class="card-body">
                            This is some text without the proper formatting class.
                        </div>
                    </div>

                    <!-- Dark example -->
                    <div class="card card-dark">
                        <div class="card-header">
                            I'm dark
                        </div>
                        <div class="card-body">
                            This is some text without the proper formatting class.
                        </div>
                    </div>

                    <!-- All the formatting choices -->
                    <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>

                    <!-- Card with image, centered text and a button link -->
                    <div class="card text-center">
                        <img class="card-img-top" src="https://placeimg.com/640/480/nature" alt="Alt text">
                        <div class="card-body">
                            <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="btn btn-primary">Go away</a>
                        </div>
                    </div>
                

Cards for system status (unknown, success, warning, danger)

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.
Examples
System status

System status unknown

System status

All systems are operating normally.

System status

We are currently experiencing some problems with some functionality.

System status

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>

                

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 any selector.

Example

Table example

Normal table row
Table row with disabled-background-stripes
Normal table row
Normal table row

Heading example

Hello world

Card example

Card header
Card body

                    <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 disabled-background-stripes
                                    </td>
                                </tr>
                                <tr>
                                    <td>Normal table row</td>
                                </tr>
                                <tr>
                                    <td>Normal table row</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h4 class="pt-3">Heading example</h4>
                    <h1 class="stripesB">Hello world</h1>
                    <h4 class="pt-3">Card example</h4>
                    <div class="card stripesB">
                        <div class="card-header">
                            Card header
                        </div>
                        <div class="card-body">
                            Card body
                        </div>
                    </div>
                

Dropdowns

Dropdowns are menus triggered from clicking an element with a dropdown trigger, typically a button but can be any element.

Examples

                    <div class="dropdown">
                        <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">
                        <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.

Examples

                    <!-- Default Functionality -->
                    <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>

                    <!-- Date format -->
                    <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>

                    <!-- Multiple Dates -->
                    <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>

                    <!-- Date Range -->
                    <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>
                

Timepicker

This component requires including /css/flatpickr.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 time picker popups. For most uses the provided examples will be enough, but if you need more complex functionality, go read the Flatpickr documentation.

Examples

                    <!-- Default Functionality -->
                    <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>

                    <!-- Time format -->
                    <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>
                

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.

Examples

                    <!-- Date Comparer -->
                    <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>

                    <!-- Time Comparer -->

                    <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>
                

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.

Examples

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 hr-sand"></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();

Examples

                    <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

Use Alerts for giving the user meaningful messages about system statuses, errors, successful interactions and whatever doesn't fit into the normal user interface.

Examples

                    <div class="alert alert-primary alert-dismissible fade show" role="alert">
                        <strong>System message!</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">&times;</span>
                        </button>
                    </div>
                    <div class="alert alert-secondary alert-dismissible fade show" role="alert">
                        <strong>Less important message.</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">&times;</span>
                        </button>
                    </div>
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Success message!</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">&times;</span>
                        </button>
                    </div>
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Crisis message!</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">&times;</span>
                        </button>
                    </div>
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        <strong>Warning message!</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">&times;</span>
                        </button>
                    </div>
                    <div class="alert alert-info alert-dismissible fade show" role="alert">
                        <strong>Information!</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">&times;</span>
                        </button>
                    </div>
                

Modals

Use Modals for notifications, forms, previews and interactions that don’t require a new page. If you need other sizes than the standard mid-sized modal, add either .modal-sm for small or .modal-lg for large to the element with the .modal-dialog class. See examples.

The main content should go in the .modal-body element, where you can format your content just as you would any HTML content somewhere on the page. 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 element as demonstrated in the examples.

Examples


                    <!-- Full example -->
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExample1">
                        Open modal example with header, footer and form elements
                    </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">&times;</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>

                    <!-- Large example -->
                    <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>

                    <!-- Small example -->
                    <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>
                

Progress bars / percentage bar

For when you need to indicate a progression in a process or a statistics in percent. Control width with the style attribute (style="width: 74%") or custom width classes (.w-25, .w-50, .w-75 etc).

Examples

Extra small

Small

Normal

Large

Empty

You can also add text inside the progress bars:

50%
Almost done!

Add more progress bars with different background colors together to indicate stages:

Solid



<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>Empty</p>
    <div class="progress mb-1">
        <div class="progress-bar progressbarBkg" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

<p>You can also add text inside the progress bars:</p>
    <div class="progress mb-1">
        <div class="progress-bar progressbarBkg" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
            50%
        </div>
    </div>

    <div class="progress mb-1">
        <div class="progress-bar progressbarBkg" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
        Almost done!
        </div>
    </div>

<p>Add more progress bars with different background colors together 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>

                

Responsive carousel

If you need to display a number of grid-based items without needing to show them all at once, you can use this handy responsive carousel. It's important that you adhere strictly to the required markup.

The carousel needs to be in a block element with the class .horScroll. Inside this element you have to put your content in a block element with the class .scrollWrapper. For navigating to the next slides we need very specifiv navigation elements, .scrollLeft inside .scrollLeftWrapper, and .scrollRight inside .scrollRightWrapper.

To ensure that you get a fully functional carousel, you should try to follow the example as closely as possible.

Example
Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6
Grid item 7
Grid item 8
Grid item 9
Grid item 10
Grid item 11
Grid item 12
Grid item 13

                    <div class="horScroll">
                        <div class="scrollLeftWrapper">
                            <a href="#" class="scrollLeft">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                                    <i class="fa fa-arrow-left fa-stack-1x text-white"></i>
                                </span>
                            </a>
                        </div>
                        <div class="scrollRightWrapper">
                            <a href="#" class="scrollRight">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                                    <i class="fa fa-arrow-right fa-stack-1x text-white"></i>
                                </span>
                            </a>
                        </div>
                        <div class="scrollWrapper row flex-row flex-nowrap no-gutters">
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 1</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 2</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 3</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 4</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 5</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 6</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 7</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 8</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 9</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 10</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 11</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 12</div>
                            </div>
                            <div class="scrollItem col-12 col-md-6 col-lg-4 col-xl-3 text-wrap">
                                <div class="card mx-1 p-5">Grid item 13</div>
                            </div>
                        </div>
                    </div>
                

Palette, The HRMTS StyleGuide - v1.0.455-rev-4e0403a