Acccordions. Use them with care and consideration.
We have two versions of accordions:
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.
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.
<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>
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.
Text properly formatted using the .card-text CSS class. Looks great doesn’t it? Yes, it certainly does.
Card link Another linkText 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>
These communicative cards are used for for example system status on a support / help page.
NOTE!
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>
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.
| Normal table row |
| Table row with disabled-background-stripes |
| Normal table row |
| Normal table row |
<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 are menus triggered from clicking an element with a dropdown trigger, typically a button but can be any element.
<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>
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.
<!-- 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>
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.
<!-- 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>
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.
<!-- 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>
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.
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 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();
<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>
Use Alerts for giving the user meaningful messages about system statuses, errors, successful interactions and whatever doesn't fit into the normal user interface.
<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">×</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">×</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">×</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">×</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">×</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">×</span>
</button>
</div>
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.
<!-- 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">×</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>
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).
Extra small
Small
Normal
Large
Empty
You can also add text inside the progress bars:
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>
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.
<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>