What is Bootstrap and How Do I Use It?

If you have any sort of interest in web development, you've likely heard of Bootstrap. According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Sounds great! Now how do I use it?

It would be easy to send you over to their Getting Started page and call it a day. Their setup guide is indeed a host of useful information - links to CDNs, explanations on how to install with Bower, npm, and Composer, information on integration with Autoprefixer and LESS, a bunch of templates, licenses, and translations - but it is certainly not a step by step guide to getting started (which very well might be in the spirit of autodidactism).

When I discovered Bootstrap a few years ago, responsive design was still gaining in popularity, and not necessarily the expected norm. Having only ever made websites from scratch, I was a little confused about the entire concept of a framework. I'd imagine it's even more confusing for beginners who are now expected to learn responsive design concepts and Bootstrap and JavaScript libraries, in addition to HTML, CSS and JS.

This guide is meant as a first look into Bootstrap for beginners, so won't be going into LESS and Sass integration, which are more intermediate/advanced concepts. While it's written for the current, stable version Bootstrap 3, the concepts will remain the same for future versions.

Goals

Learn what a front-end framework is and how it can be useful

Understand how to properly include Bootstrap's CSS and JavaScript and begin customizing

What is Bootstrap?

Additionally, Bootstrap requires jQuery to function. jQuery is an extremely popular and widely used JavaScript library, that both simplifies and adds cross browser compatibility to JavaScript.

Everything else you might happen across while studying the Bootstrap documentation - Grunt, Gulp, Sass, LESS, bower, npm, etc - is not necessary to get started with Bootstrap. These are task runners, preprocessors, installation aids, and package managers, so don't be discouraged if you don't know how to use any of them yet.

Utilize responsive design to allow your website to adapt to various screen sizes - mobile, desktop, and everything in between

Add consistency to design and code between projects and between developers

Quickly and easily prototype new designs

Ensure cross-browser compatibility

Generally, every web project you work on will need to be responsive and work properly on all the major browsers, and likely have some fallbacks for older browsers. Bootstrap has a huge open source community that works on covering this so you don't have to. Additionally, when multiple developers all know the same system, they can work in better harmony - and it also makes it easier for newcomers on a project to get up to speed.

The grid is probably one of the most essential aspects of the framework. It's the basis on which the entire layout is created. Beyond that, Bootstrap's core CSS will also add helpful styling to forms, tables, buttons, lists, and images, as well as fully functioning navigation bars, while the core JavaScript will add helpful code for creating modals, carousels, alerts, popups, dropdowns, and accordions.

Let's begin!

Building a Basic Template with Bootstrap

Bootstrap comes with a few very simple examples to start from, but it's just as easy to start from "scratch", so that's what we'll do. First, I'll use only Bootstrap to lay out the foundation, then we'll add our own custom style on top to make something fun and trendy.

Step one is to download Bootstrap. The zip file will come with css, fonts, and js directories. Unzip that and save the files in some directory. Bootstrap doesn't come with any HTML, but they have a "Hello, World!" page to start on the documentation, so we'll use that as index.html.

Easy enough to start. We have our basic doctype, html, head and body tags. The meta name="viewport" tag is particularly important for responsive design - it ensures that your website has a 1:1 ratio with the viewport (screen size).

Bootstrap JavaScript and custom JavaScript must go below jQuery to function! Additionally, we can link to jQuery via Google's URL because it reduces load on our live server, but you can download it if you want to work locally.

Well, that's all you need to get started with Bootstrap! Let's check out our awesome new site.

...great!

Navigation Bar

Although we have nothing, in no time at all we can get copying and pasting from the docs and have a nice, functioning website. First and foremost, we add in the quintessential Bootstrap top navigation bar. I made a simplified version of their navbar example. Place this code right below your opening <body> tag.

It seems like a confusing mess, but it's not so complicated. In the first line, I'm defining the entire bar as a navbar, choosing a dark color scheme with navbar-inverse, and electing to use navbar-static-top, as opposed to a fixed (sticky) header.

<navclass="navbar navbar-inverse navbar-static-top"></nav>

A container sets a max-width on the content within your full-width navbar.

<divclass="container"></div>

The navbar-header class contains the "brand" information, where you can put your logo or company name. We're making a website for fictional tech company Balance Web Development (well, it's better than their old site!).

The button is hidden on desktop, and becomes a dropdown hamburger menu on mobile (each <span class="icon-bar"> is a line in the hamburger).

There's some extra space we don't want, but I want to see how far Bootstrap can get us without overriding styles. As you can see, we already have a pretty nice, adaptable layout without having written a single line of CSS.

Grid

The last thing I'll do is add in some main content, which will be be in the form of a grid. Grids are rows...

Here you can see I have three four-of-twelve columns, and as 3 x 4 = 12, everything works out.

Icons

I've also added in a few glyphicons for decoration. Glyphicons is the built-in icon set that comes with Bootstrap. If you don't load your fonts, or if you move them to a different directory, these icons won't work.

Using a glyphicon will always be that same code, and only the glyphicon-floppy-disk class will change.

I am now satisfied with the foundation of my layout.

Adding Custom Styles to Bootstrap

Not bad for getting this far without touching a line of style. It's professional, responsive, and browser friendly. It's definitely not creative or unique, though. After laying down a foundation, you'll want to add your own personal design.

If you know LESS or Sass, you can play around in Bootstrap's extensive customization area and download your own version of Bootstrap. We happen to be using "vanilla CSS", which is CSS without a preprocessor. Fortunately, you can just add an additional stylesheet below Bootstrap's core

I added a link to a Google font called Montserrat. If you've never used a Google Font before, all you have to do is add the font stylesheet to your head and change the font-family of your desired element.

Now we finally begin styling. In just a few minutes, I'll be able to transform my boring, generic Bootstrap layout into a fun, flat layout. First, I'm going to get rid of that pesky space between the navbar and the jumbotron.

.navbar{margin-bottom: 0;}

A few simple styles to the main tags. I'm loading in the Montserrat font on the entire page, I've made the headers bold, and I've made the background dark and the text light.

Conclusion

Hopefully you learned a bit about Bootstrap and frameworks from this tutorial. This is hardly scratching the surface of what Bootstrap is capable of - but you can take it from here. The documentation is enormous, and if ever you can't figure out how to do something, chances are a quick Google search will point you in the right direction.

I would encourage you to play around and make your own framework for personal projects to aid in your understanding of responsive design.

Join the newsletter

I write about JavaScript, programming, and front-end design. Join over 6,000 other developers in keeping up with my content. Unsubscribe whenever. Never any spam, ads, or affiliate links.

I'm Tania, a full-stack software developer specializing in modern JavaScript. I make
open source coding projects and write free, quality articles and tutorials that help
thousands of people daily. No ads, no sponsored posts, no bullshit.