Bootstrap

Styling and Layout Made Simple

Randy J. Fortier
randy.fortier@uoit.ca
@randy_fortier

Outline

  • What is Bootstrap?
  • Basics
    • Defaults
    • Containers
    • Buttons
  • Navigation bars
  • Responsive user interfaces
  • Tables
  • Forms

Bootstrap

What is Bootstrap?

What is Bootstrap?

Bootstrap

Basics

Basic HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document Title</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">        
    <link rel="stylesheet" 
          href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  </head>
  <body>
    <h1>Heading</h1>
    <p>This is a paragraph of text.</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

Defaults

  • Bootstrap defines a bunch of defaults:
    • Font sizes
    • Font family
    • Padding/margins
  • Philosophy of Bootstrap v3+: mobile by default

Containers

  • Required for content to use the grid system
  • Fluid - full width, with padding
    
    <div class="container-fluid">
      <h1>Heading</h1>
      <p>This is a paragraph of text.</p>
    </div>
                                    
  • Regular - fixed width, with padding
    
    <div class="container">
      <h1>Heading</h1>
      <p>This is a paragraph of text.</p>
    </div>
                                    

Accessibility

  • For screen readers, additional content may be helpful
    • e.g. Description of visual data
  • Use the CSS class 'sr-only' for these components
    
    <div class="sr-only">
      Read by a screen reader, but hidden elsewhere.
    </div>
                                    

Bootstrap

Navigation Bars

Navigation Bars

  • Bootstrap provides many different options for its navbars:
    • Horizontal (default) or vertical (stacked)
    • Links or drop-down menu
    • Light (default) or dark (inverse)
    • Scrollable (default) or fixed position

Navigation Bar


<div class="navbar-toggleable-xs" id="bd-main-nav">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Title</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#link1">Link 1</a></li>
        <li><a href="#link2">Link 2</a></li>
        <li><a href="#link3">Link 3</a></li>
      </ul>
    </div>
  </nav>
</div>
                        

Bootstrap

Responsive User Interfaces

Responsive User Interfaces

  • A user interface that adapts to the screen size
  • For your website to work for smaller touch screens:
    • Big font sizes
    • Bigger buttons
    • No columns
    • Re-organize the horizontal space vertically (reflow)
    • Hide unnecessary content
    • Use slide-out panels and collapsible content

Responsive User Interfaces

  • Bootstrap uses a 12-column grid system (by default)
  • Specify the number of columns a component will use with col-<ss>-<cs>
    • ss - screen size
        xs - extra small, phone (less than 768px wide)
        sm - small, tablet (less than 992px wide)
        md - medium, laptop (less than 1200px wide)
        lg - large, desktop (1200px wide or greater)
    • cs - size in columns

Responsive User Interfaces

  • Uniform column sizes: Diagram of column sizes

Responsive User Interfaces

  • Specify the number of columns of left side offset: col-<ss>-offset-<cs>
    
    <div class="col-md-offset-2 col-md-4">...content...</div>
                            
  • Clear previous columns, start new row:
    • e.g. col-md-offset-2
    
    <div class="clearfix visible-xs-block"></div>
                            

Responsive User Interfaces


<div class="col-md-4 col-xs-6">
  <h2>Heading 1</h2>
  <p>Nulla metus felis...</p>
</div>
<div class="col-md-4 col-xs-6">
  <h2>Heading 2</h2>
  <p>Nulla metus felis...</p>
</div>
<div class="col-md-4 col-xs-12">
  <h2>Heading 3</h2>
  <p>Nulla metus felis...</p>
</div>
                        

Responsive User Interfaces

  • On a laptop (medium) screen:
Three columns on a medium screen

Responsive User Interfaces

  • On a phone (extra small) screen:
Two columns on an extra small screen

Bootstrap

Tables

Tables

  • Bootstrap will style your table in various ways:
    • Horizontal lines (default) or rectangular borders (bordered)
    • Same (default) or alternating row background colour (striped)
    • Row under cursor regular (default) or highlighted (hover)
    • Spread out (default) or compressed vertical space (condensed)
    • Stretchy (default) or respecting a minimum size (responsive)

Tables


<div class="table-responsive">
 <table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Month</th>
      <th>Units Sold</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>August</td>
      <td>12 603</td>
    </tr>
  </tbody>
 </table>
</div>
                        

Bootstrap

Forms

Forms

  • Bootstrap provides a few different form layouts:
    • Horizontal (default) - Each label and input on its own line
    • Inline - All labels and inputs on the same line
    • Vertical - Labels above inputs

Forms


<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Username</label>
    <div class="col-sm-10">
      <input class="form-control" id="username" type="text" value="Click to focus" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Username</label>
    <div class="col-sm-10">
      <input class="form-control" id="username" type="text" value="Click to focus" />
    </div>
  </div>
</form>
                        

Wrap-Up

  • In this section, we learned about:
    • Bootstrap
    • Navigation bars
    • Responsive user interfaces
    • Tables
    • Forms