Introduction of Bootstrap 4 Presentation Responsive design Grid System

1. RESPONSIVE DESIGN
WITH BOOTSTRAPE
Presented By:
Saira elahi

2. INTRODUCTION
 Bootstrap is an Open-Source front-end Frame-work.
• Bootstrap 4.0.0 is the current version of bootstrap
It is for creating responsive websites and web
applications.
 It contains HTML and CSS-based design templates for
typography, forms, buttons, navigation and other
interface components, as well as optional JavaScript
extensions. (https://getbootstrap.com/).
• Mobile-first approach
• Single (responsive) grid system

3. What is Responsive Design ?
 The design that works properly on any resolution .
 It majorly concerns with standard devices resolutions.
 User friendly approach .

4. Bootstrap standard devices resolution?
 Extra small devices i.e Phones (<768px),Symbol (-xs-),column
width(Auto).
 Small devices i.e Tablets (≥768px),Symbol (-sm-),column
width(60px).
 Medium devices i.e Desktop (≥992px),Symbol (-md-),column
width(78px).
 Large devices i.e Desktop (≥1200px),Symbol (-lg-),column width(95px).

6. What is the most important thing to
understand in Bootstrap?
Grid System
 Bootstrap includes a responsive, mobile first fluid grid system that appropriately
scales
up to 12 columns as the device or viewport size increases. It includes predefined
classes for easy layout options.
 Grid systems are used for creating page layouts through a series of rows and
columns
that house your content
 Grid classes apply to devices with screen widths greater than or equal to the
breakpoint
sizes, and override grid classes targeted at smaller devices. Therefore, applying
any -
md- class to an element will not only affect its styling on medium devices but
also on
large devices if a -lg- class is not present

7. Bootstrap Grid System Example
6 Columns 6 Columns
4 Columns 4 Columns 4 Columns
3 Columns 3 Columns 3 Columns 3 Columns

8. Bootstrap Glyphicons :
 These are SVG , scalable vectors graphics .
 Around 260 icons are available for free with bootstrap.
 How to use
 For performance reasons, all icons require a base class and individual icon
class. To use, place the following code just about anywhere. Be sure to
leave a space between the icon and text for proper padding
 <div> <span class="glyphicon glyphicon-search"></span> </div>

10. Bootstrap other components :
 Dropdown
 Button Group
 Navigations Component
 Pagination
 Alerts
 Progress Bars
 Panels … etc
 for all components visit(http://getbootstrap.com/components/ )