SlideShare a Scribd company logo
1 of 21
Download to read offline
INTRODUCTION TO BOOTSTRAP
A Responsive CSS Framework
Rand Graham
rmcore.com
1. Introduction To Bootstrap Presentation
2. Cat Clicker App
Presentation Overview
rmcore.com
A Modern Web Page
rmcore.com
View The Source (if you dare)
That’s a
lot of divs.
rmcore.com
When you want to RTFM,
first find the manual.
See also: CSS Tricks
Help For The CSS Newbie
rmcore.com
Have You Heard The One About
rmcore.com
You can roll your own grid system.
Grid System Example
rmcore.com
A Responsive Page
/* Document level adjustments */
body {
font-size: 17px; }
@media (max-width: 900px) {
body {
font-size: 15px; }}
@media (max-width: 768px) {
body{
font-size: 13px; }}
The CSS Media Query
Example
media_type:
all, print, screen, tv
media_feature:
width, min-width, max-width
height, min-height, max-height
Types and
Features
rmcore.com
Bootstrap Advantages
Speeds development
Cross browser
Popularity
Tool Support
PineGrow
Bootstrap Playground
Theme Markets
Heavy pages
Bootstrap Disadvantage - Weight
rmcore.com
Silicon Valley Hierarchy of Needs
rmcore.com
Full bootstrap.min.
css
148KB
Customized
bootstrap.min.css
64KB
Bootstrap Customize
rmcore.com
“I’ve seen this website before.”
Bootstrap Disadvantage - Same samey sameness
rmcore.com
Common Classes by Example
navbar-fixed-top navbar-inverse search-bar
nav-bar-right
glyphicon-search
col-sm-3 left col-sm-9
list-group
list-group-item
rmcore.com
Visuals
The application should display
● a list of at least 5 cats, listed by name
● an area to display the selected cat
● text showing the number of clicks
In the cat display area, the following should be displayed
● the cat's name
● a picture of the cat
Interaction
● When a cat name is clicked in the list, the cat display area should update to show the data for
the selected cat.
● The number of clicks in the cat area should be unique to each cat, and should increment when the
cat's picture is clicked.
Requirements for Cat Clicker
rmcore.com
Mockup - Full
rmcore.com
Mockup - Mobile
rmcore.com
Let’s See Some Code
rmcore.com
Connect with me on twitter:
@rdg_rmcore
Read more at my website:
http://rmcore.com/
Keep in Touch
rmcore.com
Boots by dvids.
Kitten by poplinre.
"MaslowsHierarchyOfNeeds" by FireflySixtySeven
Credits
rmcore.com

More Related Content

What's hot

Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap1amitgupta
 
Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2Julien Renaux
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by MukeshMukesh Kumar
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative
 
A beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrapA beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrapSunanda Bansal
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1EPAM Systems
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAPJeanie Arnoco
 
Bootstrap 3 + responsive
Bootstrap 3 + responsiveBootstrap 3 + responsive
Bootstrap 3 + responsivehatchpb
 
What is New in Bootstrap 5?
What is New in Bootstrap 5? What is New in Bootstrap 5?
What is New in Bootstrap 5? Study Section
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - BasicsFirosK2
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats newSandun Perera
 

What's hot (20)

Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2Introduction to Twitter's Bootstrap 2
Introduction to Twitter's Bootstrap 2
 
Bootstrap 3.1.1
Bootstrap 3.1.1Bootstrap 3.1.1
Bootstrap 3.1.1
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
A beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrapA beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrap
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1
 
Bootstrap 4 n00bz
Bootstrap 4 n00bzBootstrap 4 n00bz
Bootstrap 4 n00bz
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
Bootstrap 3 + responsive
Bootstrap 3 + responsiveBootstrap 3 + responsive
Bootstrap 3 + responsive
 
What is New in Bootstrap 5?
What is New in Bootstrap 5? What is New in Bootstrap 5?
What is New in Bootstrap 5?
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
 
Bootstrap 4 Alpha 3
Bootstrap 4 Alpha 3Bootstrap 4 Alpha 3
Bootstrap 4 Alpha 3
 

Similar to Introduction To Bootstrap

Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignShawn Calvert
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-frameworkDamien Oh
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Christian Rokitta
 
Bootstrap & Mobile-Web
Bootstrap & Mobile-WebBootstrap & Mobile-Web
Bootstrap & Mobile-Web景智 張
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Frédéric Harper
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Christian Rokitta
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pagesNilesh Bafna
 
Word press intro 4x3 draft 12
Word press intro 4x3 draft 12Word press intro 4x3 draft 12
Word press intro 4x3 draft 12msz
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesiabrucelawson
 
Word press bg 16x9 draft 16
Word press bg 16x9 draft 16Word press bg 16x9 draft 16
Word press bg 16x9 draft 16msz
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & TypographyDanny Calders
 
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designSCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designFrédéric Harper
 

Similar to Introduction To Bootstrap (20)

Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Wp responsive-theme-framework
Wp responsive-theme-frameworkWp responsive-theme-framework
Wp responsive-theme-framework
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
 
Guide Hosting Dictionary
Guide Hosting DictionaryGuide Hosting Dictionary
Guide Hosting Dictionary
 
Bootstrap & Mobile-Web
Bootstrap & Mobile-WebBootstrap & Mobile-Web
Bootstrap & Mobile-Web
 
Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13Responsive Web Design - Devoxx UK - 2014-06-13
Responsive Web Design - Devoxx UK - 2014-06-13
 
Approaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & DevelopmentApproaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & Development
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Design
DesignDesign
Design
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
Word press intro 4x3 draft 12
Word press intro 4x3 draft 12Word press intro 4x3 draft 12
Word press intro 4x3 draft 12
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Word press bg 16x9 draft 16
Word press bg 16x9 draft 16Word press bg 16x9 draft 16
Word press bg 16x9 draft 16
 
Bootstrap
Bootstrap Bootstrap
Bootstrap
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
 
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designSCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
 

Recently uploaded

MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based projectAnoyGreter
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfFerryKemperman
 
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...Akihiro Suda
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsSafe Software
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesŁukasz Chruściel
 
Cyber security and its impact on E commerce
Cyber security and its impact on E commerceCyber security and its impact on E commerce
Cyber security and its impact on E commercemanigoyal112
 
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdf
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdfInnovate and Collaborate- Harnessing the Power of Open Source Software.pdf
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdfYashikaSharma391629
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesPhilip Schwarz
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceBrainSell Technologies
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxAndreas Kunz
 
Machine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringMachine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringHironori Washizaki
 
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Velvetech LLC
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecturerahul_net
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureDinusha Kumarasiri
 
Xen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdfXen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdfStefano Stabellini
 
Post Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on IdentityPost Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on Identityteam-WIBU
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaHanief Utama
 

Recently uploaded (20)

MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based project
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdf
 
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data Streams
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New Features
 
Cyber security and its impact on E commerce
Cyber security and its impact on E commerceCyber security and its impact on E commerce
Cyber security and its impact on E commerce
 
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdf
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdfInnovate and Collaborate- Harnessing the Power of Open Source Software.pdf
Innovate and Collaborate- Harnessing the Power of Open Source Software.pdf
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. Salesforce
 
2.pdf Ejercicios de programación competitiva
2.pdf Ejercicios de programación competitiva2.pdf Ejercicios de programación competitiva
2.pdf Ejercicios de programación competitiva
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
 
Machine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringMachine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their Engineering
 
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort ServiceHot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
 
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...
 
Understanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM ArchitectureUnderstanding Flamingo - DeepMind's VLM Architecture
Understanding Flamingo - DeepMind's VLM Architecture
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
 
Xen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdfXen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdf
 
Advantages of Odoo ERP 17 for Your Business
Advantages of Odoo ERP 17 for Your BusinessAdvantages of Odoo ERP 17 for Your Business
Advantages of Odoo ERP 17 for Your Business
 
Post Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on IdentityPost Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on Identity
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
 

Introduction To Bootstrap