Bootstrap 3
1-day Mobile-first Responsive Design using Bootstrap3 — BS3
Bootstrap Training Course Overview
This mobile-first responsive design course teaches students how to use the Bootstrap 3 CSS framework to build websites with fluid and adaptive grid layouts.
Unlike our primary responsive web design course this Bootstrap3 course is focused entirely on the practicalities of designing websites using this one tool, i.e. it makes little attempt to teach the fundamental responsive web design skills that the other course does.
As such, this course is oriented towards students whose primary purpose is just to get a mobile-first responsive design up and running quickly and immediately. Such students may already have the generic responsive skills or they may plan to acquire them later.
If you fall into the latter category, we'd strongly suggest that you take a look at Responsive Design (CSS3-04) and consider the possibility of taking both courses.
Course contents — 1 Bootstrap basics
- Bootstrap scaffolding
- What is bootstrap?
- Bootstrap file structure
- Basic HTML template
- Global styles
- Default grid system
- Basic grid HTML
- Offsetting columns
- Nesting columns
- Fluid grid system
- Container layouts
- Responsive design
Course contents — 2 Bootstrap CSS
- Typography
- Headings
- Lead body copy
- Emphasis classes
- Lists
- Code samples
- Table and table row classes
- Form layouts
- Supported & extended form controls
- Form control sizing
- Form control states
- Button styling
- Disabled buttons
- Images
- Icons, incl font icons (glyphicons)
Course contents — 3 Layout Components
- Dropdown menus
- Button groups & dropdowns
- Dropup menus
- Tabular navigation
- Pills, list & stackable nav
- Tabbable navigation
- Navbar menus
- Forms
- Breadcrumbs
- Pagination
- Pager
- Labels and badges
- Hero unit
- Page header
- Table of contents
- Alerts
- Progress bars
- Media object
- Wells
- Helper classes
Course contents — 4 Bootstrap JavaScript Plugins
- Programmatic API
- Transitions
- Modal windows
- Dropdown
- Scrollspy
- Toggleable tabs
- Tooltips
- Popover
- Alerts
- Buttons & loading state
- Single toggle buttons
- Collapse
- Carousel
- Typeahead
- Affix
Course Objectives
On completion of this responsive design training course you will be able to:
- Build a mobile-first website using Bootstrap
- Build responsive designs with Bootstrap
- Design layouts adhering to a baseline grid
- Design layouts adhering to a fluid grid
- Understand how the HTML, CSS and JavaScript components of Bootstrap work
- Customise a Bootstrap installation
- Optimise a Bootstrap design for target device features
- Create responsive images and graphics
Target Audience
- Experienced web designers
- Experienced web developers
Training Pre-requisites
Delegates should have completed the following Web Design Academy courses, or be able to demonstrate equivalent skills and learning:
We assume that anyone with the skills and knowledge taught in those courses will also have a good conceptual understanding of HTML and enough knowledge of HTML5 to pick up the basics of Bootstrap3 from the introductory module of this course.
Training Style
This Bootstrap course is instructor-led, but extremely practical in orientation. The vast majority of contact time should spent on layered, hands-on, exercises.
Exercises build upon one another. Students will have designed a basic Bootstrap website by the end of the first course module. They will then progressively enhance that site using the Bootstrap concepts and features introduced in the later modules. By the end of the course, students should have a small, but richly featured site, exploiting many of the most popular features of Bootstrap 3.