Bootstrap CSS Tutorial Videos for Beginner - PowerPoint PPT Presentation

About This Presentation
Title:

Bootstrap CSS Tutorial Videos for Beginner

Description:

learn bootstrap css references through our online tutorial videos for beginner,this tutorial covers various css typography,tables, images, buttons,forms,and various helper classes to design or style web content. – PowerPoint PPT presentation

Number of Views:398

less

Transcript and Presenter's Notes

Title: Bootstrap CSS Tutorial Videos for Beginner


1
CATCH EXPERTS
https//www.catchexperts.com
http//www.courseing.com
2
Bootstrap CSS Tutorial Videos for Beginners by
3
Highlights
  • Typography
  • Buttons
  • Forms
  • Helpers classes
  • Images
  • Tables

4
Typography
  • The style and appearance of written content on
    web pages.
  • Bootstrap includes simple and easily customized
    typography
  • Typography is applicable for headings, body text,
    lists, and more.
  • Bootstrap typography includes heading tags lth1gt
    to lth6gt, ltsmallgt elements to create a lighter,
    secondary text, ltmarkgt element to highlight
    particular text.
  • .lead, .small, .text-left or right or centre,
    .text-justify, .list-inline are some typography
    classes.

5
Buttons
  • Bootstrap provides seven styles of buttons, they
    are default, primary, link, success, info,
    warning, danger.
  • .btn-default, .btn-primary, .btn-success,
    .btn-info, .btn-warning, .btn-danger, .btn-link
    are classes of those buttons.
  • Syntax ltbutton type"button" class"btn
    btn-default"gtDefaultlt/buttongt
  • .btn lg, .btn md, .btn sm, .btn xs are the sizes
    of buttons.
  • Syntax ltbutton type"button" class"btn
    btn-primary btn-lg"gtLargelt/buttongt

6
Forms
  • Bootstrap provides several form control styles,
    layout options, and custom components for
    creating a wide variety of forms.
  • Vertical form, In-line form, Horizontal form are
    various form types.
  • Vertical forms add a role form to the parent
    ltformgt element.
  • Inline forms uses create a form where all of the
    elements are inline, left aligned and labels are
    alongside, add the class .form-inline to the
    ltformgt tag.
  • Horizontal forms stands apart from the others not
    only in the amount of markup, but also in the
    presentation of the form.

7
Helpers Classes
  •  Uses to show or hide information by device via
    media queries.
  • .text-muted, .text-primary, .text-success,
    .text-info, .text-warning, .text-danger are text
    helper classes adds meaning through text-colors.
  • .bg-primary, .bg-success, .bg-info, .bg-warning,
    .bg-danger are the background helper classes
    which adds meaning through background-colors.
  • Also it has response utilities and hidden
    elements to show and/or hide content by devices.

8
Images
  • Bootstrap CSS provides various classes to change
    the images styles.
  • .img-rounded, .img-circle, .img-thumbnail,
    .img-responsive are the classes to style images.
  • Rounded image class Adds rounded corners to an
    image, circle image class shapes the image to a
    circle, thumbnail class Shapes the image to a
    thumbnail.
  • Responsive image class makes an image responsive.
  • Syntax ltimg srcteddy.jpg" class"img-responsive
    " altTeddy Bear"gt 

9
Tables
  • CSS Table classes is used to style the tables
    created on web pages.
  • .table, .table-striped, .table-bordered,
    .table-hover, .table-condensed are classes used
    to style the tables.
  • Table class adds fundamental styling to the
    tables, table-striped adds zebra striping to any
    table row within lttbodygt , table-bordered adds
    border on all sides of the table and cells,
    .table-hover enables a hover state on table rows
    within a lttbodygt, table condensed Makes table
    more compact by cutting cell padding in half.

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 Bootstrap CSS Tutorial
Videos for Beginner by
http//www.courseing.com
Write a Comment
User Comments (0)
About PowerShow.com