Did you know that Bootstrap is a popular front end framework and has garnered a lot of attention from programmers in recent times? With our Bootstrap tutorial course, you will learn as to how to use this innovative platform to develop web applications and much more!

What is Bootstrap?

Bootstrap is a web designing framework and helps to build websites that are fast, responsive and mobile friendly. It was originally developed at Twitter for internal purposes and was later released as an open source platform. This framework is a boon to novice web designers as most of the complex components are already pre-written. In fact, our very site employs a few components of bootstrap CSS and this lends it a good look and feel. Here is a list of a few features of Bootstrap that you will encounter as part of our Bootstrap tutorial course:

  • Responsive design
  • Enables fast development
  • Flexible, consistent and customizable
  • Extensive community support

 

Objectives

At the end of this Bootstrap tutorial course, you will be able to

  • Build fast and responsive websites using the components of Bootstrap
  • Customize a site build in Bootstrap using LESS.
  • Create robust website using Bootstrap without writing lot of code.

 

What will you learn from this course?

When you learn Bootstrap with us, you get to:

  • Understand the grid system and layouts
  • Learn the different components of bootstrap
  • Style for forms, tables, text
  • Learn how to use the aesthetic elements like Navbars, breadcrumbs & media objects
  • Add and use plugins for Bootstrap
  • Use LESS to customize Bootstrap

 

Prerequisites:

  • Must have good knowledge in HTML & CSS.
  • Basic knowledge in javascript is needed

 

Who is this course designed for?

  • Web designers and developers who want to learn Bootstrap to enhance their skills in creating responsive websites.
  • For novice web designers who wish to create websites with ease

 

Course Outline:

The Basics

  • Why Bootstrap?
  • What is Bootstrap?
  • Responsive Web Design(RWD) an overview
  • Download and getting started with Bootstrap
  • Structure of Bootstrap Application

Bootstrap Grid System

  • Introduction to Grid Sytem
  • Default and Fluid Grid System
  • Designing a grid system for desktop/ tablets /smart phones
  • Nesting and Offsetting columns
  • Reordering of columns using push and pull

Bootstrap Components

Page Components

  • Using page headers and panels
  • Adding Media Objects, Thumbnails
  • Creating and adding list group

Navigation Components

  • Navs, Navbars and Breadcrumbs

Working with Forms

  • Form layouts
  • Form Controls
  • Form sizing

Bootstrap CSS

  • Typography
  • Tables
  • Label
  • Buttons
  • Glyphicons
  • Wells
  • Badges

Bootstrap plugins

For functionality

  • Dropdowns
  • Alert messages
  • Buttons

For managing content

  • ScrollSpy
  • Collapse
  • Tabs
  • Tooltip
  • Popovers

For Look and Feel

  • Carousel
  • Modals

 

Customizing Bootstrap

 

  • Using CSS
  • Using LESS

Optimizing Bootstrap

 

  • Techniques to optimize CSS, Javascript and images
  • Avoiding common pitfalls