Email Us   Phone : 503-259-0312   
  Home    |    Instructor-led Training    |    Self-Paced Learning    |    Online Training     


Contact Us   -   Why Choose Wintrac   -   Clients    

Courses
ADA
Adobe
Agile
AJAX
Android
Apache
AutoCAD
Big Data
BlockChain
Business Analysis
Business Intelligence
Business Objects
Business Skills
C/C++/Go programming
Cisco
Citrix
Cloud Computing
COBOL
Cognos
ColdFusion
COM/COM+
CompTIA
CORBA
CRM
Crystal Reports
Data Science
Datawarehousing
DB2
Desktop Application Software
DevOps
DNS
Embedded Systems
Google Web Toolkit (GWT)
IPhone
ITIL
Java
JBoss
LDAP
Leadership Development
Lotus
Machine learning/AI
Macintosh
Mainframe programming
Microsoft technologies
Mobile
MultiMedia and design
.NET
NetApp
Networking
New Manager Development
Object oriented analysis and design
OpenVMS
Oracle
Oracle VM
Perl
PHP
PostgreSQL
PowerBuilder
Professional Soft Skills Workshops
Project Management
Rational
Ruby
Sales Performance
SAP
SAS
Security
SharePoint
SOA
Software quality and tools
SQL Server
Sybase
Symantec
Telecommunications
Teradata
Tivoli
Tomcat
Unix/Linux/Solaris/AIX/
HP-UX
Visual Basic
Visual Foxpro
VMware
Web Development
WebLogic
WebSphere
Websphere MQ (MQSeries)
Windows programming
XML
XML Web Services
Other
Introduction to Bootstrap
Overview

This Introduction to Bootstrap 4 course teaches students how to use the world's most popular framework for building responsive, mobile-first sites.

Audience

Those who want to learn Bootstrap 4 from the ground up.

Prerequisites

Experience in HTML, CSS and JavaScript.

Course duration

2 Days

Course outline

1. 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
  • Exercise 1: Creating a Basic HTML Template with Bootstrap
  • Exercise 2: How to Download Bootstrap
  • Applying Styles and Functions with Class
2. Bootstrap Layout
  • What Is the Viewport?
  • Understanding Breakpoints
  • Bootstrap's Breakpoints
  • Introducing Bootstrap's Grid System
  • Using Responsive Classes
  • Containers
  • Rows and Columns
  • Exercise 3: Making Grids
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
  • Exercise 5: Create a Responsive Navigation Header
4. Bootstrap Typography
  • How Bootstrap Updates Browser Defaults
  • Introducing Reboot
  • Bootstrap Default Styles
  • Understanding rem and em
  • em
  • rem
  • Headings and Paragraphs
  • Exercise 6: Styling Blocks with rem
  • 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
  • Grid Layout
  • Horizontal Forms
  • Sizing
  • Exercise 8: Styling a Form
7. Images
  • Making Images Responsive
  • Responsive CSS
  • Using the Picture Element
  • Aligning Images
  • Float Classes
  • Centering Images
  • Figures
  • Exercise 9: Create a Page with Images
8. Bootstrap Components
  • Styling Buttons
  • Outline Buttons
  • Button Sizes
  • Carousel
  • Exercise 10: Make a Carousel
  • Jumbotron
  • Alerts
  • Collapse
  • Modal
  • Pagination
  • Card
  • Tooltip
  • Popover
9. Bootstrap Utilities
  • Borders
  • Border Colors
  • Border Width
  • Rounded Corners
  • Position
  • Shadows
  • Spacing Utilities
  • Misc. Helpful Utilities
  • Clearfix
  • Close Icon
  • Embed
  • Screenreaders
  • Visibility
  • Exercise 11: Build a Single-page Website, Part 1
10. Bootstrap Flex
  • What is Flexbox?
  • Create a Flexbox Container
  • Inline Flexbox
  • Responsive Flexboxes
  • The Two Axes
  • Flex Directions
  • Justify Content
  • Alignment
  • Order
  • Exercise 12: Build a Single-page Website, Part 2

 
About us
Contact us
Careers at Wintrac
Our Clients
Why Wintrac


Register for a free training CD-ROM drawing
Refer a client or instructor and earn $$$


Wintrac Inc.
16523 SW McGwire Ct.
Beaverton OR 97007
 
Wintrac, Inc. All rights reserved.                                                                               Site Map   |   Terms of Use   |   Privacy Policy