Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Bootstrap CodeLab
Search
Dhatri Misra
October 18, 2014
Programming
0
190
Bootstrap CodeLab
The sample code :
https://github.com/DhatriM/Bootstrap-Codelab-GDGIndore
Dhatri Misra
October 18, 2014
Tweet
Share
More Decks by Dhatri Misra
See All by Dhatri Misra
Fight the uncertainty
dhatrim
1
50
Experiencing User Experience!
dhatrim
2
110
Getting Ideas!?
dhatrim
0
73
Android : Idea to App!
dhatrim
1
73
Android : Getting Started
dhatrim
0
130
Promoting Women!
dhatrim
0
66
Bringing Diversity in Events!
dhatrim
0
70
Other Decks in Programming
See All in Programming
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
PicoRuby on Rails
makicamel
2
130
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
190
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Producing Creativity
orderedlist
PRO
346
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Site-Speed That Sticks
csswizardry
10
690
Agile that works and the tools we love
rasmusluckow
329
21k
Scaling GitHub
holman
460
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Transcript
Webstrap! Twitter Bootstrap | Code Lab + Hackathon 1/19
All set? Let’s Bootstrap!
What we are going to do? # Structure of a
website # What are Frameworks? # Why use Frameworks? # What all Frameworks? # Why Twitter Bootstrap? # Bootstrap structure # Hands-On # Resources 2/19
Website Structure Front-End Back-End 3/19
Front-End HTML - div, class, id, table, meta, CSS -
adding it to the html, .class, #id Javascript - bootstrap.js, jQuery. 4/19
What is a Framework? # Provides generic functionality for software
components # User can modify these according to their requirements A Re-Usable Software Environment! 5/19
Why use Framework? # Browser Compatibilty # Responsive Webdesign #
Grid System # Customizable components # Easy to learn # Open Source, hence a large community to provide resources 6/19
What all frameworks exist? 7/19
We’d be using 8/19
Pointers! # Responsive <img src="..." class="img-responsive" alt=" Responsive image"> #
Mobile First <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> # Normalize.css 9/19
Bootstrap Structure bootstrap/ ├── css/ │ ├── bootstrap.css │ ├──
bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff 10/19
Let’s make this! #1 - Basic Template #2 - Add
custom.css #3 - Add Navbar #4 - Add Blockquote 11/19
Grid System Extra small devicesPhones (<768px) :col-xs- Small devices Tablets
(≥768px) : col-sm- Medium devicesDesktops (≥992px) : col-md- Large devices Desktops (≥1200px) : col-lg- # Always comes in the “row” class # Container and Container-fluid # Number of Columns : 12 12/19
Using col-*- 13/19
Basic HTML #5 - Implement Grid //work.html #6 - Add
button //work.html #7 - Create Form //contact.html #8 - Create Table //about.html 14/19
Javascript #9 - Add Jumbotron //home.html #10 - Add Carousel
//home.html #11 - Add Tooltip //work.html #12 - Add Popover //about.html 15/19
More Javascript #13 - Add Modal //about.html #14 - Add
Dropdown //contact.html 16/19
Resources and Inspiration # Lovebootstrap # Startbootstrap # Bootstraphero #
Bootsnipp # Bootstrapzero 17/19
Treasure! oozled.com 18/19
Thank You! Connect with me on: @DhatriMisra 19/19