SlideShare a Scribd company logo
INTRODUCTION OF BOOTSTRAP:-
Bootstrap is launched by “29 august 2015” in
INDIA. It is open source framework. It is used in
mobile and it is used in grid. It is used in
reasponsive design. Bootstrap is an updated
version of CSS.
Bootstrap is the world’s most popular framework
for building responsive, mobile-first sites and
applications. Inside you’ll find high quality
HTML, CSS, and JavaScript to make starting
any project easier than ever.
BOOTSTRAP DISTRIBUTION
. The bootstrap does not replace or add to the
original data.
. We use bootstrap distribution as a way to
estimate the variation in a statistic based on the
original data.
GRID:-
Grid systems are used for creating page layouts
through a series of rows and columns that house
your content. Here's how the Bootstrap grid
system works:
Rows must be placed within a .container (fixed-
width) or .container-fluid (full-width) for proper
alignment and padding.
Use rows to create horizontal groups of columns.
GRID CLASSES
The Bootstrap grid system has four classes:
-xs (for phones).
-sm (for tablets).
-md (for desktops).
-lg (for larger desktops).
The classes above can be combined to create more
dynamic and flexible layouts.
GRID SYSTEM RULES
Some Bootstrap grid system rules:
. Rows must be placed within a .container (fixed-width)
or .container-fluid (full-width) for proper alignment and
padding.
.Use rows to create horizontal groups of columns.
. Content should be placed within columns, and only
columns may be immediate children of rows.
. Predefined classes like .row and .col-sm-4 are available
for quickly making grid layouts.
.Columns create gutters (gaps between column
content) via padding. That padding is offset in
rows for the first and last column via negative
margin on .rows.
.Grid columns are created by specifying the
number of 12 available columns you wish to span.
For example, three equal columns would use
three .col-sm-4.
BASIC STRUCTURE OF A BOOTSTRAP GRID
<div class="container">
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
</div>
ADVANTAGES OF BOOTSTRAP:-
.Easy to use: Anybody with just basic knowledge of
HTML and CSS can start using Bootstrap.
. Responsive features: Bootstrap’s responsive CSS
adjusts to phones, tablets, and desktops.
. Mobile-first approach: In bootstrap 3, mobile-
first styles are part of the core framework.
. Browser compatibility: Bootstrap is compatible
with all modern browsers(chrome , firebox,
internet-explorer, opera).
THANK YOU

More Related Content

What's hot

What's hot (20)

Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Css
CssCss
Css
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Bootstrap PPT Part - 2
Bootstrap PPT Part - 2Bootstrap PPT Part - 2
Bootstrap PPT Part - 2
 
Bootstrap 4 ppt
Bootstrap 4 pptBootstrap 4 ppt
Bootstrap 4 ppt
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
 
CSS
CSSCSS
CSS
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
 

Similar to Bootstrap ppt

Similar to Bootstrap ppt (20)

Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_ppt
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap grids
Bootstrap gridsBootstrap grids
Bootstrap grids
 
Twitter bootstrap (css, components and javascript)
Twitter bootstrap (css, components and javascript)Twitter bootstrap (css, components and javascript)
Twitter bootstrap (css, components and javascript)
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - new
 
Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3
 
Bootstrap day1
Bootstrap day1Bootstrap day1
Bootstrap day1
 
BOTSTRAP.ppt
BOTSTRAP.pptBOTSTRAP.ppt
BOTSTRAP.ppt
 
Bootstrap
Bootstrap Bootstrap
Bootstrap
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Web Development Course - Twitter Bootstrap by RSOLUTIONS
Web Development Course - Twitter Bootstrap by RSOLUTIONSWeb Development Course - Twitter Bootstrap by RSOLUTIONS
Web Development Course - Twitter Bootstrap by RSOLUTIONS
 
Bootstrap 3 vs. bootstrap 4
Bootstrap 3 vs. bootstrap 4Bootstrap 3 vs. bootstrap 4
Bootstrap 3 vs. bootstrap 4
 
Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
Bootstrap grid system
Bootstrap grid systemBootstrap grid system
Bootstrap grid system
 
Professional bootstrap training for it companies online onsite offsite
Professional bootstrap training for it companies online onsite offsiteProfessional bootstrap training for it companies online onsite offsite
Professional bootstrap training for it companies online onsite offsite
 
Boot strap
Boot strapBoot strap
Boot strap
 
Responsive Design and Bootstrap
Responsive Design  and BootstrapResponsive Design  and Bootstrap
Responsive Design and Bootstrap
 
Responsive design
Responsive designResponsive design
Responsive design
 

Recently uploaded

National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
AlecAnidul
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 

Recently uploaded (11)

CA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfCA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdf
 
The Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptxThe Design Code Google Developer Student Club.pptx
The Design Code Google Developer Student Club.pptx
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
National-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptxNational-Learning-Camp 2024 deped....pptx
National-Learning-Camp 2024 deped....pptx
 
The Evolution of Fashion Trends: History to Fashion
The Evolution of Fashion Trends: History to FashionThe Evolution of Fashion Trends: History to Fashion
The Evolution of Fashion Trends: History to Fashion
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.
 
Top 5 Indian Style Modular Kitchen Designs
Top 5 Indian Style Modular Kitchen DesignsTop 5 Indian Style Modular Kitchen Designs
Top 5 Indian Style Modular Kitchen Designs
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 

Bootstrap ppt

  • 1.
  • 2. INTRODUCTION OF BOOTSTRAP:- Bootstrap is launched by “29 august 2015” in INDIA. It is open source framework. It is used in mobile and it is used in grid. It is used in reasponsive design. Bootstrap is an updated version of CSS. Bootstrap is the world’s most popular framework for building responsive, mobile-first sites and applications. Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.
  • 3. BOOTSTRAP DISTRIBUTION . The bootstrap does not replace or add to the original data. . We use bootstrap distribution as a way to estimate the variation in a statistic based on the original data.
  • 4. GRID:- Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works: Rows must be placed within a .container (fixed- width) or .container-fluid (full-width) for proper alignment and padding. Use rows to create horizontal groups of columns.
  • 5. GRID CLASSES The Bootstrap grid system has four classes: -xs (for phones). -sm (for tablets). -md (for desktops). -lg (for larger desktops). The classes above can be combined to create more dynamic and flexible layouts.
  • 6. GRID SYSTEM RULES Some Bootstrap grid system rules: . Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. .Use rows to create horizontal groups of columns. . Content should be placed within columns, and only columns may be immediate children of rows. . Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts.
  • 7. .Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows. .Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4.
  • 8. BASIC STRUCTURE OF A BOOTSTRAP GRID <div class="container"> <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> </div> </div>
  • 9. ADVANTAGES OF BOOTSTRAP:- .Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap. . Responsive features: Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops.
  • 10. . Mobile-first approach: In bootstrap 3, mobile- first styles are part of the core framework. . Browser compatibility: Bootstrap is compatible with all modern browsers(chrome , firebox, internet-explorer, opera).