Bootstrap Page Components Tutorial Videos for beginners

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

• Labels and Badges
• List Groups Panels
• Jumbotron and Page Header
• Button Groups, Navs, Progress Bars
• Pagination

4
Labels and Badges

• Badges are numerical indicators of how many items
  are associated with a link.
• Badges will be created by ltspan gt elements of
  .badge class.
• Syntax lta href"gtArticles ltspan class"badge"gt3
  lt/spangtlt/agtltbrgt // 3 is badge
• Badges can also be used inside buttons.
• Syntax ltbutton type"button" class"btn
  btn-primary"gt Primary 
  ltspanclass"badge"gt7lt/spangtlt/buttongt
                                        

5
Labels and Badges

• Labels are used to provide additional information
  about something.
• Ex Articles
• Label elements created using ltspangt elements of
  .label class.
• Syntax lth1gtExample ltspan class"label
  label-default"gtNewlt/spangtlt/h1gt
• Label class  followed by any one of the six
  contextual classes 1.label-default, 2.label-primar
  y, 3.label-success, 4.label-info, 5.label-warningo
  r 6.label-danger

NEW
6
List Groups Panels

• Unordered list groups create with .list-group
  class and list items create with .list-group-item
  class.
• Syntax ltul class"list-group"gt
  ltli class"list-group-item"gtitem1lt/ligt lt/ulgt
• List groups can also be created with linked
  items, badges.
• panel in bootstrap is a bordered box with some
  padding around its content.
• Panels would be create with the .panel class, and
  content inside the panel has a .panel-body class.
    

7
List Groups Panels

• .panel-heading class adds a heading to the panel.
• .panel-footer class adds a footer to the panel.
• Panel groups create with .panel-group class which
  enclose in ltdivgt tags.
• Syntax ltdiv class"panel panel-group"gt
    ltdiv class"panel-body"gtA Basic Panellt/divgt
  ltdiv class"panel-heading"gtPanel Headinglt/divgt
  ltdiv class"panel-body"gtPanel Contentlt/divgt
   ltdiv class"panel-footer"gtPanel Footerlt/divgt
  lt/divgt

8
Jumbotron and Page Header

• Jumbotron is a box use for calling extra
  attention to some special content.
• jumbotron box allows HTML code and bootstrap
  classes, elements.
• It can be created using ltdivgt tags with
  .jumbotron class.
• Syntax ltdiv class"jumbotron"gt lth2gt
  Bootstraplt/h2gt ltpgt Basicslt/pgt lt/divgt
• Page header can be created using ltdivgt tags with
  .pageheader class.
• Syntax ltdiv class"page-header"gt  lth1gtPage
  Header introductionlt/h1gt lt/divgt  

9
Button Groups, Nav, Progress Bars

• Bootstrap allows to group a chain of buttons
  together.
• Syntax ltdiv class"btn-group"gt   ltbutton type
  "button" class"btn btn-primary"gtSonylt/buttongt  
  ltbutton type"button" class"btn
  btn-primary"gtLGlt/buttongtlt/divgt
• Nav is a navigation header that is placed at the
  top of the page.
• progress bar can be used to show a user how far
  along he/she is in a process.
• Contextual classes are used to provide progress
  bars with colors.
• Syntax ltdiv class"progress"gt   ltdiv class"prog
  ress-bar" role"progressbar" aria-value now"70gt
  lt/divgt

10
Pagination

• Pagination means assigning sequence of numbers
  assigned to pages in a website.
• By clicking on respective numbers users will be
  redirected to that web page.
• Syntax ltul class"pagination"gt   ltligtlta href"
  "gt1lt/agtlt/ligt   ltligtlta href""gt2lt/agtlt/ligt   lt
  ligtlta href""gt3lt/agtlt/ligt lt/ulgt

11
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!
12
Thank you
Thank You for Watching Bootstrap Page Components
Tutorial Videos for Beginner by
http//www.courseing.com