Session 4

Bootstrap

Session Outline

  • Why use a framework?
  • About Bootstrap
  • Form groups
  • Set up repos
  • Tips

Why use a framework?

Compatibility

Components

Cards Columns Containers Fancy tables Navbars Badges
...and a whole load more!

Common standards

Some examples
Bootstrap documentation

Task 1

About Bootstrap

Layout

Bootstrap uses columns. These can be used to change the layout at different breakpoints.

Container divs can be used to put a margin around content.

Bootstrap documentation on columns

col- md- 6

Task 2

  • Check out the links in the notes
  • Do Task 2

If you're liking this presentation format, we'll do a lot more to put all necessary links on the slides!

More Tasks

  • Work through the links and tasks on typography, badges, buttons and images.

Getting Sassy

Customise Bootstrap with Sass if you're feeling confident.

  1. Install Sass
  2. Make a scss file - like CSS, but sassier
  3. Download Bootstrap to your project directory
  4. @import "bootstrap"; right at the end
  5. Change variables from variables.scss

Form groups

Get into groups of 2 or 3

Think of a team name!

Make a repository in the Hypertext Markup Ladies team in the GitHub organisation.

Set up repos

  1. Create your project repo on GitHub
  2. Clone the repo to GitKraken
  3. Use the Bootstrap Starter Template as your index.html
  4. Create main.css

Tips

  • Feel free to copy examples from the Bootstrap documentation into your code
  • Use Bootstrap classes over writing CSS wherever you can
  • Play with FontAwesome 4.7.0