SlideShare une entreprise Scribd logo
1  sur  55
Télécharger pour lire hors ligne
Presented by,
FIROS. K
Contents
o INTRODUCTION
o HISTORY
o WHY BOOTSTRAP ?
o IT INCLUDES !
o HOW TO USE IT ?
o CONTAINERS
o GRID
o WORKING WITH BOOTSTRAP !
o BOOTSTRAP 5 IS COMING !
o CONCLUSION
o REFERENCE
INTRODUCTION
 Bootstrap is a free, open-source, and one of the most popular front-end
framework.
 Developed by twitter for creating responsive web applications.
 It is a collection of CSS and JavaScript.
 Bootstrap is the 6th most starred project on Github, with more than
135,000 stars.
HISTORY
 Developed by Mark Otto and Jacob Thornton at twitter.
 It was renamed from Twitter Blueprint to Bootstrap.
 Released as an open-source product on August 19, 2011 in
Github.
 It consist of 3 major versions, Bootstrap 2, 3 & 4.
HISTORY
 Bootstrap v2.0
 Released on January 31, 2012.
 Built-in support for Glyphicons.
 Supports responsive web designing.
 Bootstrap v3.0
 Released on August 19, 2013.
 Redesigned components to use flat design and a mobile first approach.
HISTORY
 Bootstrap v4.0
 The first alpha version of Bootstrap 4 was released on August 19, 2015.
 The first beta version was released on August 10, 2017.
 Mark Otto suspended work on Bootstrap 3 to free-up time to work on
Bootstrap 4.
 V4.0 was finalized January 18, 2018.
WHY BOOTSTRAP ?
 Mobile first approach.
 Browser support.
Etc.
WHY BOOTSTRAP ?
 Easy to get started.
 Responsive design.
IT INCLUDES !
 It includes 3 files,
 bootstrap.min.css
 jquery.min.js
 Bootstrap.min.js
How to use it ?
 We can include it either by using CDN or downloaded files.
 Syntax for using CDN (Content Distribution Network)
 Syntax for using downloaded files
<script type = “text/javascript” src = “jquery.min.js”></script>
<script type = “text/javascript” src = “bootstrap.min.js”></script>
<link rel = “stylesheet” type = “text/css” href = “bootstrap.min.css”>
Containers
 It has a concept of containing elements to wrap site contents.
 There are two types of containers
 .container
Class used for a responsive fixed width.
 .container-fluid
Class used for a full-width container.
Containers
 Syntax for using .container
<div class = “container”>
…
</div>
 Syntax for using .container-fluid
<div class = “container-fluid”>
…
</div>
Grid
 It is a structure (Usually 2D) made up of series of intersecting straight
(Vertical/Horizontal) lines.
 It is used to structure the contents.
 It is a very effective method to create a consistent layout rapidly &
effectively using Html & CSS.
 Makes the website easy to scan & reduces the load on users.
Grid Structure
Grid Example
 It allows up to 12 columns across the page.
 We can divide the containers in rows and each row in columns with space
multiple of 12.
Grid Working
 We can use any combination that the sum be equal to 12.
 Responsive Bootstraps' grid system with 3 columns
Grid Classes
Grid Options
Working with Bootstrap !
Bootstrap Tables
 There are 4 main classes for tables
 table
 table-striped
 table-bordered
 table-hover
table
Basic table style with just some light padding and horizontal dividers.
<table class = “table”> … </table>
Bootstrap Tables
table-striped
Used to get zebra-striping to any rows with in the <tbody>
<table class = “table table-striped”> … </table>
table-bordered
Used to get borders surrounding every element and rounded corners
around the entire table.
<table class = “table table-bordered”> … </table>
Bootstrap Tables
table-hover
Used to get a light grey background to rows while the mouse cursor
come over it.
<table class = “table table-hover”> … </table>
table-condensed
Used to make tables more compact by cutting cell padding in half.
<table class = “table table-condensed”> … </table>
Table – Contextual Classes
 It is used to color table rows / individual cells.
 There are 5 contextual-classes
 active
 success
 info
 warning
 danger
Table - Responsive
 By wrapping any <table> in table-responsive class we can make a
responsive table.
<div class = “table-responsive”>
<table class = “table”>
….
</table>
</div>
Bootstrap Images
 It consist of 3 main classes
 img-rounded
 img-circle
 img-thumbnail
Bootstrap Images
Image - Responsive
 We can also make responsive images by using img-fluid class.
<img src = “…” class = “img-fluid” alt = “Responsive_Image” />
Carousel
 It is a slideshow for cycling through elements.
 We can use the carousel slide class to create slideshow.
 Syntax is,
<div id="demo" class="carousel slide" data-ride="carousel">
Carousel
Carousel
Bootstrap alerts
 It provides an easy way to create predefined alert messages.
 They are created with the alert class followed by the one of the 4
contextual classes.
alert-success
alert-info
alert-warning
alert-danger
Alert - Example
Alert - Example
Bootstrap Buttons
 Bootstrap provides 7 styles of buttons. We can use the btn class to obtain
it.
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link
Buttons - Example
Spinners
 It is used to create a spinner/loader.
 We can use the spinner-border class to create it.
 Syntax is,
<div class="spinner-border"></div>
 By using contextual class we can change the color of the spinner
accordingly.
Spinners
Bootstrap - Glyphicons
 Bootstrap provides 260 glyphicons from Glyphicon Halflings set.
Glyphicons - Example
Glyphicons - Example
Bootstrap - Labels
 Used to provide information about something.
 We can create labels with colorful backgrounds to highlight the text.
 Use the label class followed by one of the six contextual classes.
label-default label-primary
label-success label-info
label-warning label-danger
Labels - Example
Bootstrap - Panels
 It is a bordered box with some padding around it’s content that can be
used to highlight or separated from information.
 Like other classes it is also used with contextual classes.
panel-default panel-primary
panel-success panel-info
panel-warning panel-danger
Panels - Example
Bootstrap - Forms
 Form controls automatically receive some global styling with Bootstrap.
 All elements with class form-control have a width of 100%.
 It provides following types of layout,
 Vertical form (default)
 Horizontal form
 Inline form
Vertical Forms
 It is the default form layout.
 Wrap labels and controls in a <div> with a class form-group, which is
used for optimum spacing.
 Add the class form-control to all the elements
Vertical Forms
Horizontal Forms
 Add the class form-horizontal in the <form> tag.
 Add the class control-label to all labels in form.
Inline Forms
 It is used align all the elements of form in a line and left aligned.
 Add the class form-inline in <form> tag.
 This only applies to form within viewports that are at least 768px wide.
Bootstrap - Themes & Templates
 We can find and download several themes & templates.
 A theme consist of customized CSS.
 A template consist of one or more predesigned Html pages, which often make
use of theme.
 Both are collection of bootstrap elements (Grid, buttons, panels, etc.).
Bootstrap 5 is coming !
► Dropped jQuery
► Responsive containers
► Using as module
► Refreshed website
Conclusion
 Bootstrap is a free and open-source CSS framework directed at
responsive, mobile-first front-end web development.
 It makes the responsive web designing more easy and effective.
 It contains CSS, jQuery / Javascript that makes the designing more easier.
Reference
 Otto Mark (November 28, 2019) – “Bootstrap 4.4.1”
https://github.com/twbs/bootstrap
 Jake Spurlock (May, 2013) – “Bootstrap”
 W3Schools (2018) – “Bootstrap 4 - Tutorials”
https://www.w3schools.com/bootstrap4/
Do you have any doubts ?
Thank You !

Contenu connexe

Tendances (20)

An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
Bootstrap Web Development Framework
Bootstrap Web Development FrameworkBootstrap Web Development Framework
Bootstrap Web Development Framework
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Servlets
ServletsServlets
Servlets
 
Bootstrap 4 ppt
Bootstrap 4 pptBootstrap 4 ppt
Bootstrap 4 ppt
 
CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
Bootstrap PPT Part - 2
Bootstrap PPT Part - 2Bootstrap PPT Part - 2
Bootstrap PPT Part - 2
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Bootstrap grids
Bootstrap gridsBootstrap grids
Bootstrap grids
 

Similaire à Bootstrap - Basics

Twitter bootstrap (css, components and javascript)
Twitter bootstrap (css, components and javascript)Twitter bootstrap (css, components and javascript)
Twitter bootstrap (css, components and javascript)NexThoughts Technologies
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptRadheshyam Kori
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - newWebtech Learning
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Wahyu Putra
 
7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentationJohnLagman3
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4imdurgesh
 
Introduction to Responsive Web Development
Introduction to Responsive Web DevelopmentIntroduction to Responsive Web Development
Introduction to Responsive Web DevelopmentNikhil Baby
 
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 RSOLUTIONSRSolutions
 
Web development and web design with seo
Web development and web design with seoWeb development and web design with seo
Web development and web design with seoRajat Anand
 
Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3Nur Fadli Utomo
 
Bootstrap Presentation Mitesh
Bootstrap Presentation MiteshBootstrap Presentation Mitesh
Bootstrap Presentation MiteshMitesh Gandhi
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry
 

Similaire à Bootstrap - Basics (20)

Lecture-03.pptx
Lecture-03.pptxLecture-03.pptx
Lecture-03.pptx
 
Twitter bootstrap (css, components and javascript)
Twitter bootstrap (css, components and javascript)Twitter bootstrap (css, components and javascript)
Twitter bootstrap (css, components and javascript)
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_ppt
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - new
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
 
Bootstrap day1
Bootstrap day1Bootstrap day1
Bootstrap day1
 
7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation
 
Bootstrap 3 vs. bootstrap 4
Bootstrap 3 vs. bootstrap 4Bootstrap 3 vs. bootstrap 4
Bootstrap 3 vs. bootstrap 4
 
Boot strap introduction
Boot strap introductionBoot strap introduction
Boot strap introduction
 
Anvesh_BOOTSTRAP.pptx
Anvesh_BOOTSTRAP.pptxAnvesh_BOOTSTRAP.pptx
Anvesh_BOOTSTRAP.pptx
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
 
Introduction to Responsive Web Development
Introduction to Responsive Web DevelopmentIntroduction to Responsive Web Development
Introduction to Responsive Web Development
 
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
 
Web development and web design with seo
Web development and web design with seoWeb development and web design with seo
Web development and web design with seo
 
Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3Pemrograman Web 4 - Bootstrap 3
Pemrograman Web 4 - Bootstrap 3
 
Bootstrap Presentation Mitesh
Bootstrap Presentation MiteshBootstrap Presentation Mitesh
Bootstrap Presentation Mitesh
 
Boot strap
Boot strapBoot strap
Boot strap
 
Bootstrap
Bootstrap Bootstrap
Bootstrap
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
 
Bootstrap with liferay
Bootstrap with liferayBootstrap with liferay
Bootstrap with liferay
 

Dernier

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 

Dernier (20)

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 

Bootstrap - Basics

  • 2. Contents o INTRODUCTION o HISTORY o WHY BOOTSTRAP ? o IT INCLUDES ! o HOW TO USE IT ? o CONTAINERS o GRID o WORKING WITH BOOTSTRAP ! o BOOTSTRAP 5 IS COMING ! o CONCLUSION o REFERENCE
  • 3. INTRODUCTION  Bootstrap is a free, open-source, and one of the most popular front-end framework.  Developed by twitter for creating responsive web applications.  It is a collection of CSS and JavaScript.  Bootstrap is the 6th most starred project on Github, with more than 135,000 stars.
  • 4. HISTORY  Developed by Mark Otto and Jacob Thornton at twitter.  It was renamed from Twitter Blueprint to Bootstrap.  Released as an open-source product on August 19, 2011 in Github.  It consist of 3 major versions, Bootstrap 2, 3 & 4.
  • 5. HISTORY  Bootstrap v2.0  Released on January 31, 2012.  Built-in support for Glyphicons.  Supports responsive web designing.  Bootstrap v3.0  Released on August 19, 2013.  Redesigned components to use flat design and a mobile first approach.
  • 6. HISTORY  Bootstrap v4.0  The first alpha version of Bootstrap 4 was released on August 19, 2015.  The first beta version was released on August 10, 2017.  Mark Otto suspended work on Bootstrap 3 to free-up time to work on Bootstrap 4.  V4.0 was finalized January 18, 2018.
  • 7. WHY BOOTSTRAP ?  Mobile first approach.  Browser support. Etc.
  • 8. WHY BOOTSTRAP ?  Easy to get started.  Responsive design.
  • 9. IT INCLUDES !  It includes 3 files,  bootstrap.min.css  jquery.min.js  Bootstrap.min.js
  • 10. How to use it ?  We can include it either by using CDN or downloaded files.  Syntax for using CDN (Content Distribution Network)  Syntax for using downloaded files <script type = “text/javascript” src = “jquery.min.js”></script> <script type = “text/javascript” src = “bootstrap.min.js”></script> <link rel = “stylesheet” type = “text/css” href = “bootstrap.min.css”>
  • 11. Containers  It has a concept of containing elements to wrap site contents.  There are two types of containers  .container Class used for a responsive fixed width.  .container-fluid Class used for a full-width container.
  • 12. Containers  Syntax for using .container <div class = “container”> … </div>  Syntax for using .container-fluid <div class = “container-fluid”> … </div>
  • 13. Grid  It is a structure (Usually 2D) made up of series of intersecting straight (Vertical/Horizontal) lines.  It is used to structure the contents.  It is a very effective method to create a consistent layout rapidly & effectively using Html & CSS.  Makes the website easy to scan & reduces the load on users.
  • 15. Grid Example  It allows up to 12 columns across the page.  We can divide the containers in rows and each row in columns with space multiple of 12.
  • 16. Grid Working  We can use any combination that the sum be equal to 12.  Responsive Bootstraps' grid system with 3 columns
  • 20. Bootstrap Tables  There are 4 main classes for tables  table  table-striped  table-bordered  table-hover table Basic table style with just some light padding and horizontal dividers. <table class = “table”> … </table>
  • 21. Bootstrap Tables table-striped Used to get zebra-striping to any rows with in the <tbody> <table class = “table table-striped”> … </table> table-bordered Used to get borders surrounding every element and rounded corners around the entire table. <table class = “table table-bordered”> … </table>
  • 22. Bootstrap Tables table-hover Used to get a light grey background to rows while the mouse cursor come over it. <table class = “table table-hover”> … </table> table-condensed Used to make tables more compact by cutting cell padding in half. <table class = “table table-condensed”> … </table>
  • 23. Table – Contextual Classes  It is used to color table rows / individual cells.  There are 5 contextual-classes  active  success  info  warning  danger
  • 24. Table - Responsive  By wrapping any <table> in table-responsive class we can make a responsive table. <div class = “table-responsive”> <table class = “table”> …. </table> </div>
  • 25. Bootstrap Images  It consist of 3 main classes  img-rounded  img-circle  img-thumbnail
  • 27. Image - Responsive  We can also make responsive images by using img-fluid class. <img src = “…” class = “img-fluid” alt = “Responsive_Image” />
  • 28. Carousel  It is a slideshow for cycling through elements.  We can use the carousel slide class to create slideshow.  Syntax is, <div id="demo" class="carousel slide" data-ride="carousel">
  • 31. Bootstrap alerts  It provides an easy way to create predefined alert messages.  They are created with the alert class followed by the one of the 4 contextual classes. alert-success alert-info alert-warning alert-danger
  • 34. Bootstrap Buttons  Bootstrap provides 7 styles of buttons. We can use the btn class to obtain it. btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
  • 36. Spinners  It is used to create a spinner/loader.  We can use the spinner-border class to create it.  Syntax is, <div class="spinner-border"></div>  By using contextual class we can change the color of the spinner accordingly.
  • 38. Bootstrap - Glyphicons  Bootstrap provides 260 glyphicons from Glyphicon Halflings set.
  • 41. Bootstrap - Labels  Used to provide information about something.  We can create labels with colorful backgrounds to highlight the text.  Use the label class followed by one of the six contextual classes. label-default label-primary label-success label-info label-warning label-danger
  • 43. Bootstrap - Panels  It is a bordered box with some padding around it’s content that can be used to highlight or separated from information.  Like other classes it is also used with contextual classes. panel-default panel-primary panel-success panel-info panel-warning panel-danger
  • 45. Bootstrap - Forms  Form controls automatically receive some global styling with Bootstrap.  All elements with class form-control have a width of 100%.  It provides following types of layout,  Vertical form (default)  Horizontal form  Inline form
  • 46. Vertical Forms  It is the default form layout.  Wrap labels and controls in a <div> with a class form-group, which is used for optimum spacing.  Add the class form-control to all the elements
  • 48. Horizontal Forms  Add the class form-horizontal in the <form> tag.  Add the class control-label to all labels in form.
  • 49. Inline Forms  It is used align all the elements of form in a line and left aligned.  Add the class form-inline in <form> tag.  This only applies to form within viewports that are at least 768px wide.
  • 50. Bootstrap - Themes & Templates  We can find and download several themes & templates.  A theme consist of customized CSS.  A template consist of one or more predesigned Html pages, which often make use of theme.  Both are collection of bootstrap elements (Grid, buttons, panels, etc.).
  • 51. Bootstrap 5 is coming ! ► Dropped jQuery ► Responsive containers ► Using as module ► Refreshed website
  • 52. Conclusion  Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.  It makes the responsive web designing more easy and effective.  It contains CSS, jQuery / Javascript that makes the designing more easier.
  • 53. Reference  Otto Mark (November 28, 2019) – “Bootstrap 4.4.1” https://github.com/twbs/bootstrap  Jake Spurlock (May, 2013) – “Bootstrap”  W3Schools (2018) – “Bootstrap 4 - Tutorials” https://www.w3schools.com/bootstrap4/
  • 54. Do you have any doubts ?