Introduction to Bootstrap

Course Overview

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

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.

Course Outline

  1. Introduction to Bootstrap 4
    1. What Is Bootstrap?
    2. What Is a Framework?
    3. What Is Responsive Design?
    4. What Is Mobile-first Design?
    5. Major Changes in Bootstrap 4
  2. Creating a Basic HTML Template with Bootstrap
  3. How to Download Bootstrap
  4. Applying Styles and Functions with Class
  1. What Is the Viewport?
  2. Understanding Breakpoints
    1. Bootstrap’s Breakpoints
    2. Introducing Bootstrap’s Grid System
  3. Using Responsive Classes
    1. Containers
    2. Rows and Columns
  4. Making Grids
  1. What Is the Viewport?
  2. Understanding Breakpoints
    1. Bootstrap’s Breakpoints
    2. Introducing Bootstrap’s Grid System
  3. Using Responsive Classes
    1. Containers
    2. Rows and Columns
  4. Making Grids
  1. How Bootstrap Updates Browser Defaults
    1. Introducing Reboot
    2. Bootstrap Default Styles
  2. Understanding rem and em
    1. em
    2. rem
    3. Headings and Paragraphs
  3. Styling Blocks With rem
  4. Styling Text Inside Blocks
    1. Inline Elements
    2. Text Utilities
  1. Responsive Tables
    1. Breakpoint-specific Responsive Tables
  2. Overall Table Styles
  3. Styling Tables
  4. Table Headers
    1. The scope Attribute
  5. Contextual Classes
  1. Browser Input Inconsistencies
    1. Form Controls
    2. Input Types
  2. Form Layout
    1. Form Groups
    2. Grid Layout
    3. Horizontal Forms
    4. Sizing
  3. Styling a Form
  1. Making Images Responsive
    1. Responsive CSS
    2. Using the Picture Element
  2. Aligning Images
    1. Float Classes
    2. Centering Images
  3. Figures
  4. Create a Page with Images

Accordion Content

  1. Styling Buttons
    1. Outline Buttons
    2. Button Sizes
  2. Carousel
  3. Make a Carousel
  4. Jumbotron
  5. Alerts
  6. Collapse
  7. Modal
  8. Pagination
  9. Card
  10. Tooltip
  11. Popover
  1. Borders
    1. Border Colors
    2. Border Width
    3. Rounded Corners
  2. Position
  3. Shadows
  4. Spacing Utilities
  5. Misc Helpful Utilities
    1. Clearfix
    2. Close Icon
    3. Embed
    4. Screenreaders
    5. Visibility
  6. Build a Single-page Website, Part 1
  1. What is Flexbox?
  2. Create a Flexbox Container
    1. Inline Flexbox
    2. Responsive Flexboxes
  3. The Two Axes
    1. Flex Directions
  4. Justify Content
    1. Alignment
    2. Order
  5. Build a Single-page Website, Part 2

₦ 20,000

  • Learn at your own pace with 24/7 access
  • Duration: 1 year
× How can we help you?