1 of 28

Bootstrap

Making your website look great, quickly

2 of 28

What’s Bootstrap?

  • A front-end framework.
    • Front-end: Everything a user sees on a website or app.
    • Framework: A template, skeleton or cheat sheet.
  • First released by Twitter in 2011.
  • It’s open source — Anyone can contribute to it and use it.
  • Main features.
    • 12 columns per page.
    • Pre-built CSS styles (which you can override, of course!).
    • Cool JavaScript features.

3 of 28

Why is Bootstrap Awesome?

  • Create beautiful front-end designs quickly.
  • Customizable.
  • Responsive.
    • Build for desktop screens & mobile screens simultaneously.
  • Accessible.
    • Built to work with screen readers, used by the visually-impaired.
  • Pre-built themes are available (both free & premium).

4 of 28

How Do I Get Bootstrap?

From a Content Delivery Network (CDN):

It’s simply a URL you can link to that stores the Bootstrap files.

5 of 28

<!DOCTYPE html>

<head>

<!-- First, link to the Bootstrap CSS CDN -->

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet”>

​

<!-- Then, link to your own CSS file if you want to override Bootstrap styling -->

<link href=”/static/css/styles.css” rel=”stylesheet”>

</head>

​

<body>

<!-- Your webpage code goes here -->

<!-- If you’re using the Bootstrap JavaScript CDN, link to it here. It requires jQuery! -->

<script src=”http://code.jquery.com/jquery.js”></script>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

</body>

</html>

6 of 28

Bootstrap’s 12-Column Grid System

7 of 28

Documentation

The documentation is thorough!

getbootstrap.com/css/

​

​

So many cool components!

http://getbootstrap.com/components/

8 of 28

Containers

9 of 28

Containers

  • Bootstrap requires all site content to be inside a “container”.
  • So far, we’ve been using divs like “boxes” or “sections”.
  • But Bootstrap containers are not the same as divs!
    • We specify which divs we want to be Bootstrap containers by attaching the .container class to those divs.
    • You can nest divs, but you can’t nest containers.
    • You can have many containers on the same webpage, though.
  • The navigation bar gets its own container.
  • The rest of the webpage gets another container.

10 of 28

Containers

<body>� <div class="container-fluid"> Navbar code goes here. </div>� <div class="container">� <!-- webpage code goes here -->� </div> <!-- End .container -->�</body>

11 of 28

Containers

  • Fixed width
    • <div class=“container”></div>.
    • When you want something to always take up the same amount of space, regardless of screen size.

​

  • Full-width
    • <div class=“container-fluid”></div>.
    • When you want something to grow or shrink in proportion to the screen size.

12 of 28

Rows

13 of 28

Rows

  • Rows are made inside the container to provide structure for horizontal sections.
  • They wrap around columns, which we’ll learn about next.
  • Only columns can be immediate “children” of rows.
    • You can’t put anything besides a column right inside the row.

​

<body>

<div class=”container”>

​

<div class=”row”>

<!-- columns go here -->

</div>

​

<div class=”row”>

<!-- columns go here -->

</div>

</div>

</body>

14 of 28

Columns

15 of 28

Columns

  • Columns go inside of rows. Content goes inside of columns.
  • Remember, there are 12 columns available.
  • There are 4 built-in sizes of displays to work with.
    • lg for desktops / laptops.
    • md for tablets in landscape (horizontal) mode.
    • sm for tablets in portrait (vertical) mode.
    • xs for cell phones.
  • Bootstrap will default to using the biggest specified display smaller than or equal to the size of the screen.
    • To be safe, always specify at least the xs (cell phone) size!

16 of 28

Columns

  • When inside a row, you must specify how many columns to use for each thing.
  • Column classes specify the number of columns to use (out of 12 per row)
    • The format is col-<screen size>-<columns to use>.
      • col-xs-12
      • col-md-6
  • Since we specify the number of columns to use by assigning classes to the various HTML elements, we can use multiple classes to specify how many columns to use for varying screen sizes.

<div class=”row”>

<div class=“col-xs-12 col-md-6 col-lg-3”> Some text. </div>

<div class=“col-xs-12 col-md-6 col-lg-9”> More text. </div>

</div>

17 of 28

Web Page Structure with Bootstrap

18 of 28

Navbar container

Body container

Row

Row

6-column section

6-column section

4-column section

4-column section

4-column section

19 of 28

Container/Row/Column Structure

<body>� <div class="container-fluid"> Navbar code goes here. </div>� <div class="container">� <div class="row">� <div class="col-xs-12"> Main content goes here. </div>� </div> <!-- End .row -->� </div> <!-- End .container -->�</body>

20 of 28

Offsets

21 of 28

Offset

  • Remember: Columns fill in from left to right.
  • What if we want a row to only have one small image, and we want it on the right? Hmm…
  • Offset is a way to move columns to the right by a specified number of columns.

22 of 28

Offset

<div class=“container”>

<div class=“row”>

<div class=“col-xs-offset-8 col-xs-4”>

<img src=“cupcakes.jpg” alt=“cupcakes”>

</div>

</div> <!-- end .row -->

</div> <!-- end .container -->

23 of 28

Other Tools

24 of 28

Planning a Front-End with Bootstrap

  • Called “wireframing”.
  • Sketch out the placement of things on a webpage.
  • Visualize which Bootstrap components to use.
  • Should be very simple!
  • Use pencil and paper.

25 of 28

26 of 28

27 of 28

Remember to use Chrome’s Developer Tools for debugging!

28 of 28

More Bootstrap Resources

Wikipedia

​

Websites built with Bootstrap

​

CDN: Content Delivery Network