JUMP START BOOTSTRAP

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Want to Take Your Learning Further? . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Chapter 1 Up, Close, and Personal with
Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
What is Bootstrap? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Why Does It Exist? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
How Can It Help Me? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
History of CSS Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The Need for CSS Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
The Origins of Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Bootstrap’s Competition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Who Uses Bootstrap? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Overview of Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Adjusting a Layout Based on Screen Size . . . . . . . . . . . . . . . . . . . . . . 7
Getting Bootstrap Ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Chapter 2 Bootstrap Grid System . . . . . . . . . . . . . . . . . 17
What Is a Grid System? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Building a Basic Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Case Study: Creating a Dynamic Layout . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Designing for Desktops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Designing for Tablets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Designing for Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Nesting Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Offsetting Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Reordering Grids Manually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Chapter 3 Exploring Bootstrap
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Page Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Page Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Panels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Media Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
List Group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Navigation Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Navs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Navbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Breadcrumb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Standing Out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Label . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Glyphicons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Wells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Badges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Fun with Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Basic Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Horizontal Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Inline Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84