Bootstrap: Using It In a Project
Bootstrap is a popular CSS framework of prewritten stylesheets designed to help you build webpages faster.
Why Use It?
Bootstrap offers solutions to common problems faced by frontend web developers. With Bootstrap, web developers can:
- Build complex website layouts quickly.
- Design layouts over a 12-column grid system.
- Create device-specific layouts (desktop, tablet or mobile).
- Create layouts that work on a variety of web browsers.
Getting Started with Bootstrap
Here are a few different ways to use Bootstrap:
Link to a CDN
CDNs, or content delivery networks, are code files hosted on the web that you can include in your project. Using a CDN is the fastest way to get set up with Bootstrap.
Find a CDN for Bootstrap. MaxCDN hosts the latest version:
Simply include the code above in your HTML
head element and you will be good to go!
Use a Local Copy of Bootstrap
Another option is to download your own copy of Bootstrap and integrate it into your project structure.
Step 1. Download Bootstrap
Download Bootstrap as a Zip file here. Next, open your computer’s file manager and locate bootstrap-3.3.7-dist.zip in your Downloads folder. Double-click the file to unzip it.
Step 2. Choose a Project
Our example project is the homepage for Codebrainery.io. Adapt the following instructions for use in your own project or download codebrainery here to follow along.
codebrainery contains three files, index.html, main.css:
codebrainery | - index.html | - main.css
Step 3. Move Bootstrap Into Your Project Folder
Using your command line or file manager, move the newly unzipped bootstrap-3.3.7-dist folder into your project folder. This will create the following folder structure:
codebrainery | - index.html | - main.css | - bootstrap-3.3.7-dist | - css | - js | - fonts
Step 4. Link to Your Copy of Bootstrap
Using your favorite text editor, open index.html and locate the
head element. Codebrainery.io’s homepage already links to a Bootstrap CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
href attribute so you can load your locally installed, minified Bootstrap CSS instead:
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
head element now. Add two
script tags below the
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
When to Use Bootstrap
Reach for Bootstrap when you need assistance implementing any of the following:
- headers and footers
- responsive navbars
- glyphicons and fonts
- banners (called jumbotrons in Bootstrap)
- supporting feature layouts using multiple columns
- galleries, slideshows and other dynamic components