Scratching the Surface Using Bootstrap within JavaScript
If you’re someone like me, you’re constantly seeking the next website that makes you go “wow!”. With web searching by mobile device on the rise while computer searching on the decline, it’s safe to assume that the design should be sleek, clean, and optimized for an easy user experience. Many are turning to Bootstrap as their framework to tie the front end all together in a neat polished package. Here’s how you can get started.
Installation
For the sake of this story, the focus will be for users using Javascript as a front end for their mobile/web application. There are many other libraries that will be mentioned as well that I highly recommend installing to take full advantage of everything Bootstrap has to offer.
Getting started
There are quite a few ways to install Bootstrap into your application. Here’s a few of the easiest ways to install:
Install with npm:
Bootstrap can be easily applied using Node Package Manager (npm). In your project directory, type:
$ npm install bootstrap@3Install within your HTML file:
You’re also able to install/run Bootstrap directly through your HTML file. This prevents you from having to install anything locally. This method takes a bit more time, but really puts you in control of exactly which libraries you plan to use. You’ll first need to install the stylesheet which is pulling from a CDN (content delivery network). This should be done within the head of your HTML file and will ensure the css libraries have been installed:
<head>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"></head>
Next, you’ll need to install the CDN script towards the bottom of your HTML page. This will generally sit right before the end of the html tag:
<html><script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script></html>
Once you’ve added these lines to your HTML file, you should also install jQuery which is necessary for all of Bootstrap’s Javascript plugins. This will also sit right before the html tag:
<html><script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script></html>
Some Bootstrap Features
Bootstrap is extremely powerful and can take your application to the next level. Let’s go over some of the awesome features now readily available to you.
Collapse
Collapse has to be one of my favorite features within Bootstrap. With the click of a button you’re able to collapse and retract a set of data. In order to use this, you must set the ‘data-toggle’ attribute to “collapse” as well as call the class in the ‘href’ attribute. Here’s an example below:
Here’s the final result:
Popover
Popover can be extremely useful when you want to ask for specific requirements when making a password for example. This one requires a little bit of code in your .js file along with HTML. Don’t forget that you will need jQuery in order for these methods to be called correctly!
Javascript:
Final result:
Carousel
Carousel allows you to toggle from left to right between slides which can contain sets of images, text, or both. Though this is a bit more complex, this feature is widely used today in many web/mobile applications due to the clean user experience.
In order to get this working, you need to begin by adding data target indicators along with the ‘data-slide-to’ attribute. For this example, we will use 3 separate slides of difference cities. It is important that the div id is being called in the data target below it. Don’t forget to add the class=”active” to the first list item:
Next, it is time to create the controls in order to slide-to the next image. You will be referencing div class in order for these arrows to function properly. Glyphicons are a part of the bootstrap library and can be extremely useful to give your page that extra touch:
Once it is all put together, the final result should look something like:
Your final code should look like:
<!DOCTYPE html>
<html lang="en"><head>
<title>Bootstrap Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head><body><div class="container">
<h2>Carousel Example</h2>
<div id="cityCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#cityCarousel" data-slide-to="0" class="active"></li>
<li data-target="#cityCarousel" data-slide-to="1"></li>
<li data-target="#cityCarousel" data-slide-to="2"></li>
</ol><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://images.unsplash.com/photo-1515896769750-31548aa180ed?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1668&q=80" alt="Los Angeles" style="width:100%;">
</div><div class="item">
<img src="https://images.unsplash.com/photo-1494522855154-9297ac14b55f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="Chicago" style="width:100%;">
</div><div class="item">
<img src="https://images.unsplash.com/photo-1534430480872-3498386e7856?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80" alt="New york" style="width:100%;">
</div>
</div><!-- Left and right controls -->
<a class="left carousel-control" href="#cityCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#cityCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div></body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></html>
This is just scratching the surface of everything Bootstrap is capable of. Here are some wonderful resources to helping you on your Bootstrap journey along with other libraries that will be extremely helpful along the way!
Resources:
Popper.js — Awesome addition to bootstrap!
