What Is Bootstrap?

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

Learn more »

GETTING STARTED

The Basics

Bootstrap is a free front-end framework for faster and easier web development

Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins

Bootstrap also gives you the ability to easily create responsive designs

Advantages

  • Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
  • Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
  • Browser compatibility: Bootstrap is compatible with all modern browsers

GRID SYSTEM

Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns.

col-md-4
col-md-4
col-md-4
col-md-6
col-md-6
col-md-8
col-md-4
col-md-2
col-md-2
col-md-2
col-md-2
col-md-2
col-md-2
<div class="row"> <div class="col-md-8">col-md-8</div> <div class="col-md-4">col-md-4</div> </div>

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding col-xs-# col-md-# to your columns. See the example below for a better idea of how it all works.

col-md-6 col-sm-12
col-md-6 col-sm-12
<div class="row"> <div class="col-md-6 col-sm-12">col-md-6 col-sm-12</div> <div class="col-md-6 col-sm-12">col-md-6 col-sm-12</div> </div>

Sizing

  • .col-xs-12 (extra small devices / phones)
  • .col-sm-12 (small devices / tablets)
  • .col-md-12 (medium devices / laptops)
  • .col-lg-12 (large devices / desktops)

Learn more about Grids


NEW STUFF

HTML 5

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

<!DOCTYPE html> <html lang="en">

Mobile First

With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files. To ensure proper rendering and touch zooming, add the viewport meta tag to your head

<meta name="viewport" content="width=device-width, initial-scale=1">

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container:

<div class="container"> </div>

Use .container-fluid for a full width container, spanning the entire width of your viewport:

<div class="container-fluid"> </div>

BOOTSTRAP EFFECTS

Sticky Footer

Luckily, with the thousands of lines of Bootstrap code in the CSS, there is already so many neat properties created in the bootstrap.css files. To include a sticky footer one your site, all you need to do is all the following to the footer tag

<footer class="navbar-fixed-bottom">

Responsive Images

Another code already built in the boostrap.css is a selector to make images responsive on your site. All you have to do is add the following specific class to your image tag

<img src="image.jpg" class="img-responsive">

Scroll to Anchor

To use a scroll to anchor in the a href all you need to do is make sure you have section id's on your section (remember with ID's we use the #). So if we want to have a link that takes us to a specific location on the page the code would look like this

<a href="#intro">Introduction</a>

DO'S, DONT'S and TIPS

CSS

  • DON'T: You will NEVER edit the default bootstrap.css, bootstrap.min.css, or any other css file that comes pre-installed with a template
  • DO: You will create a custom.css that I will strictly use to modify the already designed template I have downloaded
  • DO: You will make at least 15 selector changes to the template I am using by changing fonts, colors, etc.
  • TIP: When we are using a template created by someone else, the easiest way to find out what we want to modify is by using Inspect Element
    • There are three important things we should take note of when using Inspect Element. Pay close attention to the HTML, CSS and the visuals being hovered over to make sure you are finding the correct selector to modify
    • Once you have found what you want to change, make a modification to the value in the Inspect Element tool to confirm you are selecting the correct selector
    • After the selector is confirmed, be sure to copy the entire CSS selector into your custom.css file and make the proper changes here
    • Each time you add something to the custom.css, make sure when you are refreshing in the browser that your changes are displaying properly
  • TIP: Most templates come with a CSS folder, make sure your custom.css file is inside the proper folder. When you are linking the custom.css to each HTML file, make sure you are referencing to the correct location and file.
  • TIP: When I am grading, I will check your CSS files and I should at least be able to see one bootstrap.css file and a custom.css file. It's important that these are properly linked in each and every HTML file you create.

HTML

  • TIP: Before you start making multiple changes to the default index.html file, create backup copies of the index.html file or other HTML files and create a backup file called backup.html
  • DO: You will make many changes to the template I am using by changing all the content, images, background images, grid layout, etc within the file
  • DON'T: Do not have a complete replica of every page once your project is completed. You will make proper changes so that there is still consistency throughout my site, but also many differences

Organization

  • DON'T: You will not go in and start deleting files that came with the template
  • TIPS: Since Bootstrap templates have several folders. We always want to make sure we are referencing to the correct location.
  • In the CSS: For example, let's say inside my CSS folder I am making a modification to the custom.css where I want to add a background image that's inside my images folder. When I am referencing that image, the property needs to be..
    • background: url("../images/banner.jpg");
    • The reason we do this is because since we are working in the CSS folder, we need to take one step back into the main directory (where all your main folders are stored like CSS, fonts, JS, etc)
    • The .. is telling the code to take one step back from the CSS folder, which leads us to the main directory. Now that we are back in the main housing, we want to relocate inside the images folder, then finally, the name of the image
  • In the HTML: For example, let's say we want to use a basic img src tag because we want to include an image in our site. If all your images are inside an image folder, we need to make sure we are referencing to the correct location. The code would look like this:
    • img src="images/banner.jpg" (with the tags around it, of course)
    • The reason we do this is because our index.html file is already located in the main directory (in the same location as the CSS, fonts, and JS folders) so we don't have to take a step back. What we need to do is take a step forward into the images folder where our image is located