Okay! I'm not even going to front: I LOVE USING BOOTSTRAP!
I think this has a lot to do with the fact that when I picked up using Ruby on Rails all that 4+ years ago, Bootstrap was the recommended go to resource to design front end. Boy, did it integrate into Rails nicely!!?!! You bet!
I will share the little bits of small gotchas that can easily get you peeved over using Bootstrap as often as I can here on dev.to with corresponding code snippets. If this is something that you are interested in, I recommend that you tag along for the ride. Quickly a brief intro. What is Bootstrap?
"Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."
- Source: The official Bootstrap website.
Well I don't know about the claim being the world's most popular front end component library. Nonetheless is it used a lot? Well it is. Make that definitely so. I assume two kinds of readers, one who requires a simplified breakdown and another who just wants to see the Github gist. If you are the latter, kindly skip the next paragraph.
"Keep it as simple as possible, but not any simpler"
- Albert Einstein
Basically I define Bootstrap as the go to resource when you don't want/like/desire to write CSS styles for your web app. You just make use of the default already created Bootstrap options available. Many a time all you will have to do is just change the front appearing text as I will show you with creating a simple Navigation Bar for your web app.
First we head over to the Bootstrap documentation where we are given 3 options out of which we have to choose one to get Bootstrap working in our app. I have preference for the CDN and that is what we will rely on in this article and all future articles I will write on Bootstrap. Using the CDN has the following advantages
Now, let's get building that Navbar. So let's begin with the default Bootstrap Starter Template Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>BootStrap Nav!</title>
</head>
<body>
<!-- Plug Bootstrap Nav Bar code here -->
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>
Well, as often is the case a web app has a part of it's navigation:
Home | About | Contact | FAQs | Blog
We will just stick with those 5 items when we go to the next articles in this series. Let's head over to Bootstrap documentation to copy the code for creating a Nav bar.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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="#">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">Search</button>
</form>
</div>
</nav>
This is the default navigation view of the Navbar in Bootstrap and all we have to do is plug it into the html starter template where I left the comments.
Then we have:
You should have something which looks like this:
If you can see that view on your end, congratulations. I will end here in other not to make this lesson any longer that it should be.
The goal here was just to show you how easy it is to build a web app Navbar using Bootstrap. In follow up articles I will share how you can customize the Navbar to suite your needs, look, feel and what other considerations you may have.
Many thanks for reading! Please drop whatever comments you may have, I'm most glad to hear from you. Also if you are open to conversations about Bootstrap. Kindly say "Hi"!
Cover image credit: Photo by Artem Sapegin via unsplash
Further Reading: The Official Bootstrap Documentation
CDNs: What is a CDN?
Top comments (4)
Thank you very much for sharing your work, it helps me a lot since I am learning.
You're welcome. I'm glad it helped.
Nice write up. I use Bootstrap in every single front end solution I make. I hate writing HTML/CSS so bootstrap is a huge help.
Exactly! Bootstrap is a perfect solution for when you want to quickly get make front end available and there are bootstrap libraries you can plug into SPAs and get access to all Bootstrap components as well! Glad you liked the post. I plan on sharing more articles on Bootstrap as time goes on. I do hope you keep reading and contributing to what I share.