Module 3 - Intro to Bootstrap

1. Module 3
Bootstrap
Framework
The most popular responsive,
mobile-first HTML5 and CSS3
framework

2. What is Bootstrap?
• Free front-end framework for faster and easier web development
• Bootstrap includes HTML and CSS for typography, forms, buttons,
tables, navigation, image carousels…
• Optional JavaScript plugins
• Ability to easily create responsive designs

3. What is responsive web design?
Responsive web design is about creating web sites
which automatically adjust themselves to look good on all devices,
from small phones to large desktops.

4. What is a framework?
A framework provides code for common activities
performed in web development — so you don’t need to
reinvent the wheel every time you start a project

5. History of Bootstrap
• Developed by Mark Otto and Jacob
Thornton at Twitter
• Released as an open source product in
August 2011
• Currently on version 3
• Popularity and usage is rising

6. Goals for Module 3
What we’ll cover in Module 3 (Feb 10 and Feb 17)
This week (Feb 10):
1. Overview of what Bootstrap is and how it can be used
2. Experiment with the grid system
3. Experiment with other elements: tables and buttons
Next week (Feb 17):
1. Create a simple-one page site

7. Examples

10. Pros and Cons of Bootstrap
• Save time: use the predefined
design templates and classes
• Responsive features
• Consistent design across
elements
• Easy to to use
• Compatible with all modern
browsers
• Open Source: free to download
and use
• Div-heavy code
• Relies on classes extensively
• Source code can be rather
complex
• Larger CSS and JS files can
cause some loading lag time
• Popularity means lots of sites
are using it… may want to
customize to stand out
Pros: Cons:

11. Big pros of Bootstrap? (IMHO)
Start simple, get more complex as needed

12. Big pros of Bootstrap? (IMHO)
Built-in styles look clean, modern but can easily be customized

13. Big pros of Bootstrap? (IMHO)
Simple, easy to understand 12-column grid system

14. Class demos

15. Download Bootstrap.zip
1. Download:
module-3-bootstrap
(in eLearn - Module 3)
2. Unzip
3. Define a new site using
Dreamweaver, point it to
this folder

16. Download Bootstrap.zip
4. Open the index.html file
5. Note the links to the css files:
• bootstrap.css - this contains all the styles to create the
layouts (DON’T EDIT THIS FILE)
• bootstrap-theme.css - additional css for a visually
enhanced experience (DON’T EDIT THIS FILE)
• custom-styles.css - this is where you create custom
styles to modify the design

17. The grid and containers
Container element wraps contents and houses the grid system, options:
.container - responsive fixed-width container
.container-fluid - full-width, spans the entire width of the screen

18. Step 1: create a container
1. In the index.html file create a <div>
2. Apply the container class:
<div class="container">
</div>

19. The Grid
The grid creates page layouts with a series of rows and
columns that house the content
Blocks of content are created by specifying the number of
columns you wish to span

21. Media Queries
Key breakpoints in the grid system:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

22. Step 2: add a row
1. Inside <div class=“container”>, create a <div>
2. Apply the row class:
<div class=“row">
</div>

23. Rows and columns
• Rows must be placed within a container for proper
alignment and padding
• Use rows to create horizontal groups of columns

24. Grid options
• Including the class prefix options allows you to have
more control over how the columns stack/don’t stack on
smaller devices

25. Step 3: add a column
1. Within the row, create a <div></div>
2. Apply the class for a 12 column-wide column
using extra small:
<div class="col-xs-12">12 columns (x small)</div>

26. Looks like:
Note: I’ve added some custom styles in <link href="css/custom-styles.css"
rel=“stylesheet"> to show the difference between xs, sm, md and lg

27. Step 4: add columns at xs
1. Create another row:
<div class=“row">
</div>
2. Create a div and apply the class for 3 column width
using xs (extra-small): col-xs-3
<div class=“col-xs-3”>3 columns (x small)</div>
3. Copy and paste so there are 4 of these <div>s

28. Looks like:

29. Step 6: columns at sm
1. Create another row
<div class=“row">
</div>
2. Create a div and apply the class for 3 column width
using sm (small): col-sm-3
<div class=“col-sm-3”>3 columns (small)</div>
3. Copy and paste so there are 4 of these divs

30. Looks like:

31. Step 7: columns at md
1. Create another row
<div class=“row">
</div>
2. Create a div and apply the class for 3 column width
using md (medium): col-md-3
<div class=“col-md-3”>3 columns (medium)</div>
3. Copy and paste so there are 4 of these divs

32. Looks like:

33. Step 7: columns at lg
1. Create another row
<div class=“row">
</div>
2. Create a div and apply the class for 3 column width
using lg (large): col-lg-3
<div class=“col-lg-3”>3 columns (large)</div>
3. Copy and paste so there are 4 of these divs

34. Looks like:

35. Looks like this on a small device:
Notice how the teal and red rows (medium
and large) have stacked at a smaller size…
but the yellow and orange (xsmall and small)
continue to sit side-by-side
Using the class-prefixes allows you to define
how content will look on a smaller device…

36. Combine for more control…
• Want more control?
• Combine the sizes:
<div class="row">
<div class="col-xs-12 col-md-8”>xs at 12, md at 8</div>
<div class="col-xs-6 col-md-4”>xs at 6, md at 4</div>
</div>

37. Looks like:
Combining class-prefixes
allows for different layouts on
smaller devices

38. More great features…

39. Headings
Styles for headings 1 through 6

40. Paragraphs
• Bootstrap's global default font-size is 14px, with a line-height of 1.428
• Applied to the <body> and all paragraphs
• <p> tags receive a bottom margin of half their computed line-height
(10px by default)

41. Making a paragraph stand out
• Make a paragraph stand out by adding the class .lead

42. Formatting options
Many other classes exist for:
• Inline text elements
• Alignment classes
• Transformation classes
• Abbreviations
• Addresses
• Blockquotes

43. One of my favourites…
Horizontal definitions:
• Make terms and descriptions in <dl> line up side-by-side
• Starts off stacked like default <dl>s, but when the navbar
expands, so do these

44. Tables
Open the table.html file
• Add the class “table" to the <table> tag
• Style creates an attractive, easy to read table
Try adding these classes: (e.g. class=“table table-bordered”)
• table-bordered
• table-hover
• table-striped

45. Responsive table option
Try adding a <div> around the table with the
class"table-responsive"
• Note how the table behaves when viewed on a
small screen

46. Links and buttons
• Bootstrap has custom button and link styles
<button type="button" class="btn btn-default”>Default</button>
<button type="button" class="btn btn-primary”>Primary</button>
…etc…

47. Links and buttons
Open the button.html file
• Note the buttons have the class “btn” applied
Try adding these classes:
• btn-default to the button in the left column
• btn-lg to the button in the middle column
• btn-block to the button in the right column
What is the effect of each class?

48. Putting it all
together…
• Open theme.html
• Check out how some elements work
• E.g. the Carousel at the very bottom
• Shrink your window and see how the
layout changes and adapts
Next week we’ll take some elements
from this theme and build a simple,
one-page website

49. Interested in learning more?
• Check out the Bootstrap
website at getbootstrap.com