What is Bootstrap?

Maybe you're heard of Bootstrap, but don't know exactly what it is, or how to use it? The landing page description is less than helpful:

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.

Here's a quick primer with what you need to get started.


What is Bootstrap?

Twitter Bootstrap? It's a UI framework for websites.

Ok, but what does that mean?

Web pages are a combination of HTML, CSS, and JavaScript. Bootstrap is a set of CSS and (optional) JavaScript files with a boatload of common widgets and styles for making a page look good with a minimum of time and effort.

Why would I use it?

Unstyled web pages look pretty rough, especially on very large or small screens. Bootstrap gives you tools for easily styling a web page. The bigggest win in my opinion is ease of use - add a CSS class to your tags and you're off to the races.

How do I get it?

They're just regular old CSS and JS files. You can either link them from the Bootstrap CDN:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Or you can download the files and serve them yourself.

How do I use it?

Once the files are included in your HTML, you get Bootstrap components by applying CSS classes to HTML tags. Mostly divs. Once you have the appropriate files linked in your HTML document, add the classes you are interested in. For instance:

<button class="btn btn-primary">CLICK HERE</button>

Renders like this:
There's a ton more components here, and a good starter template here.

You probably want to use the skeleton, at least in the beginning. It is responsive by default, and includes all the files you need.

Ok that's easy enough, but what about page layout?

Glad you asked! Bootstrap also includes a nifty grid system. The general pattern is this:

<div class="container"> <!-- wraps all your content -->
    <div class="row"> <!-- wraps a single row -->
        <div class="col"> <!-- wraps a single column -->
            <p>My content in column 1</p>
        </div>
        <div class="col">
            <p>My content in column 2</p>
        </div>
        <div class="col">
            <p>My content in column 3</p>
        </div>
    </div>
</div>

That will get you a centered, reasonably-sized container with 3 equally wide columns of text. You can specify widths, content alignment, and much more by adding more CSS classes. Tons more on the layout system here.

Great, anything else I should know?

The project documentation is very extensive. Find out more about the components, grid system, and utilities here.

Happy styling!