SlideShare a Scribd company logo
1 of 14
 Bootstrap Is A Free Front-end Framework
For Faster And Easier Web Development
 Bootstrap Includes HTML And CSS Based
Design Templates For Typography,
Forms, Buttons, Tables, Navigation,
Modals, Image Carousels And Many
Other, As Well As Optional JavaScript
Plugins
 Bootstrap Also Gives You The Ability To
Easily Create *RESPONSIVE DESIGN*
Responsive web design is about
creating web sites which
automatically adjust themselves to
look good on all devices, from
small phones to large desktops.
Label Layout Width
Smartphones 480px and below
Portrait Tables 480px to 768px
Landscape Tablets 768px to 940px
Default 940px and up
Large Screens 1210px and up
Common Breakpoint
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter,
and released as an open source product in August 2011
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, Firefox, Internet
Explorer, Safari, and Opera)
 Bootstrap's grid system allows up to 12 columns across the page.
 If you do not want to use all 12 column individually, you can group the
columns together to create wider columns:
 Bootstrap's grid system is responsive, and the columns will re-arrange
depending on the screen size: On a big screen it might look better with the
content organized in three columns, but on a small screen it would be better if
the content items were stacked on top of each other.
Tip: Remember that grid columns should add up to twelve for a row. More
than that, columns will stack no matter the viewport.
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.
Tip:
Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify
xs.
Some Bootstrap grid system rules:
1) Row must be placed within a .container(fixed _width) or
.container_fluid (full-width) for proper alignment and padding.
2) Use row to create a horizontal group s of columns.
3) Content should be placed within the column, and only columns
may be immediate children of rows.
4) Predefined classes like .row and .col-sm-4 are available for quickly
making grid layouts.
5) 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.
6) 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>
So, to create the layout you want, create a container (<div class="container">). Next, create a row (<div
class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that
numbers in .col-*-* should always add up to 12 for each row.
Components of bootstrap
Buttons:
Tabs:
Pagination:
Progress bars:
Advantages Disadvantages
User Experience User Experience/Load Time
Analytics No linking
Sharing/Linking SEO
SEO Development
Development Design
Maintenance
Advantages and Disadvantages
Bootstrap

More Related Content

Similar to Bootstrap

Bootstrap how it can help you build better websites
Bootstrap   how it can help you build better websitesBootstrap   how it can help you build better websites
Bootstrap how it can help you build better websitesAidan Technologies Sdn Bhd
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3Lanh Le
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrapZunair Sagitarioux
 
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
 
Bootstrap seminar presentation
Bootstrap seminar presentationBootstrap seminar presentation
Bootstrap seminar presentationPratikDoiphode1
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - newWebtech Learning
 
7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentationJohnLagman3
 
Browser sizes - November 2000
Browser sizes - November 2000Browser sizes - November 2000
Browser sizes - November 2000William Cookson
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1EPAM Systems
 
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
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap1amitgupta
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyAnalyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyIJECEIAES
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptRadheshyam Kori
 

Similar to Bootstrap (20)

Bootstrap how it can help you build better websites
Bootstrap   how it can help you build better websitesBootstrap   how it can help you build better websites
Bootstrap how it can help you build better websites
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Bootstrap day1
Bootstrap day1Bootstrap day1
Bootstrap day1
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
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 seminar presentation
Bootstrap seminar presentationBootstrap seminar presentation
Bootstrap seminar presentation
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - new
 
7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation7.-Bootstrap-5-report powerpoint presentation
7.-Bootstrap-5-report powerpoint presentation
 
Volunteer.rb
Volunteer.rbVolunteer.rb
Volunteer.rb
 
Browser sizes - November 2000
Browser sizes - November 2000Browser sizes - November 2000
Browser sizes - November 2000
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
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
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyAnalyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative study
 
Twitter bootstrap training_session_ppt
Twitter bootstrap training_session_pptTwitter bootstrap training_session_ppt
Twitter bootstrap training_session_ppt
 

Recently uploaded

UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...ScyllaDB
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch TuesdayIvanti
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxMasterG
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfAnubhavMangla3
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)Samir Dash
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimaginedpanagenda
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...FIDO Alliance
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdfMuhammad Subhan
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهMohamed Sweelam
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)Wonjun Hwang
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 

Recently uploaded (20)

UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptxCyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
Cyber Insurance - RalphGilot - Embry-Riddle Aeronautical University.pptx
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 

Bootstrap

  • 1.
  • 2.
  • 3.  Bootstrap Is A Free Front-end Framework For Faster And Easier Web Development  Bootstrap Includes HTML And CSS Based Design Templates For Typography, Forms, Buttons, Tables, Navigation, Modals, Image Carousels And Many Other, As Well As Optional JavaScript Plugins  Bootstrap Also Gives You The Ability To Easily Create *RESPONSIVE DESIGN*
  • 4. Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
  • 5. Label Layout Width Smartphones 480px and below Portrait Tables 480px to 768px Landscape Tablets 768px to 940px Default 940px and up Large Screens 1210px and up Common Breakpoint
  • 6. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011
  • 7. 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, Firefox, Internet Explorer, Safari, and Opera)
  • 8.  Bootstrap's grid system allows up to 12 columns across the page.  If you do not want to use all 12 column individually, you can group the columns together to create wider columns:  Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other. Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.
  • 9. 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. Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
  • 10. Some Bootstrap grid system rules: 1) Row must be placed within a .container(fixed _width) or .container_fluid (full-width) for proper alignment and padding. 2) Use row to create a horizontal group s of columns. 3) Content should be placed within the column, and only columns may be immediate children of rows. 4) Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts. 5) 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. 6) 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
  • 11. 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> So, to create the layout you want, create a container (<div class="container">). Next, create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
  • 13. Advantages Disadvantages User Experience User Experience/Load Time Analytics No linking Sharing/Linking SEO SEO Development Development Design Maintenance Advantages and Disadvantages