5. 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
6. 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
7. • Github: Most Forked / Starred
• Joomla 3.0 uses Bootstrap
• Toyota
• NASA
• MSNBC
Bootstrap is popular!
8. Why Bootstrap?
• Ease of use
• Flexibility
• Save time
• SCSS and LESS
• Consistency
• Responsiveness
• Future is here!
34. 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)
52. Emphasis
Let’s make these words <strong>bold!</strong>
Let’s make these words bold!
How about <em>italic?</em>
How about italic?
53. 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