twigg-app 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (208) hide show
  1. checksums.yaml +4 -4
  2. data/assets/javascripts/_bootstrap.js +7 -0
  3. data/assets/javascripts/_jquery.js +19 -0
  4. data/assets/javascripts/_tables.js +3 -0
  5. data/assets/javascripts/_views.js +10 -0
  6. data/assets/javascripts/application.js +9 -0
  7. data/{public/application.js → assets/javascripts/views/_commit_set_bar_chart.js} +32 -34
  8. data/assets/javascripts/views/_russia.js +61 -0
  9. data/assets/javascripts/views/_tags.js +56 -0
  10. data/assets/javascripts/views/_tags_word_cloud.js +51 -0
  11. data/assets/stylesheets/_bootstrap_overrides.scss +15 -0
  12. data/assets/stylesheets/_footer.scss +28 -0
  13. data/assets/stylesheets/_global.scss +14 -0
  14. data/assets/stylesheets/_tables.scss +20 -0
  15. data/assets/stylesheets/application.scss +10 -0
  16. data/assets/stylesheets/d3/_bar_chart.scss +25 -0
  17. data/assets/stylesheets/d3/_bubble_chart.scss +22 -0
  18. data/lib/twigg-app/app/routes.rb +4 -0
  19. data/lib/twigg-app/app/server.rb +78 -21
  20. data/lib/twigg-app/app/version.rb +1 -1
  21. data/public/vendor/bootstrap/Gruntfile.js +32 -10
  22. data/public/vendor/bootstrap/README.md +2 -0
  23. data/public/vendor/bootstrap/_config.yml +5 -10
  24. data/public/vendor/bootstrap/_includes/footer.html +2 -1
  25. data/public/vendor/bootstrap/_includes/nav-components.html +33 -31
  26. data/public/vendor/bootstrap/_includes/nav-css.html +32 -22
  27. data/public/vendor/bootstrap/_includes/nav-getting-started.html +17 -1
  28. data/public/vendor/bootstrap/_includes/nav-javascript.html +1 -1
  29. data/public/vendor/bootstrap/_includes/nav-main.html +1 -1
  30. data/public/vendor/bootstrap/_includes/social-buttons.html +1 -1
  31. data/public/vendor/bootstrap/_layouts/default.html +18 -14
  32. data/public/vendor/bootstrap/_layouts/home.html +9 -6
  33. data/public/vendor/bootstrap/assets/css/docs.css +584 -396
  34. data/public/vendor/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png +0 -0
  35. data/public/vendor/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png +0 -0
  36. data/public/vendor/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png +0 -0
  37. data/public/vendor/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png +0 -0
  38. data/public/vendor/bootstrap/assets/ico/favicon.png +0 -0
  39. data/public/vendor/bootstrap/assets/js/application.js +2 -1
  40. data/public/vendor/bootstrap/assets/js/customizer.js +160 -45
  41. data/public/vendor/bootstrap/assets/js/filesaver.js +169 -0
  42. data/public/vendor/bootstrap/assets/js/jquery.js +6 -5
  43. data/public/vendor/bootstrap/assets/js/raw-files.js +3 -0
  44. data/public/vendor/bootstrap/bower.json +1 -1
  45. data/public/vendor/bootstrap/components.html +787 -364
  46. data/public/vendor/bootstrap/composer.json +1 -1
  47. data/public/vendor/bootstrap/css.html +413 -248
  48. data/public/vendor/bootstrap/customize.html +413 -447
  49. data/public/vendor/bootstrap/dist/css/bootstrap-theme.css +384 -0
  50. data/public/vendor/bootstrap/dist/css/bootstrap-theme.min.css +1 -0
  51. data/public/vendor/bootstrap/dist/css/bootstrap.css +3033 -1807
  52. data/public/vendor/bootstrap/dist/css/bootstrap.min.css +1 -1
  53. data/public/vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.eot +0 -0
  54. data/public/vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.svg +228 -0
  55. data/public/vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf +0 -0
  56. data/public/vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff +0 -0
  57. data/public/vendor/bootstrap/dist/js/bootstrap.js +18 -12
  58. data/public/vendor/bootstrap/dist/js/bootstrap.min.js +1 -1
  59. data/public/vendor/bootstrap/examples/carousel/carousel.css +128 -0
  60. data/public/vendor/bootstrap/examples/carousel/index.html +201 -0
  61. data/public/vendor/bootstrap/examples/grid/grid.css +28 -0
  62. data/public/vendor/bootstrap/examples/grid/index.html +119 -0
  63. data/public/vendor/bootstrap/examples/jumbotron/index.html +111 -0
  64. data/public/vendor/bootstrap/examples/jumbotron/jumbotron.css +5 -0
  65. data/public/vendor/bootstrap/examples/jumbotron-narrow/index.html +78 -0
  66. data/public/vendor/bootstrap/examples/jumbotron-narrow/jumbotron-narrow.css +79 -0
  67. data/public/vendor/bootstrap/examples/justified-nav/index.html +79 -0
  68. data/public/vendor/bootstrap/examples/justified-nav/justified-nav.css +88 -0
  69. data/public/vendor/bootstrap/examples/navbar/index.html +83 -0
  70. data/public/vendor/bootstrap/examples/navbar/navbar.css +7 -0
  71. data/public/vendor/bootstrap/examples/navbar-fixed-top/index.html +86 -0
  72. data/public/vendor/bootstrap/examples/navbar-fixed-top/navbar-fixed-top.css +4 -0
  73. data/public/vendor/bootstrap/examples/navbar-static-top/index.html +87 -0
  74. data/public/vendor/bootstrap/examples/navbar-static-top/navbar-static-top.css +7 -0
  75. data/public/vendor/bootstrap/examples/non-responsive/index.html +96 -0
  76. data/public/vendor/bootstrap/examples/non-responsive/non-responsive.css +117 -0
  77. data/public/vendor/bootstrap/examples/offcanvas/index.html +127 -0
  78. data/public/vendor/bootstrap/examples/offcanvas/offcanvas.css +48 -0
  79. data/public/vendor/bootstrap/examples/offcanvas/offcanvas.js +5 -0
  80. data/public/vendor/bootstrap/examples/screenshots/carousel.jpg +0 -0
  81. data/public/vendor/bootstrap/examples/screenshots/grid.jpg +0 -0
  82. data/public/vendor/bootstrap/examples/screenshots/jumbotron-narrow.jpg +0 -0
  83. data/public/vendor/bootstrap/examples/screenshots/jumbotron.jpg +0 -0
  84. data/public/vendor/bootstrap/examples/screenshots/justified-nav.jpg +0 -0
  85. data/public/vendor/bootstrap/examples/screenshots/navbar-fixed.jpg +0 -0
  86. data/public/vendor/bootstrap/examples/screenshots/navbar-static.jpg +0 -0
  87. data/public/vendor/bootstrap/examples/screenshots/navbar.jpg +0 -0
  88. data/public/vendor/bootstrap/examples/screenshots/non-responsive.jpg +0 -0
  89. data/public/vendor/bootstrap/examples/screenshots/offcanvas.jpg +0 -0
  90. data/public/vendor/bootstrap/examples/screenshots/sign-in.jpg +0 -0
  91. data/public/vendor/bootstrap/examples/screenshots/starter-template.jpg +0 -0
  92. data/public/vendor/bootstrap/examples/screenshots/sticky-footer-navbar.jpg +0 -0
  93. data/public/vendor/bootstrap/examples/screenshots/sticky-footer.jpg +0 -0
  94. data/public/vendor/bootstrap/examples/screenshots/theme.jpg +0 -0
  95. data/public/vendor/bootstrap/examples/signin/index.html +46 -0
  96. data/public/vendor/bootstrap/examples/signin/signin.css +40 -0
  97. data/public/vendor/bootstrap/examples/starter-template/index.html +63 -0
  98. data/public/vendor/bootstrap/examples/starter-template/starter-template.css +7 -0
  99. data/public/vendor/bootstrap/examples/sticky-footer/index.html +51 -0
  100. data/public/vendor/bootstrap/examples/sticky-footer/sticky-footer.css +39 -0
  101. data/public/vendor/bootstrap/examples/sticky-footer-navbar/index.html +86 -0
  102. data/public/vendor/bootstrap/examples/sticky-footer-navbar/sticky-footer-navbar.css +46 -0
  103. data/public/vendor/bootstrap/examples/theme/index.html +387 -0
  104. data/public/vendor/bootstrap/examples/theme/theme.css +14 -0
  105. data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.eot +0 -0
  106. data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.svg +228 -0
  107. data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf +0 -0
  108. data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff +0 -0
  109. data/public/vendor/bootstrap/getting-started.html +513 -22
  110. data/public/vendor/bootstrap/index.html +3 -4
  111. data/public/vendor/bootstrap/javascript.html +123 -115
  112. data/public/vendor/bootstrap/js/dropdown.js +3 -3
  113. data/public/vendor/bootstrap/js/modal.js +5 -3
  114. data/public/vendor/bootstrap/js/tests/unit/modal.js +19 -0
  115. data/public/vendor/bootstrap/js/tests/vendor/jquery.js +6 -5
  116. data/public/vendor/bootstrap/js/tooltip.js +9 -5
  117. data/public/vendor/bootstrap/js/transition.js +1 -1
  118. data/public/vendor/bootstrap/less/alerts.less +7 -11
  119. data/public/vendor/bootstrap/less/bootstrap.less +17 -21
  120. data/public/vendor/bootstrap/less/button-groups.less +14 -10
  121. data/public/vendor/bootstrap/less/buttons.less +3 -2
  122. data/public/vendor/bootstrap/less/carousel.less +6 -1
  123. data/public/vendor/bootstrap/less/dropdowns.less +22 -5
  124. data/public/vendor/bootstrap/less/forms.less +36 -15
  125. data/public/vendor/bootstrap/less/glyphicons.less +232 -0
  126. data/public/vendor/bootstrap/less/grid.less +9 -3
  127. data/public/vendor/bootstrap/less/input-groups.less +1 -1
  128. data/public/vendor/bootstrap/less/jumbotron.less +16 -5
  129. data/public/vendor/bootstrap/less/labels.less +9 -5
  130. data/public/vendor/bootstrap/less/mixins.less +73 -43
  131. data/public/vendor/bootstrap/less/modals.less +8 -0
  132. data/public/vendor/bootstrap/less/navbar.less +251 -189
  133. data/public/vendor/bootstrap/less/navs.less +13 -12
  134. data/public/vendor/bootstrap/less/pager.less +1 -1
  135. data/public/vendor/bootstrap/less/pagination.less +20 -9
  136. data/public/vendor/bootstrap/less/panels.less +28 -8
  137. data/public/vendor/bootstrap/less/progress-bars.less +6 -10
  138. data/public/vendor/bootstrap/less/responsive-utilities.less +120 -49
  139. data/public/vendor/bootstrap/less/scaffolding.less +37 -18
  140. data/public/vendor/bootstrap/less/tables.less +84 -59
  141. data/public/vendor/bootstrap/less/theme.less +232 -0
  142. data/public/vendor/bootstrap/less/thumbnails.less +8 -19
  143. data/public/vendor/bootstrap/less/type.less +2 -2
  144. data/public/vendor/bootstrap/less/variables.less +63 -50
  145. data/public/vendor/bootstrap/package.json +2 -1
  146. data/public/vendor/components-backbone/LICENSE +22 -0
  147. data/public/vendor/components-backbone/README.md +10 -0
  148. data/public/vendor/components-backbone/backbone-min.js +4 -0
  149. data/public/vendor/components-backbone/backbone.js +1571 -0
  150. data/public/vendor/components-backbone/bower.json +17 -0
  151. data/public/vendor/components-backbone/component.json +21 -0
  152. data/public/vendor/components-backbone/composer.json +37 -0
  153. data/public/vendor/components-backbone/package.json +24 -0
  154. data/public/vendor/d3.layout.cloud.js +401 -0
  155. data/public/vendor/replacejs/CHANGELOG.md +4 -0
  156. data/public/vendor/replacejs/replace.js +21 -2
  157. data/public/vendor/underscore/CNAME +1 -0
  158. data/public/vendor/underscore/CONTRIBUTING.md +9 -0
  159. data/public/vendor/underscore/LICENSE +22 -0
  160. data/public/vendor/underscore/README.md +19 -0
  161. data/public/vendor/underscore/Rakefile +10 -0
  162. data/public/vendor/underscore/docs/docco.css +192 -0
  163. data/public/vendor/underscore/docs/favicon.ico +0 -0
  164. data/public/vendor/underscore/docs/images/background.png +0 -0
  165. data/public/vendor/underscore/docs/images/underscore.png +0 -0
  166. data/public/vendor/underscore/docs/underscore.html +823 -0
  167. data/public/vendor/underscore/favicon.ico +0 -0
  168. data/public/vendor/underscore/index.html +2467 -0
  169. data/public/vendor/underscore/index.js +1 -0
  170. data/public/vendor/underscore/package.json +16 -0
  171. data/public/vendor/underscore/test/arrays.js +200 -0
  172. data/public/vendor/underscore/test/chaining.js +59 -0
  173. data/public/vendor/underscore/test/collections.js +453 -0
  174. data/public/vendor/underscore/test/functions.js +265 -0
  175. data/public/vendor/underscore/test/index.html +44 -0
  176. data/public/vendor/underscore/test/objects.js +570 -0
  177. data/public/vendor/underscore/test/speed.js +75 -0
  178. data/public/vendor/underscore/test/utility.js +266 -0
  179. data/public/vendor/underscore/test/vendor/jquery.js +9404 -0
  180. data/public/vendor/underscore/test/vendor/jslitmus.js +670 -0
  181. data/public/vendor/underscore/test/vendor/qunit.css +235 -0
  182. data/public/vendor/underscore/test/vendor/qunit.js +1977 -0
  183. data/public/vendor/underscore/test/vendor/runner.js +98 -0
  184. data/public/vendor/underscore/underscore-min.js +1 -0
  185. data/public/vendor/underscore/underscore.js +1226 -0
  186. data/views/dashboard.haml +1 -1
  187. data/views/layout.haml +8 -4
  188. metadata +132 -25
  189. data/public/vendor/bootstrap/_layouts/customize.html +0 -52
  190. data/public/vendor/bootstrap/assets/js/jquery.bbq.min.js +0 -1287
  191. data/public/vendor/bootstrap-glyphicons/CHANGELOG.md +0 -3
  192. data/public/vendor/bootstrap-glyphicons/CNAME +0 -1
  193. data/public/vendor/bootstrap-glyphicons/CONTRIBUTING.md +0 -54
  194. data/public/vendor/bootstrap-glyphicons/LICENSE +0 -19
  195. data/public/vendor/bootstrap-glyphicons/README.md +0 -61
  196. data/public/vendor/bootstrap-glyphicons/_config.yml +0 -12
  197. data/public/vendor/bootstrap-glyphicons/composer.json +0 -9
  198. data/public/vendor/bootstrap-glyphicons/css/bootstrap-glyphicons.css +0 -2
  199. data/public/vendor/bootstrap-glyphicons/css/bootstrap.css +0 -9
  200. data/public/vendor/bootstrap-glyphicons/css/docs.css +0 -160
  201. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.eot +0 -0
  202. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.otf +0 -0
  203. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.svg +0 -175
  204. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.ttf +0 -0
  205. data/public/vendor/bootstrap-glyphicons/fonts/glyphiconshalflings-regular.woff +0 -0
  206. data/public/vendor/bootstrap-glyphicons/index.html +0 -255
  207. data/public/vendor/bootstrap-glyphicons/less/bootstrap-glyphicons.less +0 -201
  208. data/public/vendor/bootstrap-glyphicons/package.json +0 -18
@@ -15,7 +15,7 @@ base_url: "../"
15
15
  </div>
16
16
  <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
17
17
 
18
- <h3 id="overview-doctype">HTML5 doctype required</h3>
18
+ <h3 id="overview-doctype">HTML5 doctype</h3>
19
19
  <p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
20
20
  {% highlight html %}
21
21
  <!DOCTYPE html>
@@ -29,6 +29,10 @@ base_url: "../"
29
29
  <p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
30
30
  {% highlight html %}
31
31
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
32
+ {% endhighlight %}
33
+ <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution!</p>
34
+ {% highlight html %}
35
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
32
36
  {% endhighlight %}
33
37
 
34
38
  <h3 id="overview-responsive-images">Responsive images</h3>
@@ -47,10 +51,10 @@ base_url: "../"
47
51
  </ul>
48
52
  <p>These styles can be found within <code>scaffolding.less</code>.</p>
49
53
 
50
- <h3 id="overview-normalize">Normalize reset</h3>
54
+ <h3 id="overview-normalize">Normalize</h3>
51
55
  <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
52
56
 
53
- <h3 id="overview-container">Centering with container</h3>
57
+ <h3 id="overview-container">Containers</h3>
54
58
  <p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
55
59
  {% highlight html %}
56
60
  <div class="container">
@@ -61,27 +65,13 @@ base_url: "../"
61
65
 
62
66
 
63
67
 
64
- <!-- Glyphicons icon font
65
- ================================================== -->
66
- <div class="bs-docs-section">
67
- <div class="page-header">
68
- <h1 id="glyphicons">Glyphicons</h1>
69
- </div>
70
- <p class="lead">With the launch of Bootstrap 3, icons have been moved to a <a href="https://github.com/twbs/bootstrap-glyphicons">separate repository</a>. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.</p>
71
- <p class="lead">
72
- <a href="http://glyphicons.getbootstrap.com/" class="btn btn-default btn-lg">Visit Glyphicons for Bootstrap</a> or <a href="https://github.com/twbs/bootstrap-glyphicons">download from GitHub</a>
73
- </p>
74
- </div>
75
-
76
-
77
-
78
68
  <!-- Grid system
79
69
  ================================================== -->
80
70
  <div class="bs-docs-section">
81
71
  <div class="page-header">
82
72
  <h1 id="grid">Grid system</h1>
83
73
  </div>
84
- <p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
74
+ <p class="lead">Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
85
75
 
86
76
  <h3 id="grid-media-queries">Media queries</h3>
87
77
  <p>We use the following media queries to create the key breakpoints in our grid system.</p>
@@ -92,7 +82,7 @@ base_url: "../"
92
82
  /* Small devices (tablets, 768px and up) */
93
83
  @media (min-width: @screen-tablet) { ... }
94
84
 
95
- /* Medium devices (tablets, 992px and up) */
85
+ /* Medium devices (desktops, 992px and up) */
96
86
  @media (min-width: @screen-desktop) { ... }
97
87
 
98
88
  /* Large devices (large desktops, 1200px and up) */
@@ -108,8 +98,8 @@ base_url: "../"
108
98
 
109
99
  <h3 id="grid-options">Grid options</h3>
110
100
  <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
111
- <div class="bs-table-scrollable">
112
- <table class="table table-bordered table-striped bs-table">
101
+ <div class="table-responsive">
102
+ <table class="table table-bordered table-striped">
113
103
  <thead>
114
104
  <tr>
115
105
  <th></th>
@@ -119,15 +109,15 @@ base_url: "../"
119
109
  </th>
120
110
  <th>
121
111
  Small devices
122
- <small>Tablets (&gt;768px)</small>
112
+ <small>Tablets (&ge;768px)</small>
123
113
  </th>
124
114
  <th>
125
115
  Medium devices
126
- <small>Desktops (&gt;992px)</small>
116
+ <small>Desktops (&ge;992px)</small>
127
117
  </th>
128
118
  <th>
129
119
  Large devices
130
- <small>Desktops (&gt;1200px)</small>
120
+ <small>Desktops (&ge;1200px)</small>
131
121
  </th>
132
122
  </tr>
133
123
  </thead>
@@ -140,13 +130,13 @@ base_url: "../"
140
130
  <tr>
141
131
  <th>Max container width</th>
142
132
  <td>None (auto)</td>
143
- <td>720px</td>
144
- <td>940px</td>
145
- <td>1140px</td>
133
+ <td>750px</td>
134
+ <td>970px</td>
135
+ <td>1170px</td>
146
136
  </tr>
147
137
  <tr>
148
138
  <th>Class prefix</th>
149
- <td><code>.col-xs</code></td>
139
+ <td><code>.col-xs-</code></td>
150
140
  <td><code>.col-sm-</code></td>
151
141
  <td><code>.col-md-</code></td>
152
142
  <td><code>.col-lg-</code></td>
@@ -188,166 +178,184 @@ base_url: "../"
188
178
  <p>Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.</p>
189
179
  <div class="bs-docs-grid">
190
180
  <div class="row show-grid">
191
- <div class="col-md-1">1</div>
192
- <div class="col-md-1">1</div>
193
- <div class="col-md-1">1</div>
194
- <div class="col-md-1">1</div>
195
- <div class="col-md-1">1</div>
196
- <div class="col-md-1">1</div>
197
- <div class="col-md-1">1</div>
198
- <div class="col-md-1">1</div>
199
- <div class="col-md-1">1</div>
200
- <div class="col-md-1">1</div>
201
- <div class="col-md-1">1</div>
202
- <div class="col-md-1">1</div>
181
+ <div class="col-md-1">.col-md-1</div>
182
+ <div class="col-md-1">.col-md-1</div>
183
+ <div class="col-md-1">.col-md-1</div>
184
+ <div class="col-md-1">.col-md-1</div>
185
+ <div class="col-md-1">.col-md-1</div>
186
+ <div class="col-md-1">.col-md-1</div>
187
+ <div class="col-md-1">.col-md-1</div>
188
+ <div class="col-md-1">.col-md-1</div>
189
+ <div class="col-md-1">.col-md-1</div>
190
+ <div class="col-md-1">.col-md-1</div>
191
+ <div class="col-md-1">.col-md-1</div>
192
+ <div class="col-md-1">.col-md-1</div>
203
193
  </div>
204
194
  <div class="row show-grid">
205
- <div class="col-md-8">8</div>
206
- <div class="col-md-4">4</div>
195
+ <div class="col-md-8">.col-md-8</div>
196
+ <div class="col-md-4">.col-md-4</div>
207
197
  </div>
208
198
  <div class="row show-grid">
209
- <div class="col-md-4">4</div>
210
- <div class="col-md-4">4</div>
211
- <div class="col-md-4">4</div>
199
+ <div class="col-md-4">.col-md-4</div>
200
+ <div class="col-md-4">.col-md-4</div>
201
+ <div class="col-md-4">.col-md-4</div>
212
202
  </div>
213
203
  <div class="row show-grid">
214
- <div class="col-md-6">6</div>
215
- <div class="col-md-6">6</div>
204
+ <div class="col-md-6">.col-md-6</div>
205
+ <div class="col-md-6">.col-md-6</div>
216
206
  </div>
217
207
  </div>
218
208
  {% highlight html %}
219
209
  <div class="row">
220
- <div class="col-md-1">1</div>
221
- <div class="col-md-1">1</div>
222
- <div class="col-md-1">1</div>
223
- <div class="col-md-1">1</div>
224
- <div class="col-md-1">1</div>
225
- <div class="col-md-1">1</div>
226
- <div class="col-md-1">1</div>
227
- <div class="col-md-1">1</div>
228
- <div class="col-md-1">1</div>
229
- <div class="col-md-1">1</div>
230
- <div class="col-md-1">1</div>
231
- <div class="col-md-1">1</div>
210
+ <div class="col-md-1">.col-md-1</div>
211
+ <div class="col-md-1">.col-md-1</div>
212
+ <div class="col-md-1">.col-md-1</div>
213
+ <div class="col-md-1">.col-md-1</div>
214
+ <div class="col-md-1">.col-md-1</div>
215
+ <div class="col-md-1">.col-md-1</div>
216
+ <div class="col-md-1">.col-md-1</div>
217
+ <div class="col-md-1">.col-md-1</div>
218
+ <div class="col-md-1">.col-md-1</div>
219
+ <div class="col-md-1">.col-md-1</div>
220
+ <div class="col-md-1">.col-md-1</div>
221
+ <div class="col-md-1">.col-md-1</div>
232
222
  </div>
233
223
  <div class="row">
234
- <div class="col-md-8">8</div>
235
- <div class="col-md-4">4</div>
224
+ <div class="col-md-8">.col-md-8</div>
225
+ <div class="col-md-4">.col-md-4</div>
236
226
  </div>
237
227
  <div class="row">
238
- <div class="col-md-4">4</div>
239
- <div class="col-md-4">4</div>
240
- <div class="col-md-4">4</div>
228
+ <div class="col-md-4">.col-md-4</div>
229
+ <div class="col-md-4">.col-md-4</div>
230
+ <div class="col-md-4">.col-md-4</div>
241
231
  </div>
242
232
  <div class="row">
243
- <div class="col-md-6">6</div>
244
- <div class="col-md-6">6</div>
233
+ <div class="col-md-6">.col-md-6</div>
234
+ <div class="col-md-6">.col-md-6</div>
245
235
  </div>
246
236
  {% endhighlight %}
247
237
 
248
- <h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3>
238
+ <h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
249
239
  <p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
250
240
  <div class="bs-docs-grid">
251
241
  <div class="row show-grid">
252
- <div class="col-xs-12 col-md-8">8</div>
253
- <div class="col-xs-6 col-md-4">4</div>
242
+ <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
243
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
254
244
  </div>
255
245
  <div class="row show-grid">
256
- <div class="col-xs-6 col-md-4">4</div>
257
- <div class="col-xs-6 col-md-4">4</div>
258
- <div class="col-xs-6 col-md-4">4</div>
246
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
247
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
248
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
259
249
  </div>
260
250
  <div class="row show-grid">
261
- <div class="col-xs-6 col-md-6">6</div>
262
- <div class="col-xs-6 col-md-6">6</div>
251
+ <div class="col-xs-6">.col-xs-6</div>
252
+ <div class="col-xs-6">.col-xs-6</div>
263
253
  </div>
264
254
  </div>
265
255
  {% highlight html %}
266
256
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
267
257
  <div class="row">
268
- <div class="col-xs-12 col-md-8">8</div>
269
- <div class="col-xs-6 col-md-4">4</div>
258
+ <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
259
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
270
260
  </div>
271
261
 
272
262
  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
273
263
  <div class="row">
274
- <div class="col-xs-6 col-md-4">4</div>
275
- <div class="col-xs-6 col-md-4">4</div>
276
- <div class="col-xs-6 col-md-4">4</div>
264
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
265
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
266
+ <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
277
267
  </div>
278
268
 
279
269
  <!-- Columns are always 50% wide, on mobile and desktop -->
280
270
  <div class="row">
281
- <div class="col-xs-6 col-md-6">6</div>
282
- <div class="col-xs-6 col-md-6">6</div>
271
+ <div class="col-xs-6">.col-xs-6</div>
272
+ <div class="col-xs-6">.col-xs-6</div>
283
273
  </div>
284
274
  {% endhighlight %}
285
275
 
286
- <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, and desktop</h3>
276
+ <h3 id="grid-example-mixed-complete">Example: Mobile, tablet, desktops</h3>
287
277
  <p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
288
278
  <div class="bs-docs-grid">
289
279
  <div class="row show-grid">
290
- <div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div>
291
- <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
280
+ <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
281
+ <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
292
282
  </div>
293
283
  <div class="row show-grid">
294
284
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
295
285
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
286
+ <!-- Optional: clear the XS cols if their content doesn't match in height -->
287
+ <div class="clearfix visible-xs"></div>
296
288
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
297
289
  </div>
298
- <div class="row show-grid">
299
- <div class="col-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
300
- <div class="col-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
301
- </div>
302
290
  </div>
303
291
  {% highlight html %}
304
292
  <div class="row">
305
- <div class="col-xs-12 col-sm-8 col-md-8">.col-xs-12 .col-sm-8 .col-md-8</div>
306
- <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
293
+ <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
294
+ <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
307
295
  </div>
308
296
  <div class="row">
309
297
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
310
298
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
299
+ <!-- Optional: clear the XS cols if their content doesn't match in height -->
300
+ <div class="clearfix visible-xs"></div>
311
301
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
312
302
  </div>
303
+ {% endhighlight %}
304
+
305
+ <h3 id="grid-responsive-resets">Responsive column resets</h3>
306
+ <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="../css#responsive-utilities">responsive utility classes</a>.</p>
307
+ {% highlight html %}
313
308
  <div class="row">
314
- <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
315
- <div class="col-xs-6 col-sm-6 col-md-6">.col-xs-6 .col-sm-6 .col-md-6</div>
309
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
310
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
311
+
312
+ <!-- Add the extra clearfix for only the required viewport -->
313
+ <div class="clearfix visible-xs"></div>
314
+
315
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
316
+ <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
317
+ </div>
318
+ {% endhighlight %}
319
+ <p>In addition to column clearing at responsive breakpoints, you may need to <strong>reset offsets, pushes, or pulls</strong>. Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.</p>
320
+ {% highlight html %}
321
+ <div class="row">
322
+ <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
323
+ <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
324
+ </div>
325
+
326
+ <div class="row">
327
+ <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
328
+ <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
316
329
  </div>
317
330
  {% endhighlight %}
318
331
 
319
- <div class="bs-callout bs-callout-danger">
320
- <h4>Need more examples?</h4>
321
- <p>We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.</p>
322
- <p><a class="btn btn-danger" target="_blank" href="http://examples.getbootstrap.com/grid/">More grid examples</a></p>
323
- </div>
324
332
 
325
333
  <h3 id="grid-offsetting">Offsetting columns</h3>
326
334
  <p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
327
335
  <div class="bs-docs-grid">
328
336
  <div class="row show-grid">
329
- <div class="col-md-4">4</div>
330
- <div class="col-md-4 col-md-offset-4">4 offset 4</div>
331
- </div><!-- /row -->
337
+ <div class="col-md-4">.col-md-4</div>
338
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
339
+ </div>
332
340
  <div class="row show-grid">
333
- <div class="col-md-3 col-md-offset-3">3 offset 3</div>
334
- <div class="col-md-3 col-md-offset-3">3 offset 3</div>
335
- </div><!-- /row -->
341
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
342
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
343
+ </div>
336
344
  <div class="row show-grid">
337
- <div class="col-md-6 col-md-offset-3">6 offset 3</div>
338
- </div><!-- /row -->
345
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
346
+ </div>
339
347
  </div>
340
348
  {% highlight html %}
341
349
  <div class="row">
342
- <div class="col-md-4">...</div>
343
- <div class="col-md-4 col-md-offset-4">...</div>
350
+ <div class="col-md-4">.col-md-4</div>
351
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
344
352
  </div>
345
353
  <div class="row">
346
- <div class="col-md-3 col-md-offset-3">3 offset 3</div>
347
- <div class="col-md-3 col-md-offset-3">3 offset 3</div>
354
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
355
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
348
356
  </div>
349
357
  <div class="row">
350
- <div class="col-md-6 col-md-offset-3">...</div>
358
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
351
359
  </div>
352
360
  {% endhighlight %}
353
361
 
@@ -356,13 +364,13 @@ base_url: "../"
356
364
  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
357
365
  <div class="row show-grid">
358
366
  <div class="col-md-9">
359
- Level 1: 9 columns
367
+ Level 1: .col-md-9
360
368
  <div class="row show-grid">
361
369
  <div class="col-md-6">
362
- Level 2: 6 columns
370
+ Level 2: .col-md-6
363
371
  </div>
364
372
  <div class="col-md-6">
365
- Level 2: 6 columns
373
+ Level 2: .col-md-6
366
374
  </div>
367
375
  </div>
368
376
  </div>
@@ -370,13 +378,13 @@ base_url: "../"
370
378
  {% highlight html %}
371
379
  <div class="row">
372
380
  <div class="col-md-9">
373
- Level 1: 9 columns
381
+ Level 1: .col-md-9
374
382
  <div class="row">
375
383
  <div class="col-md-6">
376
- Level 2: 6 columns
384
+ Level 2: .col-md-6
377
385
  </div>
378
386
  <div class="col-md-6">
379
- Level 2: 6 columns
387
+ Level 2: .col-md-6
380
388
  </div>
381
389
  </div>
382
390
  </div>
@@ -386,14 +394,14 @@ base_url: "../"
386
394
  <h3 id="grid-column-ordering">Column ordering</h3>
387
395
  <p>Easily change the order of our built-in grid columns with <code>.col-md-push-*</code> and <code>.col-md-pull-*</code> modifier classes.</p>
388
396
  <div class="row show-grid">
389
- <div class="col-md-9 col-md-push-3">9</div>
390
- <div class="col-md-3 col-md-pull-9">3</div>
397
+ <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
398
+ <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
391
399
  </div>
392
400
 
393
401
  {% highlight html %}
394
402
  <div class="row">
395
- <div class="col-md-9 col-md-push-3">9</div>
396
- <div class="col-md-3 col-md-pull-9">3</div>
403
+ <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
404
+ <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
397
405
  </div>
398
406
  {% endhighlight %}
399
407
 
@@ -585,27 +593,27 @@ base_url: "../"
585
593
  <table class="table">
586
594
  <tbody>
587
595
  <tr>
588
- <td><h1>Bootstrap heading</h1></td>
589
- <td>Semibold 38px</td>
596
+ <td><h1>h1. Bootstrap heading</h1></td>
597
+ <td>Semibold 36px</td>
590
598
  </tr>
591
599
  <tr>
592
- <td><h2>Bootstrap heading</h2></td>
593
- <td>Semibold 32px</td>
600
+ <td><h2>h2. Bootstrap heading</h2></td>
601
+ <td>Semibold 30px</td>
594
602
  </tr>
595
603
  <tr>
596
- <td><h3>Bootstrap heading</h3></td>
604
+ <td><h3>h3. Bootstrap heading</h3></td>
597
605
  <td>Semibold 24px</td>
598
606
  </tr>
599
607
  <tr>
600
- <td><h4>Bootstrap heading</h4></td>
608
+ <td><h4>h4. Bootstrap heading</h4></td>
601
609
  <td>Semibold 18px</td>
602
610
  </tr>
603
611
  <tr>
604
- <td><h5>Bootstrap heading</h5></td>
612
+ <td><h5>h5. Bootstrap heading</h5></td>
605
613
  <td>Semibold 14px</td>
606
614
  </tr>
607
615
  <tr>
608
- <td><h6>Bootstrap heading</h6></td>
616
+ <td><h6>h6. Bootstrap heading</h6></td>
609
617
  <td>Semibold 12px</td>
610
618
  </tr>
611
619
  </tbody>
@@ -702,18 +710,18 @@ base_url: "../"
702
710
  <div class="bs-example">
703
711
  <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
704
712
  <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
705
- <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
706
- <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
707
713
  <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
708
714
  <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
715
+ <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
716
+ <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
709
717
  </div>
710
718
  {% highlight html %}
711
719
  <p class="text-muted">...</p>
712
720
  <p class="text-primary">...</p>
713
- <p class="text-warning">...</p>
714
- <p class="text-danger">...</p>
715
721
  <p class="text-success">...</p>
716
722
  <p class="text-info">...</p>
723
+ <p class="text-warning">...</p>
724
+ <p class="text-danger">...</p>
717
725
  {% endhighlight %}
718
726
 
719
727
 
@@ -898,7 +906,7 @@ base_url: "../"
898
906
  {% endhighlight %}
899
907
 
900
908
  <h3>Inline</h3>
901
- <p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
909
+ <p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p>
902
910
  <div class="bs-example">
903
911
  <ul class="list-inline">
904
912
  <li>Lorem ipsum</li>
@@ -1039,10 +1047,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1039
1047
  {% endhighlight %}
1040
1048
 
1041
1049
 
1042
- <h2>Optional classes</h2>
1043
- <p>Add any of the following classes to the <code>.table</code> base class.</p>
1044
-
1045
- <h3 id="tables-striped">Striped</h3>
1050
+ <h2 id="tables-striped">Striped rows</h2>
1046
1051
  <p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
1047
1052
  <div class="bs-callout bs-callout-danger">
1048
1053
  <h4>Cross-browser compatibility</h4>
@@ -1086,7 +1091,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1086
1091
  </table>
1087
1092
  {% endhighlight %}
1088
1093
 
1089
- <h3 id="tables-bordered">Bordered</h3>
1094
+
1095
+ <h2 id="tables-bordered">Bordered table</h2>
1090
1096
  <p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
1091
1097
  <div class="bs-example">
1092
1098
  <table class="table table-bordered">
@@ -1130,7 +1136,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1130
1136
  </table>
1131
1137
  {% endhighlight %}
1132
1138
 
1133
- <h3 id="tables-hover-rows">Hover rows</h3>
1139
+
1140
+ <h2 id="tables-hover-rows">Hover rows</h2>
1134
1141
  <p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
1135
1142
  <div class="bs-example">
1136
1143
  <table class="table table-hover">
@@ -1170,7 +1177,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1170
1177
  {% endhighlight %}
1171
1178
 
1172
1179
 
1173
- <h3 id="tables-condensed">Condensed</h3>
1180
+ <h2 id="tables-condensed">Condensed table</h2>
1174
1181
  <p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
1175
1182
  <div class="bs-example">
1176
1183
  <table class="table table-condensed">
@@ -1210,11 +1217,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1210
1217
  {% endhighlight %}
1211
1218
 
1212
1219
 
1213
-
1214
- <h2 id="tables-row-classes">Contextual table classes</h2>
1220
+ <h2 id="tables-contextual-classes">Contextual classes</h2>
1215
1221
  <p>Use contextual classes to color table rows or individual cells.</p>
1216
- <div class="bs-table-scrollable">
1217
- <table class="table table-bordered table-striped bs-table">
1222
+ <div class="table-responsive">
1223
+ <table class="table table-bordered table-striped">
1218
1224
  <colgroup>
1219
1225
  <col class="col-lg-1">
1220
1226
  <col class="col-lg-7">
@@ -1228,15 +1234,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1228
1234
  <tbody>
1229
1235
  <tr>
1230
1236
  <td>
1231
- <code>.success</code>
1237
+ <code>.active</code>
1232
1238
  </td>
1233
- <td>Indicates a successful or positive action</td>
1239
+ <td>Applies the hover color to a particular row or cell</td>
1234
1240
  </tr>
1235
1241
  <tr>
1236
1242
  <td>
1237
- <code>.danger</code>
1243
+ <code>.success</code>
1238
1244
  </td>
1239
- <td>Indicates a dangerous or potentially negative action</td>
1245
+ <td>Indicates a successful or positive action</td>
1240
1246
  </tr>
1241
1247
  <tr>
1242
1248
  <td>
@@ -1246,9 +1252,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1246
1252
  </tr>
1247
1253
  <tr>
1248
1254
  <td>
1249
- <code>.active</code>
1255
+ <code>.danger</code>
1250
1256
  </td>
1251
- <td>Applies the hover color to a particular row or cell</td>
1257
+ <td>Indicates a dangerous or potentially negative action</td>
1252
1258
  </tr>
1253
1259
  </tbody>
1254
1260
  </table>
@@ -1264,7 +1270,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1264
1270
  </tr>
1265
1271
  </thead>
1266
1272
  <tbody>
1267
- <tr class="success">
1273
+ <tr class="active">
1268
1274
  <td>1</td>
1269
1275
  <td>Column content</td>
1270
1276
  <td>Column content</td>
@@ -1276,7 +1282,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1276
1282
  <td>Column content</td>
1277
1283
  <td>Column content</td>
1278
1284
  </tr>
1279
- <tr class="danger">
1285
+ <tr class="success">
1280
1286
  <td>3</td>
1281
1287
  <td>Column content</td>
1282
1288
  <td>Column content</td>
@@ -1300,7 +1306,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1300
1306
  <td>Column content</td>
1301
1307
  <td>Column content</td>
1302
1308
  </tr>
1303
- <tr class="active">
1309
+ <tr class="danger">
1304
1310
  <td>7</td>
1305
1311
  <td>Column content</td>
1306
1312
  <td>Column content</td>
@@ -1310,14 +1316,123 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1310
1316
  </table>
1311
1317
  </div><!-- /example -->
1312
1318
  {% highlight html %}
1313
- <tr class="success">
1314
- <td>1</td>
1315
- <td>Column content</td>
1316
- <td>Column content</td>
1317
- <td>Column content</td>
1319
+ <!-- On rows -->
1320
+ <tr class="active">...</tr>
1321
+ <tr class="success">...</tr>
1322
+ <tr class="warning">...</tr>
1323
+ <tr class="danger">...</tr>
1324
+
1325
+ <!-- On cells (`td` or `th`) -->
1326
+ <tr>
1327
+ <td class="active">...</td>
1328
+ <td class="success">...</td>
1329
+ <td class="warning">...</td>
1330
+ <td class="danger">...</td>
1318
1331
  </tr>
1319
1332
  {% endhighlight %}
1320
1333
 
1334
+
1335
+ <h2 id="tables-responsive">Responsive tables</h2>
1336
+ <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
1337
+ <div class="bs-example">
1338
+ <div class="table-responsive">
1339
+ <table class="table">
1340
+ <thead>
1341
+ <tr>
1342
+ <th>#</th>
1343
+ <th>Table heading</th>
1344
+ <th>Table heading</th>
1345
+ <th>Table heading</th>
1346
+ <th>Table heading</th>
1347
+ <th>Table heading</th>
1348
+ <th>Table heading</th>
1349
+ </tr>
1350
+ </thead>
1351
+ <tbody>
1352
+ <tr>
1353
+ <td>1</td>
1354
+ <td>Table cell</td>
1355
+ <td>Table cell</td>
1356
+ <td>Table cell</td>
1357
+ <td>Table cell</td>
1358
+ <td>Table cell</td>
1359
+ <td>Table cell</td>
1360
+ </tr>
1361
+ <tr>
1362
+ <td>2</td>
1363
+ <td>Table cell</td>
1364
+ <td>Table cell</td>
1365
+ <td>Table cell</td>
1366
+ <td>Table cell</td>
1367
+ <td>Table cell</td>
1368
+ <td>Table cell</td>
1369
+ </tr>
1370
+ <tr>
1371
+ <td>3</td>
1372
+ <td>Table cell</td>
1373
+ <td>Table cell</td>
1374
+ <td>Table cell</td>
1375
+ <td>Table cell</td>
1376
+ <td>Table cell</td>
1377
+ <td>Table cell</td>
1378
+ </tr>
1379
+ </tbody>
1380
+ </table>
1381
+ </div><!-- /.table-responsive -->
1382
+
1383
+ <div class="table-responsive">
1384
+ <table class="table table-bordered">
1385
+ <thead>
1386
+ <tr>
1387
+ <th>#</th>
1388
+ <th>Table heading</th>
1389
+ <th>Table heading</th>
1390
+ <th>Table heading</th>
1391
+ <th>Table heading</th>
1392
+ <th>Table heading</th>
1393
+ <th>Table heading</th>
1394
+ </tr>
1395
+ </thead>
1396
+ <tbody>
1397
+ <tr>
1398
+ <td>1</td>
1399
+ <td>Table cell</td>
1400
+ <td>Table cell</td>
1401
+ <td>Table cell</td>
1402
+ <td>Table cell</td>
1403
+ <td>Table cell</td>
1404
+ <td>Table cell</td>
1405
+ </tr>
1406
+ <tr>
1407
+ <td>2</td>
1408
+ <td>Table cell</td>
1409
+ <td>Table cell</td>
1410
+ <td>Table cell</td>
1411
+ <td>Table cell</td>
1412
+ <td>Table cell</td>
1413
+ <td>Table cell</td>
1414
+ </tr>
1415
+ <tr>
1416
+ <td>3</td>
1417
+ <td>Table cell</td>
1418
+ <td>Table cell</td>
1419
+ <td>Table cell</td>
1420
+ <td>Table cell</td>
1421
+ <td>Table cell</td>
1422
+ <td>Table cell</td>
1423
+ </tr>
1424
+ </tbody>
1425
+ </table>
1426
+ </div><!-- /.table-responsive -->
1427
+ </div><!-- /example -->
1428
+ {% highlight html %}
1429
+ <div class="table-responsive">
1430
+ <table class="table">
1431
+ ...
1432
+ </table>
1433
+ </div>
1434
+ {% endhighlight %}
1435
+
1321
1436
  </div>
1322
1437
 
1323
1438
 
@@ -1332,58 +1447,52 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1332
1447
  <h2 id="forms-example">Basic example</h2>
1333
1448
  <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
1334
1449
  <form class="bs-example" role="form">
1335
- <fieldset>
1336
- <legend>Legend</legend>
1337
- <div class="form-group">
1338
- <label for="exampleInputEmail1">Email address</label>
1339
- <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
1340
- </div>
1341
- <div class="form-group">
1342
- <label for="exampleInputPassword1">Password</label>
1343
- <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
1344
- </div>
1345
- <div class="form-group">
1346
- <label for="exampleInputFile">File input</label>
1347
- <input type="file" id="exampleInputFile">
1348
- <p class="help-block">Example block-level help text here.</p>
1349
- </div>
1350
- <div class="checkbox">
1351
- <label>
1352
- <input type="checkbox"> Check me out
1353
- </label>
1354
- </div>
1355
- <button type="submit" class="btn btn-default">Submit</button>
1356
- </fieldset>
1450
+ <div class="form-group">
1451
+ <label for="exampleInputEmail1">Email address</label>
1452
+ <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
1453
+ </div>
1454
+ <div class="form-group">
1455
+ <label for="exampleInputPassword1">Password</label>
1456
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
1457
+ </div>
1458
+ <div class="form-group">
1459
+ <label for="exampleInputFile">File input</label>
1460
+ <input type="file" id="exampleInputFile">
1461
+ <p class="help-block">Example block-level help text here.</p>
1462
+ </div>
1463
+ <div class="checkbox">
1464
+ <label>
1465
+ <input type="checkbox"> Check me out
1466
+ </label>
1467
+ </div>
1468
+ <button type="submit" class="btn btn-default">Submit</button>
1357
1469
  </form><!-- /example -->
1358
1470
  {% highlight html %}
1359
1471
  <form role="form">
1360
- <fieldset>
1361
- <legend>Legend</legend>
1362
- <div class="form-group">
1363
- <label for="exampleInputEmail1">Email address</label>
1364
- <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
1365
- </div>
1366
- <div class="form-group">
1367
- <label for="exampleInputPassword1">Password</label>
1368
- <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
1369
- </div>
1370
- <div class="form-group">
1371
- <label for="exampleInputFile">File input</label>
1372
- <input type="file" id="exampleInputFile">
1373
- <p class="help-block">Example block-level help text here.</p>
1374
- </div>
1375
- <div class="checkbox">
1376
- <label>
1377
- <input type="checkbox"> Check me out
1378
- </label>
1379
- </div>
1380
- <button type="submit" class="btn btn-default">Submit</button>
1381
- </fieldset>
1472
+ <div class="form-group">
1473
+ <label for="exampleInputEmail1">Email address</label>
1474
+ <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
1475
+ </div>
1476
+ <div class="form-group">
1477
+ <label for="exampleInputPassword1">Password</label>
1478
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
1479
+ </div>
1480
+ <div class="form-group">
1481
+ <label for="exampleInputFile">File input</label>
1482
+ <input type="file" id="exampleInputFile">
1483
+ <p class="help-block">Example block-level help text here.</p>
1484
+ </div>
1485
+ <div class="checkbox">
1486
+ <label>
1487
+ <input type="checkbox"> Check me out
1488
+ </label>
1489
+ </div>
1490
+ <button type="submit" class="btn btn-default">Submit</button>
1382
1491
  </form>
1383
1492
  {% endhighlight %}
1384
1493
 
1385
1494
 
1386
- <h3 id="forms-inline">Inline form</h3>
1495
+ <h2 id="forms-inline">Inline form</h2>
1387
1496
  <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
1388
1497
  <div class="bs-callout bs-callout-danger">
1389
1498
  <h4>Requires custom widths</h4>
@@ -1396,7 +1505,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1396
1505
  <form class="bs-example form-inline" role="form">
1397
1506
  <div class="form-group">
1398
1507
  <label class="sr-only" for="exampleInputEmail2">Email address</label>
1399
- <input type="text" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
1508
+ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
1400
1509
  </div>
1401
1510
  <div class="form-group">
1402
1511
  <label class="sr-only" for="exampleInputPassword2">Password</label>
@@ -1413,7 +1522,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1413
1522
  <form class="form-inline" role="form">
1414
1523
  <div class="form-group">
1415
1524
  <label class="sr-only" for="exampleInputEmail2">Email address</label>
1416
- <input type="text" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
1525
+ <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
1417
1526
  </div>
1418
1527
  <div class="form-group">
1419
1528
  <label class="sr-only" for="exampleInputPassword2">Password</label>
@@ -1428,13 +1537,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1428
1537
  </form>
1429
1538
  {% endhighlight %}
1430
1539
 
1540
+
1431
1541
  <h2 id="forms-horizontal">Horizontal form</h2>
1432
1542
  <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
1433
1543
  <form class="bs-example form-horizontal">
1434
1544
  <div class="form-group">
1435
1545
  <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
1436
1546
  <div class="col-lg-10">
1437
- <input type="text" class="form-control" id="inputEmail1" placeholder="Email">
1547
+ <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
1438
1548
  </div>
1439
1549
  </div>
1440
1550
  <div class="form-group">
@@ -1463,7 +1573,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1463
1573
  <div class="form-group">
1464
1574
  <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
1465
1575
  <div class="col-lg-10">
1466
- <input type="text" class="form-control" id="inputEmail1" placeholder="Email">
1576
+ <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
1467
1577
  </div>
1468
1578
  </div>
1469
1579
  <div class="form-group">
@@ -1490,7 +1600,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1490
1600
  {% endhighlight %}
1491
1601
 
1492
1602
 
1493
- <h2 id="forms-controls">Supported form controls</h2>
1603
+ <h2 id="forms-controls">Supported controls</h2>
1494
1604
  <p>Examples of standard form controls supported in an example form layout.</p>
1495
1605
 
1496
1606
  <h3>Inputs</h3>
@@ -1624,8 +1734,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1624
1734
  {% endhighlight %}
1625
1735
 
1626
1736
 
1627
- <h2 id="forms-controls-static">Static text in horizontal forms</h2>
1628
- <p>When you need to place regular, static text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
1737
+ <h2 id="forms-controls-static">Static control</h2>
1738
+ <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
1629
1739
  <form class="bs-example form-horizontal">
1630
1740
  <div class="form-group">
1631
1741
  <label class="col-lg-2 control-label">Email</label>
@@ -1658,7 +1768,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1658
1768
  {% endhighlight %}
1659
1769
 
1660
1770
 
1661
- <h2 id="forms-control-states">Form control states</h2>
1771
+ <h2 id="forms-control-states">Form states</h2>
1662
1772
  <p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
1663
1773
 
1664
1774
  <h3 id="forms-input-focus">Input focus</h3>
@@ -1739,6 +1849,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1739
1849
  <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
1740
1850
 
1741
1851
  <form class="bs-example">
1852
+ <div class="form-group has-success">
1853
+ <label class="control-label" for="inputSuccess">Input with success</label>
1854
+ <input type="text" class="form-control" id="inputSuccess">
1855
+ </div>
1742
1856
  <div class="form-group has-warning">
1743
1857
  <label class="control-label" for="inputWarning">Input with warning</label>
1744
1858
  <input type="text" class="form-control" id="inputWarning">
@@ -1747,12 +1861,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1747
1861
  <label class="control-label" for="inputError">Input with error</label>
1748
1862
  <input type="text" class="form-control" id="inputError">
1749
1863
  </div>
1750
- <div class="form-group has-success">
1751
- <label class="control-label" for="inputSuccess">Input with success</label>
1752
- <input type="text" class="form-control" id="inputSuccess">
1753
- </div>
1754
1864
  </form>
1755
1865
  {% highlight html %}
1866
+ <div class="form-group has-success">
1867
+ <label class="control-label" for="inputSuccess">Input with success</label>
1868
+ <input type="text" class="form-control" id="inputSuccess">
1869
+ </div>
1756
1870
  <div class="form-group has-warning">
1757
1871
  <label class="control-label" for="inputWarning">Input with warning</label>
1758
1872
  <input type="text" class="form-control" id="inputWarning">
@@ -1761,10 +1875,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1761
1875
  <label class="control-label" for="inputError">Input with error</label>
1762
1876
  <input type="text" class="form-control" id="inputError">
1763
1877
  </div>
1764
- <div class="form-group has-success">
1765
- <label class="control-label" for="inputSuccess">Input with success</label>
1766
- <input type="text" class="form-control" id="inputSuccess">
1767
- </div>
1768
1878
  {% endhighlight %}
1769
1879
 
1770
1880
 
@@ -1850,7 +1960,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1850
1960
  <h1 id="buttons">Buttons</h1>
1851
1961
  </div>
1852
1962
 
1853
- <h2 id="buttons-options">Button options</h2>
1963
+ <h2 id="buttons-options">Options</h2>
1854
1964
  <p>Use any of the available button classes to quickly create a styled button.</p>
1855
1965
  <div class="bs-example">
1856
1966
  <button type="button" class="btn btn-default">Default</button>
@@ -1884,7 +1994,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1884
1994
  <button type="button" class="btn btn-link">Link</button>
1885
1995
  {% endhighlight %}
1886
1996
 
1887
- <h2 id="buttons-sizes">Button sizes</h2>
1997
+ <h2 id="buttons-sizes">Sizes</h2>
1888
1998
  <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
1889
1999
  <div class="bs-example">
1890
2000
  <p>
@@ -1974,7 +2084,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
1974
2084
  </div>
1975
2085
 
1976
2086
 
1977
- <h2 id="buttons-tags">Using multiple tags</h2>
2087
+ <h2 id="buttons-tags">Button tags</h2>
1978
2088
  <p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
1979
2089
  <form class="bs-example">
1980
2090
  <a class="btn btn-default" href="#">Link</a>
@@ -2047,29 +2157,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
2047
2157
  {% endhighlight %}
2048
2158
 
2049
2159
  <h3>.pull-left</h3>
2050
- <p>Float an element left</p>
2160
+ <p>Float an element left with a class. Can also be used as a mixin.</p>
2051
2161
  {% highlight html %}
2052
2162
  <div class="pull-left">...</div>
2053
2163
  {% endhighlight %}
2054
2164
  {% highlight css %}
2055
2165
  .pull-left {
2056
- float: left;
2166
+ float: left !important;
2057
2167
  }
2058
2168
  {% endhighlight %}
2059
2169
 
2060
2170
  <h3>.pull-right</h3>
2061
- <p>Float an element right</p>
2171
+ <p>Float an element right with a class. Can also be used as a mixin.</p>
2062
2172
  {% highlight html %}
2063
2173
  <div class="pull-right">...</div>
2064
2174
  {% endhighlight %}
2065
2175
  {% highlight css %}
2066
2176
  .pull-right {
2067
- float: right;
2177
+ float: right !important;
2068
2178
  }
2069
2179
  {% endhighlight %}
2070
2180
 
2071
2181
  <h3>.clearfix</h3>
2072
- <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
2182
+ <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
2073
2183
  {% highlight html %}
2074
2184
  <div class="clearfix">...</div>
2075
2185
  {% endhighlight %}
@@ -2106,9 +2216,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
2106
2216
  <h1>Responsive utilities</h1>
2107
2217
  </div>
2108
2218
  <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
2219
+ <p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
2109
2220
 
2110
- <h3>Responsive classes</h3>
2111
- <div class="bs-table-scrollable">
2221
+
2222
+ <h2 id="responsive-utilities-classes">Available classes</h2>
2223
+ <p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
2224
+ <div class="table-responsive">
2112
2225
  <table class="table table-bordered table-striped responsive-utilities">
2113
2226
  <thead>
2114
2227
  <tr>
@@ -2119,27 +2232,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
2119
2232
  </th>
2120
2233
  <th>
2121
2234
  Small devices
2122
- <small>Tablets (&gt;768px)</small>
2235
+ <small>Tablets (&ge;768px)</small>
2123
2236
  </th>
2124
2237
  <th>
2125
2238
  Medium devices
2126
- <small>Desktops (&gt;992px)</small>
2239
+ <small>Desktops (&ge;992px)</small>
2127
2240
  </th>
2128
2241
  <th>
2129
2242
  Large devices
2130
- <small>Desktops (&gt;1200px)</small>
2243
+ <small>Desktops (&ge;1200px)</small>
2131
2244
  </th>
2132
2245
  </tr>
2133
2246
  </thead>
2134
- <!-- <thead>
2135
- <tr>
2136
- <th>Class</th>
2137
- <th>Small devices <small>Up to 768px</small></th>
2138
- <th>Medium devices <small>768px to 991px</small></th>
2139
- <th>Large devices <small>992px and up</small></th>
2140
- </tr>
2141
- </thead>
2142
- --> <tbody>
2247
+ <tbody>
2143
2248
  <tr>
2144
2249
  <th><code>.visible-xs</code></th>
2145
2250
  <td class="is-visible">Visible</td>
@@ -2202,8 +2307,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
2202
2307
  </table>
2203
2308
  </div>
2204
2309
 
2205
- <h3>Print classes</h3>
2206
- <div class="bs-table-scrollable">
2310
+
2311
+ <h2 id="responsive-utilities-print">Print classes</h2>
2312
+ <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
2313
+ <div class="table-responsive">
2207
2314
  <table class="table table-bordered table-striped responsive-utilities">
2208
2315
  <thead>
2209
2316
  <tr>
@@ -2227,12 +2334,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
2227
2334
  </table>
2228
2335
  </div>
2229
2336
 
2230
- <h3>When to use</h3>
2231
- <p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
2232
2337
 
2233
- <h3>Test case</h3>
2338
+ <h2 id="responsive-utilities-tests">Test cases</h2>
2234
2339
  <p>Resize your browser or load on different devices to test the responsive utility classes.</p>
2235
- <h4>Visible on...</h4>
2340
+
2341
+ <h3>Visible on...</h3>
2236
2342
  <p>Green checkmarks indicate the element <strong>is visible</strong> in your current viewport.</p>
2237
2343
  <div class="row responsive-utilities-test visible-on">
2238
2344
  <div class="col-xs-6 col-sm-3">
@@ -2243,6 +2349,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
2243
2349
  <span class="hidden-sm">Small</span>
2244
2350
  <span class="visible-sm">&#10004; Visible on small</span>
2245
2351
  </div>
2352
+ <div class="clearfix visible-xs"></div>
2246
2353
  <div class="col-xs-6 col-sm-3">
2247
2354
  <span class="hidden-md">Medium</span>
2248
2355
  <span class="visible-md">&#10004; Visible on medium</span>
@@ -2252,7 +2359,36 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
2252
2359
  <span class="visible-lg">&#10004; Visible on large</span>
2253
2360
  </div>
2254
2361
  </div>
2255
- <h4>Hidden on...</h4>
2362
+ <div class="row responsive-utilities-test visible-on">
2363
+ <div class="col-xs-6 col-sm-6">
2364
+ <span class="hidden-xs hidden-sm">Extra small and small</span>
2365
+ <span class="visible-xs visible-sm">&#10004; Visible on x-small and small</span>
2366
+ </div>
2367
+ <div class="col-xs-6 col-sm-6">
2368
+ <span class="hidden-md hidden-lg">Medium and large</span>
2369
+ <span class="visible-md visible-lg">&#10004; Visible on medium and large</span>
2370
+ </div>
2371
+ <div class="clearfix visible-xs"></div>
2372
+ <div class="col-xs-6 col-sm-6">
2373
+ <span class="hidden-xs hidden-md">Extra small and medium</span>
2374
+ <span class="visible-xs visible-md">&#10004; Visible on x-small and medium</span>
2375
+ </div>
2376
+ <div class="col-xs-6 col-sm-6">
2377
+ <span class="hidden-sm hidden-lg">Small and large</span>
2378
+ <span class="visible-sm visible-lg">&#10004; Visible on small and large</span>
2379
+ </div>
2380
+ <div class="clearfix visible-xs"></div>
2381
+ <div class="col-xs-6 col-sm-6">
2382
+ <span class="hidden-xs hidden-lg">Extra small and large</span>
2383
+ <span class="visible-xs visible-lg">&#10004; Visible on x-small and large</span>
2384
+ </div>
2385
+ <div class="col-xs-6 col-sm-6">
2386
+ <span class="hidden-sm hidden-md">Small and medium</span>
2387
+ <span class="visible-sm visible-md">&#10004; Visible on small and medium</span>
2388
+ </div>
2389
+ </div>
2390
+
2391
+ <h3>Hidden on...</h3>
2256
2392
  <p>Here, green checkmarks indicate the element <strong>is hidden</strong> in your current viewport.</p>
2257
2393
  <div class="row responsive-utilities-test hidden-on">
2258
2394
  <div class="col-xs-6 col-sm-3">
@@ -2263,6 +2399,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
2263
2399
  <span class="visible-sm">Small</span>
2264
2400
  <span class="hidden-sm">&#10004; Hidden on small</span>
2265
2401
  </div>
2402
+ <div class="clearfix visible-xs"></div>
2266
2403
  <div class="col-xs-6 col-sm-3">
2267
2404
  <span class="visible-md">Medium</span>
2268
2405
  <span class="hidden-md">&#10004; Hidden on medium</span>
@@ -2272,5 +2409,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
2272
2409
  <span class="hidden-lg">&#10004; Hidden on large</span>
2273
2410
  </div>
2274
2411
  </div>
2412
+ <div class="row responsive-utilities-test hidden-on">
2413
+ <div class="col-xs-6 col-sm-6">
2414
+ <span class="visible-xs visible-sm">Extra small and small</span>
2415
+ <span class="hidden-xs hidden-sm">&#10004; Hidden on x-small and small</span>
2416
+ </div>
2417
+ <div class="col-xs-6 col-sm-6">
2418
+ <span class="visible-md visible-lg">Medium and large</span>
2419
+ <span class="hidden-md hidden-lg">&#10004; Hidden on medium and large</span>
2420
+ </div>
2421
+ <div class="clearfix visible-xs"></div>
2422
+ <div class="col-xs-6 col-sm-6">
2423
+ <span class="visible-xs visible-md">Extra small and medium</span>
2424
+ <span class="hidden-xs hidden-md">&#10004; Hidden on x-small and medium</span>
2425
+ </div>
2426
+ <div class="col-xs-6 col-sm-6">
2427
+ <span class="visible-sm visible-lg">Small and large</span>
2428
+ <span class="hidden-sm hidden-lg">&#10004; Hidden on small and large</span>
2429
+ </div>
2430
+ <div class="clearfix visible-xs"></div>
2431
+ <div class="col-xs-6 col-sm-6">
2432
+ <span class="visible-xs visible-lg">Extra small and large</span>
2433
+ <span class="hidden-xs hidden-lg">&#10004; Hidden on x-small and large</span>
2434
+ </div>
2435
+ <div class="col-xs-6 col-sm-6">
2436
+ <span class="visible-sm visible-md">Small and medium</span>
2437
+ <span class="hidden-sm hidden-md">&#10004; Hidden on small and medium</span>
2438
+ </div>
2439
+ </div>
2275
2440
 
2276
2441
  </div>