Course duration
- 2 days
Course Benefits
- Learn the benefits of mobile first responsive design.
- Learn how to use Bootstrap's predefined classes.
- Understand how to use Bootstrap's grid system.
- Learn to create responsive navbars.
- Learn to style typography with Bootstrap.
- Learn to style tables with Bootstrap.
- Learn to style forms with Bootstrap.
- Learn to use images with Bootstrap.
- Learn to use the most popular Bootstrap components.
- Learn to use an array of Bootstrap Utilities.
- Learn to use Bootstrap Flex.
Public expert-led online training from the convenience of your home, office or anywhere with an internet connection. Guaranteed to run .
Private classes are delivered for groups at your offices or a location of your choice.
Learn at your own pace with 24/7 access to an On-Demand course.
Course Outline
- Getting Started with Bootstrap Basics
- Introduction to Bootstrap 4
- What Is Bootstrap?
- What Is a Framework?
- What Is Responsive Design?
- What Is Mobile-first Design?
- Major Changes in Bootstrap 4
- Creating a Basic HTML Template with Bootstrap
- How to Download Bootstrap
- Applying Styles and Functions with Class
- Introduction to Bootstrap 4
- Bootstrap Layout
- What Is the Viewport?
- Understanding Breakpoints
- Bootstrap's Breakpoints
- Introducing Bootstrap's Grid System
- Using Responsive Classes
- Containers
- Rows and Columns
- Making Grids
- Creating Responsive Navigation
- Using the nav Component
- nav Modifiers
- HTML data- Attributes
- The role Attribute
- Working with nav Modifier Classes
- Using the navbar Component
- Create a Responsive Navigation Header
- Using the nav Component
- Bootstrap Typography
- How Bootstrap Updates Browser Defaults
- Introducing Reboot
- Bootstrap Default Styles
- Understanding rem and em
- em
- rem
- Headings and Paragraphs
- Styling Blocks With rem
- Styling Text Inside Blocks
- Inline Elements
- Text Utilities
- How Bootstrap Updates Browser Defaults
- Tables
- Responsive Tables
- Breakpoint-specific Responsive Tables
- Overall Table Styles
- Styling Tables
- Table Headers
- The scope Attribute
- Contextual Classes
- Responsive Tables
- Bootstrap Forms
- Browser Input Inconsistencies
- Form Controls
- Input Types
- Form Layout
- Form Groups
- Grid Layout
- Horizontal Forms
- Sizing
- Styling a Form
- Browser Input Inconsistencies
- Images
- Making Images Responsive
- Responsive CSS
- Using the Picture Element
- Aligning Images
- Float Classes
- Centering Images
- Figures
- Create a Page with Images
- Making Images Responsive
- Bootstrap Components
- Styling Buttons
- Outline Buttons
- Button Sizes
- Carousel
- Make a Carousel
- Jumbotron
- Alerts
- Collapse
- Modal
- Pagination
- Card
- Tooltip
- Popover
- Styling Buttons
- Bootstrap Utilities
- Borders
- Border Colors
- Border Width
- Rounded Corners
- Position
- Shadows
- Spacing Utilities
- Misc Helpful Utilities
- Clearfix
- Close Icon
- Embed
- Screenreaders
- Visibility
- Build a Single-page Website, Part 1
- Borders
- Bootstrap Flex
- What is Flexbox?
- Create a Flexbox Container
- Inline Flexbox
- Responsive Flexboxes
- The Two Axes
- Flex Directions
- Justify Content
- Alignment
- Order
- Build a Single-page Website, Part 2
Class Materials
Each student will receive a comprehensive set of materials, including course notes and all the class examples.
Experience in the following is required for this Bootstrap class:
- HTML
- CSS
- JavaScript
Courses that can help you meet these prerequisites:
Instructor-led courses are offered via a live Web connection, at client sites throughout Europe, and at our Geneva Training Center.