Free Bootstrap Introduction Tutorial for Beginners

1
CATCH EXPERTS
https//www.catchexperts.com
http//www.courseing.com
2
Free Bootstrap Introduction Tutorial Videos for
Beginners by
3
Highlights

• Bootstrap Overview
• Bootstrap Grid
• jQuery UI Bootstrap Downloading
• Rows, Columns, Containers
• Nesting Columns and Rows

4
Bootstrap Overview

• It is a framework that uses to create responsive
  mobile sites and applications.
• Includes HTML,CSS, JavaScript coding.
• Provides faster and easier web development.
• Can create responsive layout with less efforts.
• To learn bootstrap first one should have
  knowledge on HTML and CSS.
•                                       

5
Bootstrap Grid

•  Grid is a two dimensional structure made up of
  intersecting straight lines used to structure the
  content. 
• Uses to design layout and content structure and
  it is very effective.
• Includes predefined classes for easy layout
  options
• Provides powerful mixins for generating more
  semantic layouts.
• creates page layouts through a series of rows and
  columns  

6
JQuery UI Bootstrap Downloading

• Search for Bootstrap compatible with JQuery UI.
• Before installing select JS components like
  modals, dropdowns, collapse, carousel.
• Also select twitter bootstrap components like
  transitions, dropdowns, modals, scrollspy,
  togglable tags, affix, alert messages, typeahead,
  collapse, carousel.
• Provides Bootstrap theming for a number of third
  party jQuery UI widgets

7
JQuery UI Bootstrap Downloading

• Now Download archive file.
• Unzip archive
• Locate the folder custom-theme inside the CSS
  folder inside the newly uncompressed file
• Move that folder inside the directory of the
  website of you are working.
• Include the appropriate .CSS files in the layout
  of your website

8
Rows, Columns, Containers

• Bootstrap builds layouts based on 12 column
  layout and has multiple tiers.
• Containers, rows, and columns are the bootstrap
  major components.
• Rows are horizontal groups of columns, will be
  placed within a .container or .container-fluid.
•  .container and .container-fluid provides proper
  alignment and padding.
• columns may be immediate children of rows and
  Content should be placed within columns.

9
Nesting Columns and Rows

• Example for nesting one row and three equal
  columns is follows as
• Syntax ltdiv class"row"gt  
  ltdiv class"col-sm-1"gt.col-sm-1lt/divgt   
  ltdiv class"col-sm-1"gt.col-sm-1lt/divgt  
    ltdiv class"col-sm-1"gt.col-sm-1lt/divgt
  lt/divgt

10
Feedback
Like It ? Hate It?
We would love to hear from you whatever you think
about the course.
Click HERE to share what you think!
11
Thank you
Thank You for Watching Free Bootstrap
Introduction Tutorial Videos for Beginner by
http//www.courseing.com