SlideShare a Scribd company logo
1 of 55
Download to read offline
Bootstrap Workout
Rob Davarnia

@robdvr - robdvr@gmail.com - robdvr.com
About me
Senior Full Stack Developer at GigaSavvy
Passionate about Ruby on Rails, Node.js, and Angular
What’s Bootstrap?
mobile first front-end framework 

for faster and easier web development
Front-end Development
what users see (user interface)

HTML / CSS / JavaScript
What’s a Framework?
structure that includes libraries of code



1. Code and File Organization

2. Libraries & Extensions

3. Faster Development

4. Community

5. Updates

How it all started…
• Developed by Mark Otto @mdo and Jacob
Thornton @fat at Twitter
• Bootstrap was released in August 2011 by
Twitter
• They wanted to develop a front-end framework
with consistency across the board
• Github: Most Forked / Starred
• Joomla 3.0 uses Bootstrap
• Toyota
• NASA
• MSNBC
Bootstrap is popular!
Why Bootstrap?
• Ease of use
• Flexibility
• Save time
• SCSS and LESS
• Consistency
• Responsiveness
• Future is here!
HTML5 Boilerplate
<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

<!-- page content here --> 

</body>

</html>
HTML Elements
• Headings (h1-h6)
• Paragraph
• Block
• Inline element
• Images
<h1> … </h1>
<p> … </p>
<div> … </div>
<span> … </span>
<img src=“…” />
Using CSS
• Inline CSS

• Style Tag 





• External Stylesheet
<div style=“color:#ff0000”>red text</div>
<div class=“red”>red text</div>

<style>

.red { color: #ff0000;}

</style>
<link rel=“stylesheet” href=“style.css” />
Tools I use
Chrome Firefox Dev Tools Sublime Text
Setup Dev. Tools
(or Firebug)
Hands on
Getting Started

(getbootstrap.com)
Hands on
Tools I use
Chrome Firefox Dev Tools Sublime Text
What’s Less?
Less is a CSS Pre-Processor.
What’s a Pre-Processor?
Sass File Sass Compiler CSS File
Why Less?
CSS is simple, but simple is not necessarily scalable. 

Less teaches CSS new tricks.
Variables, Functions, and more…
Pre-Processor Example
p {
color: #333;
a {
color: #555;
}
}
p {
color: #333;
}
p a {
color: #555;
}
What’s Grunt?
A JavaScript-based task runner to perform repetitive tasks.
Grunt + Less help us compile Less.
How does Grunt work?
Grunt performs tasks you create like compiling Less
or live refreshing browser
Grunt Settings
Gruntfile.js includes all the settings for grunt
CSS Brush up
// dot - classes - okay to repeat
.wrapper
// hashtag - ids (unique)
#wrapper
CSS Brush up 2
// Color
color: #000;
// Size
font-size: 20px;
// Text Alignment
text-align: center;
// Text Bold
font-weight: bold;
// Text Italic
font-style: italic;
// Text Underline
text-decoration: underline;
// Spacing - top right bottom left
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
// Border
border: 1px solid #000;
Layouts with Bootstrap
What’s Responsive Design?
A website that adapts to browser
using fluid grids, flexible
images, and media queries.

RWD: Grids
Uses proportion-based sizing instead of fixed width
using pixels/points
RWD: Flexible Images
Displaying an image proportional to the grid or
container
RWD: Media Queries
CSS3 Standard to determine the screen size and
adjust elements’ style
@media screen and (min-width:500px) { ... }
RWD: Screen Sizes
Extra Small

Small

Medium

Large
Grid Systems
Fixed Grids
Fluid Grids
Bootstrap Grids
Extra Small Small Medium Large
<768px
Tablets

≥768px
Desktops

≥992px
Desktops

≥1200px
Grid Horizontal Collapsed > Horiztonal
Max width none 750px 970px 1170px
Class .col-xs-* .col-sm-* .col-md-* .col-lg-*
Gutter 30px (15px on each side of a column)
Grid Example
HTML Code:
<div class=“container”>

<div class=“row”>



<div class=“col-md-6”>

Column 1

</div>



<div class=“col-md-6”>

Column 2

</div>



</div>

</div>
Grid Demo
Hands on
Grid Offsets
HTML Code:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4”>

.col-md-4 .col-md-offset-4

</div>
</div>
Grid Nesting




<div class="row">

<div class="col-md-9">

Level 1: .col-md-9
<div class="row">

<div class="col-md-6">

Level 2: .col-md-6

</div>

<div class="col-md-6">

Level 2: .col-md-6

</div>

</div>

</div>

</div>
Visibility
Extra Small Small Medium Large
.visible-xs Visible Hidden Hidden Hidden
.visible-sm Hidden Visible Hidden Hidden
.visible-md Hidden Hidden Visible Hidden
.visible-lg Hidden Hidden Hidden Visible
.hidden-xs Hidden Visible Visible Visible
.hidden-sm Visible Hidden Visible Visible
.hidden-md Visible Visible Hidden Visible
.hidden.lg Visible Visible Visible Hidden
Visibility Demo
Hands on
Floats
.pull-left
Left Float
.pull-right
Right Float
Clear Float .clearfix
Images
<img src=“mountain.png”>
Responsive Image
<img src=“mountain.png” class=“img-responsive”>
Other Image Classes
class=“img-rounded" class=“img-circle" class=“img-thumbnail"
Buttons
Buttons Types

Button Sizes

Inactive Buttons

Responsive Buttons

Button Tags

Button Icons
Hands on
Button Types
<button type="button" class="btn btn-default">Default</button>



<button type="button" class="btn btn-primary">Primary</button>



<button type="button" class="btn btn-success">Success</button>



<button type="button" class="btn btn-info">Info</button>



<button type="button" class="btn btn-warning">Warning</button>



<button type="button" class="btn btn-danger">Danger</button>



<button type="button" class="btn btn-link">Link</button>
Buttons Sizes
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">XS button</button>
Typography
Headings

Lead

Bold / Italics

Alignments

…
Hands on
Headings
<h1> . . . </h1>

<h2> . . . </h2>

<h3> . . . </h3>

<h4> . . . </h4>

<h5> . . . </h5>

<h6> . . . </h6>
Headings with Desc.
<h1> ... <small>secondary text</small></h1>

<h2> ... <small>secondary text</small></h2>

<h3> ... <small>secondary text</small></h3>

<h4> ... <small>secondary text</small></h4>

<h5> ... <small>secondary text</small></h5>

<h6> ... <small>secondary text</small></h6>
Paragraph + Lead
<p>...</p>
Normal Paragraph
<p class="lead">...</p>
Lead Paragraph
Hands on
Emphasis
Let’s make these words <strong>bold!</strong>
Let’s make these words bold!
How about <em>italic?</em>
How about italic?
Alignments
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
Left Aligned
Hands on
Center Aligned
Right Aligned
This text is justified, so it goes across the page. Justified class is cool
Bootstrap Workout 2015
Questions / Comments / Suggestions

More Related Content

What's hot

Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersMelvin John
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...Jer Clarke
 
[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1Jae Woo Woo
 
Front End Web Development Basics
Front End Web Development BasicsFront End Web Development Basics
Front End Web Development BasicsTahir Shahzad
 
OOCSS Lightening Talk
OOCSS Lightening TalkOOCSS Lightening Talk
OOCSS Lightening TalkJulie Cameron
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyJoe Seifi
 
Introducing MongoPress
Introducing MongoPressIntroducing MongoPress
Introducing MongoPressMark Smalley
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS WorkshopJulie Cameron
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - newWebtech Learning
 
The way to be a developer "What I Need"
The way to be a developer "What I Need"The way to be a developer "What I Need"
The way to be a developer "What I Need"egyappassiut
 
Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3John Bertucci
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Make your website 2 times faster
Make your website 2 times fasterMake your website 2 times faster
Make your website 2 times fasterSatoshi Kikuchi
 

What's hot (20)

Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
 
Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1
 
Front End Web Development Basics
Front End Web Development BasicsFront End Web Development Basics
Front End Web Development Basics
 
OOCSS Lightening Talk
OOCSS Lightening TalkOOCSS Lightening Talk
OOCSS Lightening Talk
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The Ugly
 
Introducing MongoPress
Introducing MongoPressIntroducing MongoPress
Introducing MongoPress
 
LESS
LESSLESS
LESS
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS Workshop
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - new
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
The way to be a developer "What I Need"
The way to be a developer "What I Need"The way to be a developer "What I Need"
The way to be a developer "What I Need"
 
Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Make your website 2 times faster
Make your website 2 times fasterMake your website 2 times faster
Make your website 2 times faster
 

Viewers also liked

Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
 
Task Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.jsTask Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.js3rfan
 
Sassy! Stylesheets with SCSS by Kathryn Rotondo
Sassy! Stylesheets with SCSS by Kathryn RotondoSassy! Stylesheets with SCSS by Kathryn Rotondo
Sassy! Stylesheets with SCSS by Kathryn RotondoCodemotion
 
Improve PowerShell reporting using SharePoint lists for results
Improve PowerShell reporting using SharePoint lists for resultsImprove PowerShell reporting using SharePoint lists for results
Improve PowerShell reporting using SharePoint lists for resultsFrank Daske
 
Sassy Stylesheets with SCSS
Sassy Stylesheets with SCSSSassy Stylesheets with SCSS
Sassy Stylesheets with SCSSKathryn Rotondo
 
Exam 70 480 CSS3 at Jinal Desai .NET
Exam 70 480 CSS3 at Jinal Desai .NETExam 70 480 CSS3 at Jinal Desai .NET
Exam 70 480 CSS3 at Jinal Desai .NETjinaldesailive
 
Auto Tagger for SharePoint - Rule-based Content Classification
Auto Tagger for SharePoint - Rule-based Content ClassificationAuto Tagger for SharePoint - Rule-based Content Classification
Auto Tagger for SharePoint - Rule-based Content ClassificationFrank Daske
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrapfreshlybakedpixels
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Gruntbenko
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & CompassRob Davarnia
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersSuzette Franck
 
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas TexasImproving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas TexasPreston McCauley
 
Introducing grunt, npm and sass
Introducing grunt, npm and sassIntroducing grunt, npm and sass
Introducing grunt, npm and sasspriyanka1452
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASSJon Dean
 
Grunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerGrunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerMohammed Arif
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Eric Sembrat
 
Professional Front End Development
Professional Front End DevelopmentProfessional Front End Development
Professional Front End Developmentnelsonmenezes
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017NiceToMeetYou
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsStacy Kvernmo
 

Viewers also liked (20)

Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
Task Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.jsTask Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.js
 
Sassy! Stylesheets with SCSS by Kathryn Rotondo
Sassy! Stylesheets with SCSS by Kathryn RotondoSassy! Stylesheets with SCSS by Kathryn Rotondo
Sassy! Stylesheets with SCSS by Kathryn Rotondo
 
Improve PowerShell reporting using SharePoint lists for results
Improve PowerShell reporting using SharePoint lists for resultsImprove PowerShell reporting using SharePoint lists for results
Improve PowerShell reporting using SharePoint lists for results
 
Sassy Stylesheets with SCSS
Sassy Stylesheets with SCSSSassy Stylesheets with SCSS
Sassy Stylesheets with SCSS
 
Exam 70 480 CSS3 at Jinal Desai .NET
Exam 70 480 CSS3 at Jinal Desai .NETExam 70 480 CSS3 at Jinal Desai .NET
Exam 70 480 CSS3 at Jinal Desai .NET
 
Auto Tagger for SharePoint - Rule-based Content Classification
Auto Tagger for SharePoint - Rule-based Content ClassificationAuto Tagger for SharePoint - Rule-based Content Classification
Auto Tagger for SharePoint - Rule-based Content Classification
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Grunt
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas TexasImproving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
 
Introducing grunt, npm and sass
Introducing grunt, npm and sassIntroducing grunt, npm and sass
Introducing grunt, npm and sass
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASS
 
Grunt - The JavaScript Task Runner
Grunt - The JavaScript Task RunnerGrunt - The JavaScript Task Runner
Grunt - The JavaScript Task Runner
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
 
Professional Front End Development
Professional Front End DevelopmentProfessional Front End Development
Professional Front End Development
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
The Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and FriendsThe Great State of Design with CSS Grid Layout and Friends
The Great State of Design with CSS Grid Layout and Friends
 

Similar to Bootstrap Workout 2015

Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?glen_a_smith
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...Roni Banerjee
 
Front End Workflow
Front End WorkflowFront End Workflow
Front End WorkflowMatt Bailey
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
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
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by MukeshMukesh Kumar
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Responsive content
Responsive contentResponsive content
Responsive contenthonzie
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't CodeChristopher Schmitt
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4imdurgesh
 

Similar to Bootstrap Workout 2015 (20)

Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
 
Front End Workflow
Front End WorkflowFront End Workflow
Front End Workflow
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
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 PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Responsive content
Responsive contentResponsive content
Responsive content
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
 
Webpack
Webpack Webpack
Webpack
 

Recently uploaded

ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9Jürgen Gutsch
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxPrakarsh -
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Neo4j
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 

Recently uploaded (20)

ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9About .NET 8 and a first glimpse into .NET9
About .NET 8 and a first glimpse into .NET9
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptx
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 

Bootstrap Workout 2015