The styling and presentation of your website is imperative, as it plays an important role in creating a sublime user experience. Therefore, you need to acquire design skills, which help you to create attractive websites. Add deadlines to the project where time is imperative and you realize you have quite a task at hand.

Several toolkits and frameworks have come to the fore to ease and streamline the task of web designing but none comes close to the open source framework, Bootstrap.

Bootstrap has become one of the most popular projects on the code-sharing platform GitHub.

It has good community support and a vast ecosystem including templates and extensions built around it. With a modular approach, Bootstrap saves you a considerable amount of time and effort allowing you to focus on the core parts of your web development projects.

Originally released initially by Twitter to maintain consistency in their internal web designing and development projects, Bootstrap has evolved and since the release of Version 3 and now has a mobile-first approach which helps you to create websites that function efficiently on mobile platforms despite the platform constraints.

Objectives for this class:
  • Understand the advantages of using a component CSS framework.
  • Know the benefits of reusability in design and development
  • How grid work and how to use them in mobile and responsive design
  • Obtain an introduction to compiled CSS with LESS
  • How to work with 3rd party components
  • Integrate in existing web projects for fast development
  • Learn what other web tools use Bootstrap

Who Should Attend: This course is for anybody who creates and/or develops web sites or applications needing a framework to help them quickly prototype their designs or speed up their design process.

Outline
 Bootstrap Scaffolding
  • Mobile first design
  • Why Bootstrap?
  • Including Bootstrap
  • Customizing install
  • Responsive Design
  • The "container" class
  • How Grids work in Bootstrap
    • Grid classes (.col-xs-, .col-sm-, .col-md-, .col-lg-)
    • Adding offsets to columns
    • Pushing and pulling columns
    • Nesting columns
  • Navigation components
    • Navs
    • Navbars
  • Jumbotron component
Page Components
  • Headers
  • Panels
  • ListGroup
  • Breadcrumbs
  • Labels
  • Buttons
  • Glyphicons (with buttons, toolbars and form inputs)
  • Wells
 Page Components: Forms
  • Creating forms
  • Inline and horizontal forms
  • Form validation
Bootstrap Plugins
  • Alert Messages
  • Buttons and button groups
  • ScrollSpy
  • Tabs
  • Collapse
  • Carousel
  • Modal
 Extending Bootstrap with Custom Plugins
  • Bootbox.js
  • DateTime Picker
  • Font Awesome
  • Off-Canvas
  • Image Gallery
  • Social Buttons
  • SweetAlert
  • Yamm3 Mega Menu
Under the Hood and More Practice
  • Reviewing the Bootstrap CSS source code
  • Building another Bootstrap web page from scratch