Bootstrap

CloudLabs

Projects

Assignment

24x7 Support

Lifetime Access

.

Course Overview

This course explains how to create responsive web pages using Bootstrap. After completing our Bootstrap course you would be able to create Bootstrap based websites yourself.

what is Bootstrap: Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. In June 2014 it was the No.1 project on GitHub with 69,000+ stars and 25,000+ forks, with a user base including MSNBC and NASA.

At the end of the training, participants will be able to:

Pre-requisite

  • 1. To attend this Bootstrap training you must be familiar with HTML5 and CSS3 and have some basic concepts of designing responsive websites. You can complete these requirements by attending our HTML5 Course and Responsive web design course

Duration

5 days

Course Outline

  1. HTML5 doctype
  2. Mobile First
  3. Responsive images
  4. Typography and links
  5. Normalize
  6. Containers
  1. Headings
  2. INLINE SUBHEADINGS
  3. Emphasis
  4. Abbreviations
  5. Addresses
  6. Blockquotes
  7. Lists
  1. Basic Table
  2. Optional Table Classes
  3. STRIPED TABLE
  4. BORDERED TABLE
  5. HOVER TABLE
  6. CONDENSED TABLE
  7. Contextual classes
  8. Responsive tables
  1. Form Layout
  2. VERTICAL OR BASIC FORM
  3. INLINE FORM
  4. HORIZONTAL FORM
  5. Supported Form Controls
  6. CHECKBOXES AND RADIOS
  7. SELECTS
  8. Form Control States
  9. Form Control Sizing
  10. Help Text
  1. Button Size
  2. Button State
  3. DISABLED STATE
  4. Button Tags
  1. .img-rounded
  2. .img-circle
  3. .img-thumbnail
  1. Close icon
  2. Carets
  3. Quick floats
  4. Center content blocks
  5. Clearfix
  6. Showing and hiding content
  7. Screen reader content
  1. visible-xs
  2. visible-sm
  3. visible-md
  4. visible-lg
  1. .visible-print
  2. .hidden-print
  1. What are Glyphicons?
  2. Where to find Glyphicons?
  1. Options
  2. ALIGNMENT
  3. HEADERS
  1. Basic Button Group
  2. Button Toolbar
  3. Button Size
  4. Nesting
  5. Vertical Buttongroup
  1. Split Button Dropdowns
  2. Button Dropdown Size
  3. Dropup variation
  1. Basic Input Group
  2. Input Group Sizing
  3. Checkboxes and radio addons
  4. Button addons
  5. Buttons with dropdowns
  6. Segmented buttons
  1. Tabular Navigation or Tabs
  2. Pills Navigation
  3. VERTICLE PILLS
  4. Justified Nav
  5. Disabled Links
  6. Dropdowns
  7. PILLS WITH DROPDOWNS
  1. Default navbar
  2. Responsive navbar
  3. Forms in navbar
  4. Buttons in navbar
  5. Text in navbar
  6. Non-nav links
  7. Component alignment
  8. Fixed to top
  9. Fixed to bottom
  10. Static top
  11. Inverted navbar
  12. Bootstrap Breadcrumb
  1. Pagination
  2. DEFAULT PAGINATION
  3. STATES
  4. SIZING
  5. Pager
  6. ALIGNED LINKS
  7. STATES
  8. Bootstrap Labels
  1. Bootstrap Jumbotron
  2. Bootstrap Page Header
  3. Bootstrap Thumbnails
  1. Dismissal Alerts
  2. Links in Alerts
  1. Default Progress Bar
  2. Alternate Progress Bar
  3. Striped Progress Bar
  4. Animated Progress Bar
  5. Stacked Progress Bar
  1. Data Attributes
  2. Events
  3. Bootstrap Transition Plugin
  4. Bootstrap Modal Plugin
  5. Bootstrap Dropdown Plugin
  6. Bootstrap Scrollspy Plugin
  7. Bootstrap Tab Plugin
  8. Bootstrap Tooltip Plugin
  9. Bootstrap Popover Plugin
  10. Bootstrap Alert Plugin
  11. Bootstrap Button Plugin
  12. Bootstrap Collapse Plugin
  13. Bootstrap Carousel Plugin
  14. Bootstrap Affix Plugin

Reviews