Planning Information
The duration of this course is 2 Days.
Classes are priced from $790.00. See individual sessions for details.
Description
Bootstrap is a free, open source responsive design framework. Bootstrap has become the tool for many web developers to built mobile-first, responsive web sites.
Web developers can save time by building onto Bootstrap’s CSS and JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.
Course Outline
1. Getting Started with Bootstrap Basics.
- Introduction to Bootstrap
- What Is a Framework?
- What is responsive design?
2. Bootstrap Layouts
- Understanding Breakpoints
- Introducing Bootstrap's Grid System
- Responsive Classes
- Containers
- Rows and Columns
3. Creating Responsive Navigation
- Using the nav Component
- nav Modifiers
- HTML data- Attributes
- The role Attribute
- Exercise 4: Working with nav Modifier Classes
- Using the navbar Component
4. Bootstrap Typography
- How Bootstrap Updates Browser Defaults
- Introducing Reboot
- Bootstrap Default Styles
- Understanding rem and em
- Headings and Paragraphs
- Styling Text Inside Blocks
- Inline Elements
- Text Utilities
5. Tables
- Responsive Tables
- Breakpoint-specific Responsive Tables
- Overall Table Styles
- Exercise 7: Styling Tables
- Table Headers
- The scope Attribute
- Contextual Classes
6. Bootstrap Forms
- Browser Input Inconsistencies
- Form Controls
- Input Types
- Form Layout
- Form Groups
7. Images
- Making Images Responsive
- Responsive CSS
- Using the Picture Element
- Aligning Images
- Float Classes
- Centering Images
- Figures
8. Bootstrap Components
- Styling Buttons
- Carousel
- Jumbotron
- Alerts
- Collapse
- Modal
- Pagination
- Card
- Tooltip
- Popover
9. Bootstrap Utilities
- Borders
- Position
- Shadows
- Spacing Utilities
- Helpful Utilities
- Clearfix
- Close Icon
- Embed
- Screenreaders
- Visibility
10. Bootstrap Flex
- What is Flexbox?
- The Flexbox Container
- The Two Axes
- Flex Directions
- Justify Content
- Alignment and Order
Intended Audience
This course is for students who are already working with HTML and CSS and want to develop a responsive, mobile ready web site using a framework.
At Completion
Upon successful completion of this course, the student will have covered the following topics:
- Downloading and Installing Bootstrap on a local environment for testing
- Creating a basic theme with Bootstrap
- Using and customizing a Bootstrap navigation
- Using Bootstrap forms, components and utilities
Prerequisites
Before taking this course, students should be familiar with basic HTML5 and CSS3 languages.
To request private training or future dates, call 610-321-3500 or
Register your interest now
Related Courses
| UX Prototyping with Adobe XD | |
| WordPress Level 1 for End Users | |
| WordPress Level 2 for Web Designers/Developers |
