CSS and Bootstrap

The mobile-first philosophy

Responsive design basics

Setting the viewport, Sizing your content to the viewport, Using media queries to achieve responsiveness, Responsive design patterns, Navigation patterns

Introducing Bootstrap

What Bootstrap includes: CSS, Components, JavaScript, Customization

Getting Started with Bootstrap

Get Bootstrap

The Bootstrap file structure

A precompiled bundle: folder: css, folder: fonts, folder: js

A source code bundle: folder: dist, folder: fonts, folder: grunt, folder: js, folder: less

CSS preprocessors: Variables, Mixins, Operations ,Nesting

How to use Bootstrap: The application folder structure

Creating Responsive Layouts Using Bootstrap CSS

Basic HTML structure for Bootstrap: The head section ,The body section

Basic HTML elements

Responsive classes : Understanding the basics ,Controlling display of elements across devices

Rendering images : Showing responsive images in a sample application

The grid system

Constructing data entry forms : Making the form horizontal ,Finalizing the Contact Us page

Other utility classes

Encapsulating everything

Packaged Components in Bootstrap

The page header


The navigation bar



Toolbars and button groups







The JavaScript Add-ons in Bootstrap

Basic concepts: Custom data attributes ,JavaScript APIs ,JavaScript events ,Packaging add-ons

Modal windows : The basic modal window , Example – enhancing our application using the modal dialog box


Collapse and accordions: Example – showing the product categories of our store

Tooltips and popovers

This dropdown



Compiling and Building Bootstrap

Required tools: Node.js:Installing node.js, Grunt : Installing Grunt-cli

Installing Bootstrap

Compiling and building Bootstrap: Installing dependencies, Building Bootstrap

Customizing Bootstrap

Customizing using the build environment

Customizing using Bootstrap web interface

Extending Bootstrap

Theme extension – Bootswatch: Downloading the CSS files, Using the LESS files

A tree-view control

Installing the tree-view component

WYSIWYG editor and Font Awesome

Installing and using the WYSIWYG component

The bootstrap-wysiwyg component

The jQuery hotkeys component

Font Awesome


Training Details

  • Course Duration: Bootstrap training duration is of 45days.Training + Assignments + Actual Project Based Case Studies
  • Training Materials:
    All attendees will receive,
    Assignment after each module, Video recording of every session
    Notes and study material for examples covered.
    Access to the Training Blog & Repository of Materials

Course Inquiry – Bootstrap