The components in Bootstrap were the main thing that sold me on using the framework. I mean, how many times have we all tried to code a DIV
that will open and close? What about a mobile-friendly navbar? I spent WEEKS developing one of these several years back. Need a fool-proof tooltip for your apps? All of these and more are done for you right out of the box!
So, in short, there are tons of interesting and useful components in Bootstrap that can made your apps more powerful and user-friendly. But for me, the biggest point is how Bootstrap allows us to work smarter not harder. Instead of spending weeks on one element you can focus on the user-experience and making your app work better all-around. As of 22 May, 2020, there are a total of 24 Bootstrap components. I am going to show you the 8 that I find most useful and leave the remaining 16 for you to discover in the Bootstrap documentation.
Starting off in this category is one of the most simple and useful components. The alert. These are terrific for directing your user's eye, conveying messages and status, or even as closeable notifications. I am using these right now on the AFIT public site to display COVID-19 information.I use them in my apps to display success or fail of a particular action. For example: a user adds a new record to the database so I show a success alert.
You can just wrap some text in a DIV
with the class set to alert
followed by the alert-{color}
and you are done. But, there are more items available within these useful little things so I figured I would show you the whole ball of wax and let you remove what you don't need on a per-use basis.
Here's an alert....
You have successfully saved something to the website/app/whatever. Some additional alert info here couldn't hurt.
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>You have successfully saved something to the website/app/whatever. Some additional alert info here couldn't hurt.</p>
<hr>
This is <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Probably the neatest thing you can do with an alert is make it dismissable.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy hole in a donut, Batman!</strong> The Riddler is back and he has left a message with Commissioner Gordon.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
There are ways to record when an alert is dismissed. If you ever need that, let me know and I will provide a prototype.
A badge in Bootstrap is a very simple way to convey a small amount of data inline with other content.
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
The white box with the number 4 is the badge. See how simple? And they don't break anything! You can apply context colors to them too.
<h4>Please review your messages <span class="badge badge-warning">270</span></h4>
There are actually two "collapse" components that fall under this category. The first is a standard open and close DIV. I actually improved on this one by adding a script I wrote to do one of the most asked for features - change the button from a + to - when the state changes. It's honestly one of the more irritating things to try to do on the fly, but this way works perfectly.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Click to <span id="cdicon"></span>
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<script>
$('#collapseExample').on('show.bs.collapse', function () {
$('#cdicon').html("Close -");
})
$('#collapseExample').on('hidden.bs.collapse', function () {
$('#cdicon').html("Open +");
})
</script>
While that word may bring up visions of Weird Al Yankovic, we all have used some version of an accordion in web design over the years. There are tons of different scripts floating around the web for these things but thankfully we don't need to scour the web for one anymore.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
This accordion is very simple to use. It actually uses cards to do what it does. If you want to have the whole accordion closed at the start just remove the show
class from the first accordion element.
This one is useful in that you can place it at the top of your site/app to call attention to things quickly and easily. The Jumbotron is like a huge billboard for you to display important updates, notices about maintenance downtime, or anything you want to make sure users don't miss. I know you are probably saying, "why not use an alert for that?", and you might be right. The size of the jumbotron makes it a great marketing tool - I use them in conjunction with alerts.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn more<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
This one is simply huge. Modals have loads of applications - heck, a few of us are using them to edit content in a quasi-asynchronous way in a few of our newer apps.
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Some important notes about Modals.
DIV
tags that appear and block out the parent viewport.modal-xl
, modal-lg
, or modal-sm
to the modal-dialog
classed DIV
. Make sure you apply it to the right spot - it doesn't go with the top-level modal
class.Another huge one! I said it in the opening paragraphs of this page but I will say it again. I literally spent weeks trying to come up with a good simple way to create a mobile-friendly navbar. Thankfully, I was successful at that time. Then I came across Bootstrap's navbar, cussed rather loudly, and scrapped my past hard work (which was almost identical to the Bootstrap version).
I can say that the current "slide down" menu on the AFIT public site is my own invention :)
<nav class="navbar navbar-expand-xl navbar-dark bg-info">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Go!</button>
</form>
</div>
</nav>
There are many different versions of the navbar component in the Bootstrap documentation. The one you see here is the most used version. Here are a few notes about the navbar.
DIV
classes, change the bg-{color}
class.navbar-light
to navbar-dark
in that same DIV
.UL
change the mr-auto
to ml-auto
.This one is super simple but worth mentioning. These little things add a level of professionalism to your apps. Now, actual display of these in times where data is loading is beyond the scope of these lessons. Doing that requires extra jQuery and asynchronous calls to data. But the user doesn't need to know that! I use these after a user saves a record - and I have an example below.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
Your changes were saved successfully. Please wait...
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Awesome!</h4>
<p>Your changes were saved successfully. Please wait...</p>
<hr>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
I then use a CFHEADER
tag to refresh the page in 3 seconds.
These are terrific for helping your users with use of an app. Let's face it, sometimes what we build makes more sense to us since we developed it, right? Might as well throw the user a bone once in a while - and tooltips are a great way to do just that.
First of all - and this is important - tooltips rely on a javascript library named popper.js
. Without it they will not work. But - if you use the bootstrap.bundle.min.js
it contains the popper.js
library. So, just always use the "bundle".
To enable tooltips on your page, place the following beneath the bootstrap.bundle.min.js
link.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<button type="button" class="btn btn-primary" 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-danger" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Tooltips are black by default. You can change the color to something else by redefining their CSS.
<style>
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #FFC107;
border-radius: .25rem;
}
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
margin-left: -3px;
content: "";
border-width: 5px 5px 0;
border-top-color: #FFC107;
}
</style>
NOTE: Make sure you change the [x-placement^=top]
and .tooltip.bs-tooltip-top
to whatever placement you want the tip to appear. That changes the color of the arrow attached to the tip. If you want to be crazy, you can copy the second chunk of that CSS and create one for all placement options.