~caneypuggies/reformedchurcheslocator/couchapp-backbone

<p>Includes 180 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>

<li><span class="glyphicon glyphicon-adjust"></span> .glyphicon .glyphicon-adjust</li>

<li><span class="glyphicon glyphicon-align-center"></span> .glyphicon .glyphicon-align-center</li>

<li><span class="glyphicon glyphicon-align-justify"></span> .glyphicon .glyphicon-align-justify</li>

<li><span class="glyphicon glyphicon-align-left"></span> .glyphicon .glyphicon-align-left</li>

<li><span class="glyphicon glyphicon-align-right"></span> .glyphicon .glyphicon-align-right</li>

<li><span class="glyphicon glyphicon-arrow-down"></span> .glyphicon .glyphicon-arrow-down</li>

<li><span class="glyphicon glyphicon-arrow-left"></span> .glyphicon .glyphicon-arrow-left</li>

<li><span class="glyphicon glyphicon-arrow-right"></span> .glyphicon .glyphicon-arrow-right</li>

<li><span class="glyphicon glyphicon-arrow-up"></span> .glyphicon .glyphicon-arrow-up</li>

<li><span class="glyphicon glyphicon-asterisk"></span> .glyphicon .glyphicon-asterisk</li>

<li><span class="glyphicon glyphicon-backward"></span> .glyphicon .glyphicon-backward</li>

<li><span class="glyphicon glyphicon-ban-circle"></span> .glyphicon .glyphicon-ban-circle</li>

<li><span class="glyphicon glyphicon-barcode"></span> .glyphicon .glyphicon-barcode</li>

<li><span class="glyphicon glyphicon-bell"></span> .glyphicon .glyphicon-bell</li>

<li><span class="glyphicon glyphicon-bold"></span> .glyphicon .glyphicon-bold</li>

<li><span class="glyphicon glyphicon-book"></span> .glyphicon .glyphicon-book</li>

<li><span class="glyphicon glyphicon-bookmark"></span> .glyphicon .glyphicon-bookmark</li>

<li><span class="glyphicon glyphicon-briefcase"></span> .glyphicon .glyphicon-briefcase</li>

<li><span class="glyphicon glyphicon-bullhorn"></span> .glyphicon .glyphicon-bullhorn</li>

<li><span class="glyphicon glyphicon-calendar"></span> .glyphicon .glyphicon-calendar</li>

<li><span class="glyphicon glyphicon-camera"></span> .glyphicon .glyphicon-camera</li>

<li><span class="glyphicon glyphicon-certificate"></span> .glyphicon .glyphicon-certificate</li>

<li><span class="glyphicon glyphicon-check"></span> .glyphicon .glyphicon-check</li>

<li><span class="glyphicon glyphicon-chevron-down"></span> .glyphicon .glyphicon-chevron-down</li>

<li><span class="glyphicon glyphicon-chevron-left"></span> .glyphicon .glyphicon-chevron-left</li>

<li><span class="glyphicon glyphicon-chevron-right"></span> .glyphicon .glyphicon-chevron-right</li>

<li><span class="glyphicon glyphicon-chevron-up"></span> .glyphicon .glyphicon-chevron-up</li>

<li><span class="glyphicon glyphicon-circle-arrow-down"></span> .glyphicon .glyphicon-circle-arrow-down</li>

<li><span class="glyphicon glyphicon-circle-arrow-left"></span> .glyphicon .glyphicon-circle-arrow-left</li>

<li><span class="glyphicon glyphicon-circle-arrow-right"></span> .glyphicon .glyphicon-circle-arrow-right</li>

<li><span class="glyphicon glyphicon-circle-arrow-up"></span> .glyphicon .glyphicon-circle-arrow-up</li>

<li><span class="glyphicon glyphicon-cloud"></span> .glyphicon .glyphicon-cloud</li>

<li><span class="glyphicon glyphicon-cloud-download"></span> .glyphicon .glyphicon-cloud-download</li>

<li><span class="glyphicon glyphicon-cloud-upload"></span> .glyphicon .glyphicon-cloud-upload</li>

<li><span class="glyphicon glyphicon-cog"></span> .glyphicon .glyphicon-cog</li>

<li><span class="glyphicon glyphicon-collapse-down"></span> .glyphicon .glyphicon-collapse-down</li>

<li><span class="glyphicon glyphicon-collapse-up"></span> .glyphicon .glyphicon-collapse-up</li>

<li><span class="glyphicon glyphicon-comment"></span> .glyphicon .glyphicon-comment</li>

<li><span class="glyphicon glyphicon-compressed"></span> .glyphicon .glyphicon-compressed</li>

<li><span class="glyphicon glyphicon-copyright-mark"></span> .glyphicon .glyphicon-copyright-mark</li>

<li><span class="glyphicon glyphicon-credit-card"></span> .glyphicon .glyphicon-credit-card</li>

<li><span class="glyphicon glyphicon-cutlery"></span> .glyphicon .glyphicon-cutlery</li>

<li><span class="glyphicon glyphicon-dashboard"></span> .glyphicon .glyphicon-dashboard</li>

<li><span class="glyphicon glyphicon-download"></span> .glyphicon .glyphicon-download</li>

<li><span class="glyphicon glyphicon-download-alt"></span> .glyphicon .glyphicon-download-alt</li>

<li><span class="glyphicon glyphicon-earphone"></span> .glyphicon .glyphicon-earphone</li>

<li><span class="glyphicon glyphicon-edit"></span> .glyphicon .glyphicon-edit</li>

<li><span class="glyphicon glyphicon-eject"></span> .glyphicon .glyphicon-eject</li>

<li><span class="glyphicon glyphicon-envelope"></span> .glyphicon .glyphicon-envelope</li>

<li><span class="glyphicon glyphicon-euro"></span> .glyphicon .glyphicon-euro</li>

<li><span class="glyphicon glyphicon-exclamation-sign"></span> .glyphicon .glyphicon-exclamation-sign</li>

<li><span class="glyphicon glyphicon-expand"></span> .glyphicon .glyphicon-expand</li>

<li><span class="glyphicon glyphicon-export"></span> .glyphicon .glyphicon-export</li>

<li><span class="glyphicon glyphicon-eye-close"></span> .glyphicon .glyphicon-eye-close</li>

<li><span class="glyphicon glyphicon-eye-open"></span> .glyphicon .glyphicon-eye-open</li>

<li><span class="glyphicon glyphicon-facetime-video"></span> .glyphicon .glyphicon-facetime-video</li>

<li><span class="glyphicon glyphicon-fast-backward"></span> .glyphicon .glyphicon-fast-backward</li>

<li><span class="glyphicon glyphicon-fast-forward"></span> .glyphicon .glyphicon-fast-forward</li>

<li><span class="glyphicon glyphicon-file"></span> .glyphicon .glyphicon-file</li>

<li><span class="glyphicon glyphicon-film"></span> .glyphicon .glyphicon-film</li>

<li><span class="glyphicon glyphicon-filter"></span> .glyphicon .glyphicon-filter</li>

<li><span class="glyphicon glyphicon-fire"></span> .glyphicon .glyphicon-fire</li>

<li><span class="glyphicon glyphicon-flag"></span> .glyphicon .glyphicon-flag</li>

<li><span class="glyphicon glyphicon-flash"></span> .glyphicon .glyphicon-flash</li>

<li><span class="glyphicon glyphicon-floppy-disk"></span> .glyphicon .glyphicon-floppy-disk</li>

<li><span class="glyphicon glyphicon-floppy-open"></span> .glyphicon .glyphicon-floppy-open</li>

<li><span class="glyphicon glyphicon-floppy-remove"></span> .glyphicon .glyphicon-floppy-remove</li>

<li><span class="glyphicon glyphicon-floppy-save"></span> .glyphicon .glyphicon-floppy-save</li>

<li><span class="glyphicon glyphicon-floppy-saved"></span> .glyphicon .glyphicon-floppy-saved</li>

<li><span class="glyphicon glyphicon-folder-close"></span> .glyphicon .glyphicon-folder-close</li>

<li><span class="glyphicon glyphicon-folder-open"></span> .glyphicon .glyphicon-folder-open</li>

<li><span class="glyphicon glyphicon-font"></span> .glyphicon .glyphicon-font</li>

<li><span class="glyphicon glyphicon-forward"></span> .glyphicon .glyphicon-forward</li>

<li><span class="glyphicon glyphicon-fullscreen"></span> .glyphicon .glyphicon-fullscreen</li>

<li><span class="glyphicon glyphicon-gbp"></span> .glyphicon .glyphicon-gbp</li>

<li><span class="glyphicon glyphicon-gift"></span> .glyphicon .glyphicon-gift</li>

<li><span class="glyphicon glyphicon-glass"></span> .glyphicon .glyphicon-glass</li>

<li><span class="glyphicon glyphicon-globe"></span> .glyphicon .glyphicon-globe</li>

<li><span class="glyphicon glyphicon-hand-down"></span> .glyphicon .glyphicon-hand-down</li>

<li><span class="glyphicon glyphicon-hand-left"></span> .glyphicon .glyphicon-hand-left</li>

100

<li><span class="glyphicon glyphicon-hand-right"></span> .glyphicon .glyphicon-hand-right</li>

101

<li><span class="glyphicon glyphicon-hand-up"></span> .glyphicon .glyphicon-hand-up</li>

102

<li><span class="glyphicon glyphicon-hd-video"></span> .glyphicon .glyphicon-hd-video</li>

103

<li><span class="glyphicon glyphicon-hdd"></span> .glyphicon .glyphicon-hdd</li>

104

<li><span class="glyphicon glyphicon-header"></span> .glyphicon .glyphicon-header</li>

105

<li><span class="glyphicon glyphicon-headphones"></span> .glyphicon .glyphicon-headphones</li>

106

<li><span class="glyphicon glyphicon-heart"></span> .glyphicon .glyphicon-heart</li>

107

<li><span class="glyphicon glyphicon-heart-empty"></span> .glyphicon .glyphicon-heart-empty</li>

108

<li><span class="glyphicon glyphicon-home"></span> .glyphicon .glyphicon-home</li>

109

<li><span class="glyphicon glyphicon-import"></span> .glyphicon .glyphicon-import</li>

110

<li><span class="glyphicon glyphicon-inbox"></span> .glyphicon .glyphicon-inbox</li>

111

<li><span class="glyphicon glyphicon-indent-left"></span> .glyphicon .glyphicon-indent-left</li>

112

<li><span class="glyphicon glyphicon-indent-right"></span> .glyphicon .glyphicon-indent-right</li>

113

<li><span class="glyphicon glyphicon-info-sign"></span> .glyphicon .glyphicon-info-sign</li>

114

<li><span class="glyphicon glyphicon-italic"></span> .glyphicon .glyphicon-italic</li>

115

<li><span class="glyphicon glyphicon-leaf"></span> .glyphicon .glyphicon-leaf</li>

116

<li><span class="glyphicon glyphicon-link"></span> .glyphicon .glyphicon-link</li>

117

<li><span class="glyphicon glyphicon-list"></span> .glyphicon .glyphicon-list</li>

118

<li><span class="glyphicon glyphicon-list-alt"></span> .glyphicon .glyphicon-list-alt</li>

119

<li><span class="glyphicon glyphicon-lock"></span> .glyphicon .glyphicon-lock</li>

120

<li><span class="glyphicon glyphicon-log-in"></span> .glyphicon .glyphicon-log-in</li>

121

<li><span class="glyphicon glyphicon-log-out"></span> .glyphicon .glyphicon-log-out</li>

122

<li><span class="glyphicon glyphicon-magnet"></span> .glyphicon .glyphicon-magnet</li>

123

<li><span class="glyphicon glyphicon-map-marker"></span> .glyphicon .glyphicon-map-marker</li>

124

<li><span class="glyphicon glyphicon-minus"></span> .glyphicon .glyphicon-minus</li>

125

<li><span class="glyphicon glyphicon-minus-sign"></span> .glyphicon .glyphicon-minus-sign</li>

126

<li><span class="glyphicon glyphicon-move"></span> .glyphicon .glyphicon-move</li>

127

<li><span class="glyphicon glyphicon-music"></span> .glyphicon .glyphicon-music</li>

128

<li><span class="glyphicon glyphicon-new-window"></span> .glyphicon .glyphicon-new-window</li>

129

<li><span class="glyphicon glyphicon-off"></span> .glyphicon .glyphicon-off</li>

130

<li><span class="glyphicon glyphicon-ok"></span> .glyphicon .glyphicon-ok</li>

131

<li><span class="glyphicon glyphicon-ok-circle"></span> .glyphicon .glyphicon-ok-circle</li>

132

<li><span class="glyphicon glyphicon-ok-sign"></span> .glyphicon .glyphicon-ok-sign</li>

133

<li><span class="glyphicon glyphicon-open"></span> .glyphicon .glyphicon-open</li>

134

<li><span class="glyphicon glyphicon-paperclip"></span> .glyphicon .glyphicon-paperclip</li>

135

<li><span class="glyphicon glyphicon-pause"></span> .glyphicon .glyphicon-pause</li>

136

<li><span class="glyphicon glyphicon-pencil"></span> .glyphicon .glyphicon-pencil</li>

137

<li><span class="glyphicon glyphicon-phone"></span> .glyphicon .glyphicon-phone</li>

138

<li><span class="glyphicon glyphicon-phone-alt"></span> .glyphicon .glyphicon-phone-alt</li>

139

<li><span class="glyphicon glyphicon-picture"></span> .glyphicon .glyphicon-picture</li>

140

<li><span class="glyphicon glyphicon-plane"></span> .glyphicon .glyphicon-plane</li>

141

<li><span class="glyphicon glyphicon-play"></span> .glyphicon .glyphicon-play</li>

142

<li><span class="glyphicon glyphicon-play-circle"></span> .glyphicon .glyphicon-play-circle</li>

143

<li><span class="glyphicon glyphicon-plus"></span> .glyphicon .glyphicon-plus</li>

144

<li><span class="glyphicon glyphicon-plus-sign"></span> .glyphicon .glyphicon-plus-sign</li>

145

<li><span class="glyphicon glyphicon-print"></span> .glyphicon .glyphicon-print</li>

146

<li><span class="glyphicon glyphicon-pushpin"></span> .glyphicon .glyphicon-pushpin</li>

147

<li><span class="glyphicon glyphicon-qrcode"></span> .glyphicon .glyphicon-qrcode</li>

148

<li><span class="glyphicon glyphicon-question-sign"></span> .glyphicon .glyphicon-question-sign</li>

149

<li><span class="glyphicon glyphicon-random"></span> .glyphicon .glyphicon-random</li>

150

<li><span class="glyphicon glyphicon-record"></span> .glyphicon .glyphicon-record</li>

151

<li><span class="glyphicon glyphicon-refresh"></span> .glyphicon .glyphicon-refresh</li>

152

<li><span class="glyphicon glyphicon-registration-mark"></span> .glyphicon .glyphicon-registration-mark</li>

153

<li><span class="glyphicon glyphicon-remove"></span> .glyphicon .glyphicon-remove</li>

154

<li><span class="glyphicon glyphicon-remove-circle"></span> .glyphicon .glyphicon-remove-circle</li>

155

<li><span class="glyphicon glyphicon-remove-sign"></span> .glyphicon .glyphicon-remove-sign</li>

156

<li><span class="glyphicon glyphicon-repeat"></span> .glyphicon .glyphicon-repeat</li>

157

<li><span class="glyphicon glyphicon-resize-full"></span> .glyphicon .glyphicon-resize-full</li>

158

<li><span class="glyphicon glyphicon-resize-horizontal"></span> .glyphicon .glyphicon-resize-horizontal</li>

159

<li><span class="glyphicon glyphicon-resize-small"></span> .glyphicon .glyphicon-resize-small</li>

160

<li><span class="glyphicon glyphicon-resize-vertical"></span> .glyphicon .glyphicon-resize-vertical</li>

161

<li><span class="glyphicon glyphicon-retweet"></span> .glyphicon .glyphicon-retweet</li>

162

<li><span class="glyphicon glyphicon-road"></span> .glyphicon .glyphicon-road</li>

163

<li><span class="glyphicon glyphicon-save"></span> .glyphicon .glyphicon-save</li>

164

<li><span class="glyphicon glyphicon-saved"></span> .glyphicon .glyphicon-saved</li>

165

<li><span class="glyphicon glyphicon-screenshot"></span> .glyphicon .glyphicon-screenshot</li>

166

<li><span class="glyphicon glyphicon-sd-video"></span> .glyphicon .glyphicon-sd-video</li>

167

<li><span class="glyphicon glyphicon-search"></span> .glyphicon .glyphicon-search</li>

168

<li><span class="glyphicon glyphicon-send"></span> .glyphicon .glyphicon-send</li>

169

<li><span class="glyphicon glyphicon-share"></span> .glyphicon .glyphicon-share</li>

170

<li><span class="glyphicon glyphicon-share-alt"></span> .glyphicon .glyphicon-share-alt</li>

171

<li><span class="glyphicon glyphicon-shopping-cart"></span> .glyphicon .glyphicon-shopping-cart</li>

172

<li><span class="glyphicon glyphicon-signal"></span> .glyphicon .glyphicon-signal</li>

173

<li><span class="glyphicon glyphicon-sort"></span> .glyphicon .glyphicon-sort</li>

174

<li><span class="glyphicon glyphicon-sort-by-alphabet"></span> .glyphicon .glyphicon-sort-by-alphabet</li>

175

<li><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span> .glyphicon .glyphicon-sort-by-alphabet-alt</li>

176

<li><span class="glyphicon glyphicon-sort-by-attributes"></span> .glyphicon .glyphicon-sort-by-attributes</li>

177

<li><span class="glyphicon glyphicon-sort-by-attributes-alt"></span> .glyphicon .glyphicon-sort-by-attributes-alt</li>

178

<li><span class="glyphicon glyphicon-sort-by-order"></span> .glyphicon .glyphicon-sort-by-order</li>

179

<li><span class="glyphicon glyphicon-sort-by-order-alt"></span> .glyphicon .glyphicon-sort-by-order-alt</li>

180

<li><span class="glyphicon glyphicon-sound-5-1"></span> .glyphicon .glyphicon-sound-5-1</li>

181

<li><span class="glyphicon glyphicon-sound-6-1"></span> .glyphicon .glyphicon-sound-6-1</li>

182

<li><span class="glyphicon glyphicon-sound-7-1"></span> .glyphicon .glyphicon-sound-7-1</li>

183

<li><span class="glyphicon glyphicon-sound-dolby"></span> .glyphicon .glyphicon-sound-dolby</li>

184

<li><span class="glyphicon glyphicon-sound-stereo"></span> .glyphicon .glyphicon-sound-stereo</li>

185

<li><span class="glyphicon glyphicon-star"></span> .glyphicon .glyphicon-star</li>

186

<li><span class="glyphicon glyphicon-star-empty"></span> .glyphicon .glyphicon-star-empty</li>

187

<li><span class="glyphicon glyphicon-stats"></span> .glyphicon .glyphicon-stats</li>

188

<li><span class="glyphicon glyphicon-step-backward"></span> .glyphicon .glyphicon-step-backward</li>

189

<li><span class="glyphicon glyphicon-step-forward"></span> .glyphicon .glyphicon-step-forward</li>

190

<li><span class="glyphicon glyphicon-stop"></span> .glyphicon .glyphicon-stop</li>

191

<li><span class="glyphicon glyphicon-subtitles"></span> .glyphicon .glyphicon-subtitles</li>

192

<li><span class="glyphicon glyphicon-tag"></span> .glyphicon .glyphicon-tag</li>

193

<li><span class="glyphicon glyphicon-tags"></span> .glyphicon .glyphicon-tags</li>

194

<li><span class="glyphicon glyphicon-tasks"></span> .glyphicon .glyphicon-tasks</li>

195

<li><span class="glyphicon glyphicon-text-height"></span> .glyphicon .glyphicon-text-height</li>

196

<li><span class="glyphicon glyphicon-text-width"></span> .glyphicon .glyphicon-text-width</li>

197

<li><span class="glyphicon glyphicon-th"></span> .glyphicon .glyphicon-th</li>

198

<li><span class="glyphicon glyphicon-th-large"></span> .glyphicon .glyphicon-th-large</li>

199

<li><span class="glyphicon glyphicon-th-list"></span> .glyphicon .glyphicon-th-list</li>

200

<li><span class="glyphicon glyphicon-thumbs-down"></span> .glyphicon .glyphicon-thumbs-down</li>

201

<li><span class="glyphicon glyphicon-thumbs-up"></span> .glyphicon .glyphicon-thumbs-up</li>

202

<li><span class="glyphicon glyphicon-time"></span> .glyphicon .glyphicon-time</li>

203

<li><span class="glyphicon glyphicon-tint"></span> .glyphicon .glyphicon-tint</li>

204

<li><span class="glyphicon glyphicon-tower"></span> .glyphicon .glyphicon-tower</li>

205

<li><span class="glyphicon glyphicon-transfer"></span> .glyphicon .glyphicon-transfer</li>

206

<li><span class="glyphicon glyphicon-trash"></span> .glyphicon .glyphicon-trash</li>

207

<li><span class="glyphicon glyphicon-tree-conifer"></span> .glyphicon .glyphicon-tree-conifer</li>

208

<li><span class="glyphicon glyphicon-tree-deciduous"></span> .glyphicon .glyphicon-tree-deciduous</li>

209

<li><span class="glyphicon glyphicon-unchecked"></span> .glyphicon .glyphicon-unchecked</li>

210

<li><span class="glyphicon glyphicon-upload"></span> .glyphicon .glyphicon-upload</li>

211

<li><span class="glyphicon glyphicon-usd"></span> .glyphicon .glyphicon-usd</li>

212

<li><span class="glyphicon glyphicon-user"></span> .glyphicon .glyphicon-user</li>

213

<li><span class="glyphicon glyphicon-volume-down"></span> .glyphicon .glyphicon-volume-down</li>

214

<li><span class="glyphicon glyphicon-volume-off"></span> .glyphicon .glyphicon-volume-off</li>

215

<li><span class="glyphicon glyphicon-volume-up"></span> .glyphicon .glyphicon-volume-up</li>

216

<li><span class="glyphicon glyphicon-warning-sign"></span> .glyphicon .glyphicon-warning-sign</li>

217

<li><span class="glyphicon glyphicon-wrench"></span> .glyphicon .glyphicon-wrench</li>

218

<li><span class="glyphicon glyphicon-zoom-in"></span> .glyphicon .glyphicon-zoom-in</li>

219

<li><span class="glyphicon glyphicon-zoom-out"></span> .glyphicon .glyphicon-zoom-out</li>

220

</ul>

221

222

223

224

<p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>

225

{% highlight html %}

226

227

{% endhighlight %}

228

229

230

<h2 id="glyphicons-examples">Examples</h2>

231

<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>

232

233

234

235

236

237

238

239

</div>

240

</div>

241

242

243

244

245

246

</div>

247

</div>

248

{% highlight html %}

249

250

<span class="glyphicon glyphicon-star"></span> Star

251

</button>

252

{% endhighlight %}

253

254

</div>

255

256

257

<!-- Dropdowns

258

================================================== -->

259

260

261

<h1 id="dropdowns">Dropdowns</h1>

262

</div>

263

<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>

264

265

<h3 id="dropdowns-example">Example</h3>

266

<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>

267

268

269

<a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

270

271

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

272

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>

273

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

274

275

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>

276

</ul>

277

</div>

278

</div>

279

{% highlight html %}

280

281

282

283

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

284

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>

285

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

286

287

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>

288

</ul>

289

</div>

290

{% endhighlight %}

291

292

<h3 id="dropdowns-alignment">Aligninment options</h3>

293

<p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>

294

{% highlight html %}

295

296

...

297

</ul>

298

{% endhighlight %}

299

300

<h3 id="dropdowns-headers">Headers</h3>

301

<p>Add a header to label sections of actions in any dropdown menu.</p>

302

303

304

<a id="dropdownMenu2" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

305

306

<li role="presentation" class="dropdown-header">Dropdown header</li>

307

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>

308

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>

309

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

310

311

<li role="presentation" class="dropdown-header">Dropdown header</li>

312

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>

313

</ul>

314

</div>

315

</div>

316

{% highlight html %}

317

318

<li role="presentation" class="dropdown-header">Dropdown header</li>

319

...

320

321

<li role="presentation" class="dropdown-header">Dropdown header</li>

322

...

323

</ul>

324

{% endhighlight %}

325

326

<h3 id="dropdowns-disabled">Disabled menu items</h3>

327

<p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>

328

329

330

<a id="dropdownMenu3" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

331

332

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>

333

<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>

334

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>

335

</ul>

336

</div>

337

</div>

338

{% highlight html %}

339

340

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>

341

<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>

342

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>

343

</ul>

344

{% endhighlight %}

345

</div>

346

347

348

349

<!-- Button Groups

350

================================================== -->

351

352

353

<h1 id="btn-groups">Button groups</h1>

354

</div>

355

<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>

356

357

358

<h4>Tooltips & popovers in button groups require special setting</h4>

359

<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>

360

</div>

361

362

<h3 id="btn-groups-single">Basic example</h3>

363

<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>

364

365

366

367

<button type="button" class="btn btn-default">Middle</button>

368

<button type="button" class="btn btn-default">Right</button>

369

</div>

370

</div>

371

{% highlight html %}

372

373

374

<button type="button" class="btn btn-default">Middle</button>

375

<button type="button" class="btn btn-default">Right</button>

376

</div>

377

{% endhighlight %}

378

379

<h3 id="btn-groups-toolbar">Button toolbar</h3>

380

<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>

381

382

383

384

385

386

387

388

</div>

389

390

391

392

393

</div>

394

395

396

</div>

397

</div>

398

</div>

399

{% highlight html %}

400

401

402

403

404

</div>

405

{% endhighlight %}

406

407

<h3 id="btn-groups-sizing">Sizing</h3>

408

<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>

409

410

411

412

413

<button type="button" class="btn btn-default">Middle</button>

414

<button type="button" class="btn btn-default">Right</button>

415

</div>

416

</div>

417

418

419

420

<button type="button" class="btn btn-default">Middle</button>

421

<button type="button" class="btn btn-default">Right</button>

422

</div>

423

</div>

424

425

426

427

<button type="button" class="btn btn-default">Middle</button>

428

<button type="button" class="btn btn-default">Right</button>

429

</div>

430

</div>

431

432

433

434

<button type="button" class="btn btn-default">Middle</button>

435

<button type="button" class="btn btn-default">Right</button>

436

</div>

437

</div>

438

</div>

439

{% highlight html %}

440

441

442

443

444

{% endhighlight %}

445

446

<h3 id="btn-groups-nested">Nesting</h3>

447

<p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>

448

449

450

451

452

453

454

455

Dropdown

456

457

</button>

458

459

<li><a href="#">Dropdown link</a></li>

460

<li><a href="#">Dropdown link</a></li>

461

</ul>

462

</div>

463

</div>

464

</div>

465

{% highlight html %}

466

467

468

469

470

471

472

Dropdown

473

474

</button>

475

476

<li><a href="#">Dropdown link</a></li>

477

<li><a href="#">Dropdown link</a></li>

478

</ul>

479

</div>

480

</div>

481

{% endhighlight %}

482

483

<h3 id="btn-groups-vertical">Vertical variation</h3>

484

<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>

485

486

487

<button type="button" class="btn btn-default">Button</button>

488

<button type="button" class="btn btn-default">Button</button>

489

490

491

Dropdown

492

493

</button>

494

495

<li><a href="#">Dropdown link</a></li>

496

<li><a href="#">Dropdown link</a></li>

497

</ul>

498

</div>

499

<button type="button" class="btn btn-default">Button</button>

500

<button type="button" class="btn btn-default">Button</button>

501

502

503

Dropdown

504

505

</button>

506

507

<li><a href="#">Dropdown link</a></li>

508

<li><a href="#">Dropdown link</a></li>

509

</ul>

510

</div>

511

512

513

Dropdown

514

515

</button>

516

517

<li><a href="#">Dropdown link</a></li>

518

<li><a href="#">Dropdown link</a></li>

519

</ul>

520

</div>

521

522

523

Dropdown

524

525

</button>

526

527

<li><a href="#">Dropdown link</a></li>

528

<li><a href="#">Dropdown link</a></li>

529

</ul>

530

</div>

531

</div>

532

</div>

533

{% highlight html %}

534

535

...

536

</div>

537

{% endhighlight %}

538

539

<h3 id="btn-groups-justified">Justified link variation</h3>

540

<p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p>

541

542

543

<h4>Element-specific usage</h4>

544

<p>This only works with <code><a></code> elements as the <code><button></code> doesn't pick up these styles.</p>

545

</div>

546

547

548

549

550

<a href="#" class="btn btn-default">Middle</a>

551

<a href="#" class="btn btn-default">Right</a>

552

</div>

553

</div>

554

{% highlight html %}

555

556

...

557

</div>

558

{% endhighlight %}

559

560

</div>

561

562

563

564

<!-- Split button dropdowns

565

================================================== -->

566

567

568

<h1 id="btn-dropdowns">Button dropdowns</h1>

569

</div>

570

<p class="lead">Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>

571

572

573

<h4>Plugin dependency</h4>

574

<p>Button dropdowns require the <a href="../javascript/#dropdowns">dropdown plugin</a> to be included in your version of Bootstrap.</p>

575

</div>

576

577

<h3 id="btn-dropdowns-single">Single button dropdowns</h3>

578

<p>Turn a button into a dropdown toggle with some basic markup changes.</p>

579

580

581

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>

582

583

<li><a href="#">Action</a></li>

584

<li><a href="#">Another action</a></li>

585

<li><a href="#">Something else here</a></li>

586

587

<li><a href="#">Separated link</a></li>

588

</ul>

589

</div>

590

591

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>

592

593

<li><a href="#">Action</a></li>

594

<li><a href="#">Another action</a></li>

595

<li><a href="#">Something else here</a></li>

596

597

<li><a href="#">Separated link</a></li>

598

</ul>

599

</div>

600

601

<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>

602

603

<li><a href="#">Action</a></li>

604

<li><a href="#">Another action</a></li>

605

<li><a href="#">Something else here</a></li>

606

607

<li><a href="#">Separated link</a></li>

608

</ul>

609

</div>

610

611

612

613

<li><a href="#">Action</a></li>

614

<li><a href="#">Another action</a></li>

615

<li><a href="#">Something else here</a></li>

616

617

<li><a href="#">Separated link</a></li>

618

</ul>

619

</div>

620

621

<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>

622

623

<li><a href="#">Action</a></li>

624

<li><a href="#">Another action</a></li>

625

<li><a href="#">Something else here</a></li>

626

627

<li><a href="#">Separated link</a></li>

628

</ul>

629

</div>

630

631

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>

632

633

<li><a href="#">Action</a></li>

634

<li><a href="#">Another action</a></li>

635

<li><a href="#">Something else here</a></li>

636

637

<li><a href="#">Separated link</a></li>

638

</ul>

639

</div>

640

</div>

641

{% highlight html %}

642

643

644

645

Action <span class="caret"></span>

646

</button>

647

648

<li><a href="#">Action</a></li>

649

<li><a href="#">Another action</a></li>

650

<li><a href="#">Something else here</a></li>

651

652

<li><a href="#">Separated link</a></li>

653

</ul>

654

</div>

655

{% endhighlight %}

656

657

<h3 id="btn-dropdowns-split">Split button dropdowns</h3>

658

<p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>

659

660

661

<button type="button" class="btn btn-default">Default</button>

662

663

664

<li><a href="#">Action</a></li>

665

<li><a href="#">Another action</a></li>

666

<li><a href="#">Something else here</a></li>

667

668

<li><a href="#">Separated link</a></li>

669

</ul>

670

</div>

671

672

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

673

674

675

<li><a href="#">Action</a></li>

676

<li><a href="#">Another action</a></li>

677

<li><a href="#">Something else here</a></li>

678

679

<li><a href="#">Separated link</a></li>

680

</ul>

681

</div>

682

683

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

684

685

686

<li><a href="#">Action</a></li>

687

<li><a href="#">Another action</a></li>

688

<li><a href="#">Something else here</a></li>

689

690

<li><a href="#">Separated link</a></li>

691

</ul>

692

</div>

693

694

695

696

697

<li><a href="#">Action</a></li>

698

<li><a href="#">Another action</a></li>

699

<li><a href="#">Something else here</a></li>

700

701

<li><a href="#">Separated link</a></li>

702

</ul>

703

</div>

704

705

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

706

707

708

<li><a href="#">Action</a></li>

709

<li><a href="#">Another action</a></li>

710

<li><a href="#">Something else here</a></li>

711

712

<li><a href="#">Separated link</a></li>

713

</ul>

714

</div>

715

716

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

717

718

719

<li><a href="#">Action</a></li>

720

<li><a href="#">Another action</a></li>

721

<li><a href="#">Something else here</a></li>

722

723

<li><a href="#">Separated link</a></li>

724

</ul>

725

</div>

726

</div>

727

{% highlight html %}

728

729

730

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

731

732

733

</button>

734

735

<li><a href="#">Action</a></li>

736

<li><a href="#">Another action</a></li>

737

<li><a href="#">Something else here</a></li>

738

739

<li><a href="#">Separated link</a></li>

740

</ul>

741

</div>

742

{% endhighlight %}

743

744

<h3 id="btn-dropdowns-sizing">Sizing</h3>

745

<p>Button dropdowns work with buttons of all sizes.</p>

746

747

748

749

750

Large button <span class="caret"></span>

751

</button>

752

753

<li><a href="#">Action</a></li>

754

<li><a href="#">Another action</a></li>

755

<li><a href="#">Something else here</a></li>

756

757

<li><a href="#">Separated link</a></li>

758

</ul>

759

</div>

760

</div>

761

762

763

764

Small button <span class="caret"></span>

765

</button>

766

767

<li><a href="#">Action</a></li>

768

<li><a href="#">Another action</a></li>

769

<li><a href="#">Something else here</a></li>

770

771

<li><a href="#">Separated link</a></li>

772

</ul>

773

</div>

774

</div>

775

776

777

778

Extra small button <span class="caret"></span>

779

</button>

780

781

<li><a href="#">Action</a></li>

782

<li><a href="#">Another action</a></li>

783

<li><a href="#">Something else here</a></li>

784

785

<li><a href="#">Separated link</a></li>

786

</ul>

787

</div>

788

</div>

789

</div>

790

{% highlight html %}

791

792

793

794

Large button <span class="caret"></span>

795

</button>

796

797

...

798

</ul>

799

</div>

800

801

802

803

804

Small button <span class="caret"></span>

805

</button>

806

807

...

808

</ul>

809

</div>

810

811

812

813

814

Extra small button <span class="caret"></span>

815

</button>

816

817

...

818

</ul>

819

</div>

820

{% endhighlight %}

821

822

<h3 id="btn-dropdowns-dropup">Dropup variation</h3>

823

<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>

824

825

826

827

<button type="button" class="btn btn-default">Dropup</button>

828

829

830

<li><a href="#">Action</a></li>

831

<li><a href="#">Another action</a></li>

832

<li><a href="#">Something else here</a></li>

833

834

<li><a href="#">Separated link</a></li>

835

</ul>

836

</div>

837

838

<button type="button" class="btn btn-primary">Right dropup</button>

839

840

841

<li><a href="#">Action</a></li>

842

<li><a href="#">Another action</a></li>

843

<li><a href="#">Something else here</a></li>

844

845

<li><a href="#">Separated link</a></li>

846

</ul>

847

</div>

848

</div>

849

</div>

850

{% highlight html %}

851

852

<button type="button" class="btn btn-default">Dropup</button>

853

854

855

</button>

856

857

858

</ul>

859

</div>

860

{% endhighlight %}

861

862

</div>

863

864

865

866

867

<!-- Input groups

868

================================================== -->

869

870

871

<h1 id="input-groups">Input groups</h1>

872

</div>

873

<p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a <code>.form-control</code>.</p>

874

875

876

<h4>Cross-browser compatibility</h4>

877

<p>Avoid using <code><select></code> elements here as they cannot be fully styled in WebKit browsers.</p>

878

</div>

879

880

<h4>Tooltips & popovers in input groups require special setting</h4>

881

<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>

882

</div>

883

884

<h2 id="input-groups-basic">Basic example</h2>

885

886

887

888

889

</div>

890

<br>

891

892

893

894

</div>

895

<br>

896

897

898

899

900

</div>

901

</form>

902

{% highlight html %}

903

904

905

906

</div>

907

908

909

910

911

</div>

912

913

914

915

916

917

</div>

918

{% endhighlight %}

919

920

921

<h2 id="input-groups-sizing">Sizing</h2>

922

<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>

923

924

925

926

927

</div>

928

<br>

929

930

931

932

</div>

933

<br>

934

935

936

937

</div>

938

</form>

939

{% highlight html %}

940

941

942

943

</div>

944

945

946

947

948

</div>

949

950

951

952

953

</div>

954

{% endhighlight %}

955

956

957

<h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>

958

<p>Place any checkbox or radio option within an input group's addon instead of text.</p>

959

960

961

962

963

964

965

</span>

966

967

</div>

968

</div>

969

970

971

972

973

</span>

974

975

</div>

976

</div>

977

</div>

978

</form>

979

{% highlight html %}

980

981

982

983

984

985

</span>

986

987

</div>

988

</div>

989

990

991

992

993

</span>

994

995

</div>

996

</div>

997

</div>

998

{% endhighlight %}

999

1000

1001

<h2 id="input-groups-buttons">Button addons</h2>

1002

<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>

1003

1004

1005

1006

1007

1008

1009

</span>

1010

1011

</div>

1012

</div>

1013

1014

1015

1016

1017

1018

</span>

1019

</div>

1020

</div>

1021

</div>

1022

</form>

1023

{% highlight html %}

1024

1025

1026

1027

1028

1029

</span>

1030

1031

</div>

1032

</div>

1033

1034

1035

1036

1037

1038

</span>

1039

</div>

1040

</div>

1041

</div>

1042

{% endhighlight %}

1043

1044

<h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>

1045

<p></p>

1046

1047

1048

1049

1050

1051

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>

1052

1053

<li><a href="#">Action</a></li>

1054

<li><a href="#">Another action</a></li>

1055

<li><a href="#">Something else here</a></li>

1056

1057

<li><a href="#">Separated link</a></li>

1058

</ul>

1059

</div>

1060

1061

</div>

1062

</div>

1063

1064

1065

1066

1067

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>

1068

1069

<li><a href="#">Action</a></li>

1070

<li><a href="#">Another action</a></li>

1071

<li><a href="#">Something else here</a></li>

1072

1073

<li><a href="#">Separated link</a></li>

1074

</ul>

1075

</div>

1076

</div>

1077

</div>

1078

</div>

1079

</form>

1080

{% highlight html %}

1081

1082

1083

1084

1085

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>

1086

1087

<li><a href="#">Action</a></li>

1088

<li><a href="#">Another action</a></li>

1089

<li><a href="#">Something else here</a></li>

1090

1091

<li><a href="#">Separated link</a></li>

1092

</ul>

1093

</div>

1094

1095

</div>

1096

</div>

1097

1098

1099

1100

1101

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>

1102

1103

<li><a href="#">Action</a></li>

1104

<li><a href="#">Another action</a></li>

1105

<li><a href="#">Something else here</a></li>

1106

1107

<li><a href="#">Separated link</a></li>

1108

</ul>

1109

</div>

1110

</div>

1111

</div>

1112

</div>

1113

{% endhighlight %}

1114

1115

<h2 id="input-groups-buttons-segmented">Segmented buttons</h2>

1116

1117

1118

1119

1120

1121

<button type="button" class="btn btn-default" tabindex="-1">Action</button>

1122

1123

1124

</button>

1125

1126

<li><a href="#">Action</a></li>

1127

<li><a href="#">Another action</a></li>

1128

<li><a href="#">Something else here</a></li>

1129

1130

<li><a href="#">Separated link</a></li>

1131

</ul>

1132

</div>

1133

1134

</div>

1135

</div>

1136

1137

1138

1139

1140

<button type="button" class="btn btn-default" tabindex="-1">Action</button>

1141

1142

1143

</button>

1144

1145

<li><a href="#">Action</a></li>

1146

<li><a href="#">Another action</a></li>

1147

<li><a href="#">Something else here</a></li>

1148

1149

<li><a href="#">Separated link</a></li>

1150

</ul>

1151

</div>

1152

</div>

1153

</div>

1154

</div>

1155

</form>

1156

{% highlight html %}

1157

1158

1159

1160

</div>

1161

1162

</div>

1163

1164

1165

1166

1167

1168

</div>

1169

</div>

1170

{% endhighlight %}

1171

1172

</div>

1173

1174

1175

1176

<!-- Navs

1177

================================================== -->

1178

1179

1180

1181

</div>

1182

1183

<p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>

1184

1185

1186

<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>

1187

1188

1189

1190

<li><a href="#">Profile</a></li>

1191

<li><a href="#">Messages</a></li>

1192

</ul>

1193

</div>

1194

{% highlight html %}

1195

1196

1197

<li><a href="#">Profile</a></li>

1198

<li><a href="#">Messages</a></li>

1199

</ul>

1200

{% endhighlight %}

1201

1202

<h2 id="nav-pills">Pills</h2>

1203

<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>

1204

1205

1206

1207

<li><a href="#">Profile</a></li>

1208

<li><a href="#">Messages</a></li>

1209

</ul>

1210

</div>

1211

{% highlight html %}

1212

1213

1214

<li><a href="#">Profile</a></li>

1215

<li><a href="#">Messages</a></li>

1216

</ul>

1217

{% endhighlight %}

1218

<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>

1219

1220

1221

1222

<li><a href="#">Profile</a></li>

1223

<li><a href="#">Messages</a></li>

1224

</ul>

1225

</div>

1226

{% highlight html %}

1227

1228

...

1229

</ul>

1230

{% endhighlight %}

1231

1232

1233

<h2 id="nav-justified">Justified</h2>

1234

<p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>

1235

1236

1237

1238

<li><a href="#">Profile</a></li>

1239

<li><a href="#">Messages</a></li>

1240

</ul>

1241

<br>

1242

1243

1244

<li><a href="#">Profile</a></li>

1245

<li><a href="#">Messages</a></li>

1246

</ul>

1247

</div>

1248

{% highlight html %}

1249

1250

...

1251

</ul>

1252

1253

...

1254

</ul>

1255

{% endhighlight %}

1256

1257

1258

<h2 id="nav-disabled-links">Disabled links</h2>

1259

<p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p>

1260

1261

1262

<h4>Link functionality not impacted</h4>

1263

<p>This class will only change the <code><a></code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>

1264

</div>

1265

1266

1267

1268

<li><a href="#">Clickable link</a></li>

1269

<li><a href="#">Clickable link</a></li>

1270

<li class="disabled"><a href="#">Disabled link</a></li>

1271

</ul>

1272

</div>

1273

{% highlight html %}

1274

1275

...

1276

<li class="disabled"><a href="#">Disabled link</a></li>

1277

...

1278

</ul>

1279

{% endhighlight %}

1280

1281

1282

<h2 id="nav-dropdowns">Using dropdowns</h2>

1283

<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>

1284

1285

<h3>Tabs with dropdowns</h3>

1286

1287

1288

1289

1290

1291

1292

Dropdown <span class="caret"></span>

1293

</a>

1294

1295

<li><a href="#">Action</a></li>

1296

<li><a href="#">Another action</a></li>

1297

<li><a href="#">Something else here</a></li>

1298

1299

<li><a href="#">Separated link</a></li>

1300

</ul>

1301

</li>

1302

</ul>

1303

</div>

1304

{% highlight html %}

1305

1306

...

1307

1308

1309

Dropdown <span class="caret"></span>

1310

</a>

1311

1312

...

1313

</ul>

1314

</li>

1315

...

1316

</ul>

1317

{% endhighlight %}

1318

1319

<h3>Pills with dropdowns</h3>

1320

1321

1322

1323

1324

1325

1326

Dropdown <span class="caret"></span>

1327

</a>

1328

1329

<li><a href="#">Action</a></li>

1330

<li><a href="#">Another action</a></li>

1331

<li><a href="#">Something else here</a></li>

1332

1333

<li><a href="#">Separated link</a></li>

1334

</ul>

1335

</li>

1336

</ul>

1337

</div>

1338

{% highlight html %}

1339

1340

...

1341

1342

1343

Dropdown <span class="caret"></span>

1344

</a>

1345

1346

...

1347

</ul>

1348

</li>

1349

...

1350

</ul>

1351

{% endhighlight %}

1352

1353

</div>

1354

1355

1356

1357

<!-- Navbar

1358

================================================== -->

1359

1360

1361

<h1 id="navbar">Navbar</h1>

1362

</div>

1363

1364

<h2 id="navbar-default">Default navbar</h2>

1365

<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>

1366

1367

1368

<h4>Customize the collapsing point</h4>

1369

<p>Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</p>

1370

</div>

1371

1372

1373

1374

1375

1376

1377

<span class="sr-only">Toggle navigation</span>

1378

1379

1380

1381

</button>

1382

<a class="navbar-brand" href="#">Brand</a>

1383

</div>

1384

1385

1386

1387

1388

1389

1390

1391

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

1392

1393

<li><a href="#">Action</a></li>

1394

<li><a href="#">Another action</a></li>

1395

<li><a href="#">Something else here</a></li>

1396

<li><a href="#">Separated link</a></li>

1397

<li><a href="#">One more separated link</a></li>

1398

</ul>

1399

</li>

1400

</ul>

1401

1402

1403

1404

</div>

1405

<button type="submit" class="btn btn-default">Submit</button>

1406

</form>

1407

1408

1409

1410

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

1411

1412

<li><a href="#">Action</a></li>

1413

<li><a href="#">Another action</a></li>

1414

<li><a href="#">Something else here</a></li>

1415

<li><a href="#">Separated link</a></li>

1416

</ul>

1417

</li>

1418

</ul>

1419

</div>

1420

</nav>

1421

</div>

1422

{% highlight html %}

1423

1424

1425

1426

1427

<span class="sr-only">Toggle navigation</span>

1428

1429

1430

1431

</button>

1432

<a class="navbar-brand" href="#">Brand</a>

1433

</div>

1434

1435

1436

1437

1438

1439

1440

1441

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

1442

1443

<li><a href="#">Action</a></li>

1444

<li><a href="#">Another action</a></li>

1445

<li><a href="#">Something else here</a></li>

1446

<li><a href="#">Separated link</a></li>

1447

<li><a href="#">One more separated link</a></li>

1448

</ul>

1449

</li>

1450

</ul>

1451

1452

1453

1454

</div>

1455

<button type="submit" class="btn btn-default">Submit</button>

1456

</form>

1457

1458

1459

1460

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

1461

1462

<li><a href="#">Action</a></li>

1463

<li><a href="#">Another action</a></li>

1464

<li><a href="#">Something else here</a></li>

1465

<li><a href="#">Separated link</a></li>

1466

</ul>

1467

</li>

1468

</ul>

1469

</div>

1470

</nav>

1471

{% endhighlight %}

1472

1473

1474

<h4>Plugin dependency</h4>

1475

<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>

1476

</div>

1477

1478

1479

<h4>Make navbars accessible</h4>

1480

<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>

1481

</div>

1482

1483

1484

<h2 id="navbar-buttons">Buttons</h2>

1485

<p>For buttons not residing in a <code><form></code>, add this class to vertically center buttons within a navbar.</p>

1486

1487

1488

1489

1490

<span class="sr-only">Toggle navigation</span>

1491

1492

1493

1494

</button>

1495

<a class="navbar-brand" href="#">Brand</a>

1496

</div>

1497

1498

1499

</div>

1500

</nav>

1501

</div>

1502

{% highlight html %}

1503

1504

{% endhighlight %}

1505

1506

1507

1508

<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>

1509

1510

1511

1512

1513

<span class="sr-only">Toggle navigation</span>

1514

1515

1516

1517

</button>

1518

<a class="navbar-brand" href="#">Brand</a>

1519

</div>

1520

1521

<p class="navbar-text">Signed in as Mark Otto</p>

1522

</div>

1523

</nav>

1524

</div>

1525

{% highlight html %}

1526

<p class="navbar-text">Signed in as Mark Otto</p>

1527

{% endhighlight %}

1528

1529

1530

<h2 id="navbar-links">Non-nav links</h2>

1531

<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>

1532

1533

1534

1535

1536

<span class="sr-only">Toggle navigation</span>

1537

1538

1539

1540

</button>

1541

<a class="navbar-brand" href="#">Brand</a>

1542

</div>

1543

1544

<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

1545

</div>

1546

</nav>

1547

</div>

1548

{% highlight html %}

1549

<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

1550

{% endhighlight %}

1551

1552

1553

<h2 id="navbar-component-alignment">Component alignment</h2>

1554

<p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p>

1555

<p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p>

1556

1557

1558

<h2 id="navbar-fixed-top">Fixed to top</h2>

1559

<p>Add <code>.navbar-fixed-top</code>.</p>

1560

1561

1562

1563

1564

1565

<span class="sr-only">Toggle navigation</span>

1566

1567

1568

1569

</button>

1570

<a class="navbar-brand" href="#">Brand</a>

1571

</div>

1572

1573

1574

1575

1576

1577

1578

1579

</ul>

1580

</div>

1581

</nav>

1582

</div>

1583

{% highlight html %}

1584

1585

...

1586

</nav>

1587

{% endhighlight %}

1588

1589

1590

<h4>Body padding required</h4>

1591

<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>

1592

{% highlight css %}

1593

body { padding-top: 70px; }

1594

{% endhighlight %}

1595

<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>

1596

</div>

1597

1598

1599

<h2 id="navbar-fixed-bottom">Fixed to bottom</h2>

1600

<p>Add <code>.navbar-fixed-bottom</code> instead.</p>

1601

1602

1603

1604

1605

1606

<span class="sr-only">Toggle navigation</span>

1607

1608

1609

1610

</button>

1611

<a class="navbar-brand" href="#">Brand</a>

1612

</div>

1613

1614

1615

1616

1617

1618

1619

1620

</ul>

1621

</div>

1622

</nav>

1623

</div>

1624

{% highlight html %}

1625

1626

...

1627

</nav>

1628

{% endhighlight %}

1629

1630

1631

<h4>Body padding required</h4>

1632

<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code><body></code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>

1633

{% highlight css %}

1634

body { padding-bottom: 70px; }

1635

{% endhighlight %}

1636

<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>

1637

</div>

1638

1639

1640

<h2 id="navbar-static-top">Static top</h2>

1641

<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>

1642

1643

1644

1645

1646

1647

<span class="sr-only">Toggle navigation</span>

1648

1649

1650

1651

</button>

1652

<a class="navbar-brand" href="#">Brand</a>

1653

</div>

1654

1655

1656

1657

1658

1659

1660

1661

</ul>

1662

</div>

1663

</nav>

1664

</div>

1665

{% highlight html %}

1666

1667

...

1668

</nav>

1669

{% endhighlight %}

1670

1671

1672

<h2 id="navbar-inverted">Inverted navbar</h2>

1673

<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>

1674

1675

1676

1677

1678

1679

<span class="sr-only">Toggle navigation</span>

1680

1681

1682

1683

</button>

1684

<a class="navbar-brand" href="#">Brand</a>

1685

</div>

1686

1687

1688

1689

1690

1691

1692

1693

</ul>

1694

</div>

1695

</nav>

1696

</div>

1697

{% highlight html %}

1698

1699

...

1700

</nav>

1701

{% endhighlight %}

1702

1703

</div>

1704

1705

1706

1707

<!-- Breadcrumbs

1708

================================================== -->

1709

1710

1711

<h1 id="breadcrumbs">Breadcrumbs <small></small></h1>

1712

</div>

1713

<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>

1714

<p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>

1715

1716

1717

1718

</ol>

1719

1720

1721

<li class="active">Library</li>

1722

</ol>

1723

1724

1725

<li><a href="#">Library</a></li>

1726

1727

</ol>

1728

</div>

1729

{% highlight html %}

1730

1731

1732

<li><a href="#">Library</a></li>

1733

1734

</ol>

1735

{% endhighlight %}

1736

</div>

1737

1738

1739

1740

<!-- Pagination

1741

================================================== -->

1742

1743

1744

<h1 id="pagination">Pagination</h1>

1745

</div>

1746

<p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="#pagination-pager">pager alternative</a>.</p>

1747

1748

<h2 id="pagination-default">Default pagination</h2>

1749

<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>

1750

1751

1752

1753

1754

1755

1756

1757

1758

1759

</ul>

1760

</div>

1761

{% highlight html %}

1762

1763

1764

1765

1766

1767

1768

1769

1770

</ul>

1771

{% endhighlight %}

1772

1773

<h3>Disabled and active states</h3>

1774

<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>

1775

1776

1777

1778

<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>

1779

1780

1781

1782

1783

1784

</ul>

1785

</div>

1786

{% highlight html %}

1787

1788

1789

<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>

1790

...

1791

</ul>

1792

{% endhighlight %}

1793

<p>You can optionally swap out active or disabled anchors for <code><span></code> to remove click functionality while retaining intended styles.</p>

1794

{% highlight html %}

1795

1796

1797

<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>

1798

...

1799

</ul>

1800

{% endhighlight %}

1801

1802

1803

<h3>Sizing</h3>

1804

<p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>

1805

1806

<div>

1807

1808

1809

1810

1811

1812

1813

1814

1815

</ul>

1816

</div>

1817

<div>

1818

1819

1820

1821

1822

1823

1824

1825

1826

</ul>

1827

</div>

1828

<div>

1829

1830

1831

1832

1833

1834

1835

1836

1837

</ul>

1838

</div>

1839

</div>

1840

{% highlight html %}

1841

1842

1843

1844

{% endhighlight %}

1845

1846

1847

<h2 id="pagination-pager">Pager</h2>

1848

<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>

1849

1850

<h3>Default example</h3>

1851

<p>By default, the pager centers links.</p>

1852

1853

1854

<li><a href="#">Previous</a></li>

1855

1856

</ul>

1857

</div>

1858

{% highlight html %}

1859

1860

<li><a href="#">Previous</a></li>

1861

1862

</ul>

1863

{% endhighlight %}

1864

1865

<h3>Aligned links</h3>

1866

<p>Alternatively, you can align each link to the sides:</p>

1867

1868

1869

<li class="previous"><a href="#">← Older</a></li>

1870

<li class="next"><a href="#">Newer →</a></li>

1871

</ul>

1872

</div>

1873

{% highlight html %}

1874

1875

<li class="previous"><a href="#">← Older</a></li>

1876

<li class="next"><a href="#">Newer →</a></li>

1877

</ul>

1878

{% endhighlight %}

1879

1880

1881

<h3>Optional disabled state</h3>

1882

<p>Pager links also use the general <code>.disabled</code> utility class from the pagination.</p>

1883

1884

1885

<li class="previous disabled"><a href="#">← Older</a></li>

1886

<li class="next"><a href="#">Newer →</a></li>

1887

</ul>

1888

</div>

1889

{% highlight html %}

1890

1891

<li class="previous disabled"><a href="#">← Older</a></li>

1892

<li class="next"><a href="#">Newer →</a></li>

1893

</ul>

1894

{% endhighlight %}

1895

</div>

1896

1897

1898

1899

<!-- Labels

1900

================================================== -->

1901

1902

1903

<h1 id="labels">Labels</h1>

1904

</div>

1905

1906

1907

<h3>Example</h3>

1908

1909

<h1>Example heading <span class="label label-default">New</span></h1>

1910

<h2>Example heading <span class="label label-default">New</span></h2>

1911

<h3>Example heading <span class="label label-default">New</span></h3>

1912

<h4>Example heading <span class="label label-default">New</span></h4>

1913

<h5>Example heading <span class="label label-default">New</span></h5>

1914

<h6>Example heading <span class="label label-default">New</span></h6>

1915

</div>

1916

{% highlight html %}

1917

<h3>Example heading <span class="label label-default">New</span></h3>

1918

{% endhighlight %}

1919

1920

<h3>Available variations</h3>

1921

<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>

1922

1923

<span class="label label-default">Default</span>

1924

<span class="label label-primary">Primary</span>

1925

<span class="label label-success">Success</span>

1926

1927

<span class="label label-warning">Warning</span>

1928

<span class="label label-danger">Danger</span>

1929

</div>

1930

{% highlight html %}

1931

<span class="label label-default">Default</span>

1932

<span class="label label-primary">Primary</span>

1933

<span class="label label-success">Success</span>

1934

1935

<span class="label label-warning">Warning</span>

1936

<span class="label label-danger">Danger</span>

1937

{% endhighlight %}

1938

1939

</div>

1940

1941

1942

1943

<!-- Badges

1944

================================================== -->

1945

1946

1947

<h1 id="badges">Badges</h1>

1948

</div>

1949

<p class="lead">Easily highlight new or unread items by adding a <code><span class="badge"></code> to links, Bootstrap navs, and more.</p>

1950

1951

1952

<a href="#">Inbox <span class="badge">42</span></a>

1953

</div>

1954

{% highlight html %}

1955

<a href="#">Inbox <span class="badge">42</span></a>

1956

{% endhighlight %}

1957

1958

<h4>Self collapsing</h4>

1959

<p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>

1960

1961

1962

<h4>Cross-browser compatibility</h4>

1963

<p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>

1964

</div>

1965

1966

<h4>Adapts to active nav states</h4>

1967

<p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>

1968

1969

1970

1971

<li><a href="#">Profile</a></li>

1972

<li><a href="#">Messages <span class="badge">3</span></a></li>

1973

</ul>

1974

<br>

1975

1976

1977

1978

1979

Home

1980

</a>

1981

</li>

1982

<li><a href="#">Profile</a></li>

1983

<li>

1984

1985

1986

Messages

1987

</a>

1988

</li>

1989

</ul>

1990

</div>

1991

{% highlight html %}

1992

1993

1994

1995

1996

Home

1997

</a>

1998

</li>

1999

...

2000

</ul>

2001

{% endhighlight %}

2002

</div>

2003

2004

2005

2006

<!-- Jumbotron

2007

================================================== -->

2008

2009

2010

<h1 id="jumbotron">Jumbotron</h1>

2011

</div>

2012

<p>A lightweight, flexible component that can optional extend the entire viewport to showcase key content on your site. To make the jumbotron full width, don't include it within a <code>.container</code>. Placing it within a container will keep it at the width of the rest of your content and provide rounded corners.</p>

2013

2014

2015

2016

<h1>Hello, world!</h1>

2017

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

2018

<p><a class="btn btn-primary btn-lg">Learn more</a></p>

2019

</div>

2020

</div>

2021

</div>

2022

{% highlight html %}

2023

2024

2025

<h1>Hello, world!</h1>

2026

2027

<p><a class="btn btn-primary btn-lg">Learn more</a></p>

2028

</div>

2029

</div>

2030

{% endhighlight %}

2031

</div>

2032

2033

2034

2035

<!-- Page header

2036

================================================== -->

2037

2038

2039

<h1 id="page-header">Page header</h1>

2040

</div>

2041

<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code> element, as well as most other components (with additional styles).</p>

2042

2043

2044

<h1>Example page header <small>Subtext for header</small></h1>

2045

</div>

2046

</div>

2047

{% highlight html %}

2048

2049

<h1>Example page header <small>Subtext for header</small></h1>

2050

</div>

2051

{% endhighlight %}

2052

</div>

2053

2054

2055

2056

<!-- Thumbnails

2057

================================================== -->

2058

2059

2060

<h1 id="thumbnails">Thumbnails</h1>

2061

</div>

2062

<p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>

2063

2064

<h3 id="thumbnails-default">Default example</h3>

2065

<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>

2066

2067

2068

2069

2070

2071

</a>

2072

</div>

2073

2074

2075

2076

</a>

2077

</div>

2078

2079

2080

2081

</a>

2082

</div>

2083

2084

2085

2086

</a>

2087

</div>

2088

</div>

2089

</div>

2090

{% highlight html %}

2091

2092

2093

2094

2095

</a>

2096

</div>

2097

...

2098

</div>

2099

{% endhighlight %}

2100

2101

<h3 id="thumbnails-custom-content">Custom content</h3>

2102

<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>

2103

2104

2105

2106

2107

2108

2109

<h3>Thumbnail label</h3>

2110

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

2111

<p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>

2112

</div>

2113

</div>

2114

</div>

2115

2116

2117

2118

2119

<h3>Thumbnail label</h3>

2120

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

2121

<p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>

2122

</div>

2123

</div>

2124

</div>

2125

2126

2127

2128

2129

<h3>Thumbnail label</h3>

2130

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

2131

<p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>

2132

</div>

2133

</div>

2134

</div>

2135

</div>

2136

</div>

2137

{% highlight html %}

2138

2139

2140

2141

2142

2143

<h3>Thumbnail label</h3>

2144

2145

<p><a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-default">Button</a></p>

2146

</div>

2147

</div>

2148

</div>

2149

</div>

2150

{% endhighlight %}

2151

</div>

2152

2153

2154

2155

2156

<!-- Alerts

2157

================================================== -->

2158

2159

2160

<h1 id="alerts">Alerts</h1>

2161

</div>

2162

<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>

2163

2164

<h2 id="alerts-examples">Examples</h2>

2165

<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>

2166

2167

2168

<h4>No default class</h4>

2169

<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>

2170

</div>

2171

2172

2173

2174

<strong>Well done!</strong> You successfully read this important alert message.

2175

</div>

2176

2177

<strong>Heads up!</strong> This alert needs your attention, but it's not super important.

2178

</div>

2179

2180

<strong>Warning!</strong> Best check yo self, you're not looking too good.

2181

</div>

2182

2183

<strong>Oh snap!</strong> Change a few things up and try submitting again.

2184

</div>

2185

</div>

2186

{% highlight html %}

2187

2188

2189

2190

2191

{% endhighlight %}

2192

2193

<h2 id="alerts-dismissable">Dismissable alerts</h2>

2194

<p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>

2195

2196

2197

2198

<strong>Warning!</strong> Best check yo self, you're not looking too good.

2199

</div>

2200

</div>

2201

{% highlight html %}

2202

2203

2204

<strong>Warning!</strong> Best check yo self, you're not looking too good.

2205

</div>

2206

{% endhighlight %}

2207

2208

2209

<h4>Ensure proper behavior across all devices</h4>

2210

<p>Be sure to use the <code><button></code> element with the <code>data-dismiss="alert"</code> data attribute.</p>

2211

</div>

2212

2213

<h2 id="alerts-links">Links in alerts</h2>

2214

<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>

2215

2216

2217

<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.

2218

</div>

2219

2220

<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.

2221

</div>

2222

2223

<strong>Warning!</strong> Best check yo self, you're <a href="#" class="alert-link">not looking too good</a>.

2224

</div>

2225

2226

<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.

2227

</div>

2228

</div>

2229

{% highlight html %}

2230

2231

2232

</div>

2233

2234

2235

</div>

2236

2237

2238

</div>

2239

2240

2241

</div>

2242

{% endhighlight %}

2243

</div>

2244

2245

2246

2247

2248

<!-- Progress bars

2249

================================================== -->

2250

2251

2252

<h1 id="progress">Progress bars</h1>

2253

</div>

2254

<p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>

2255

2256

2257

<h4>Cross-browser compatibility</h4>

2258

<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>

2259

</div>

2260

2261

<h3 id="progress-basic">Basic example</h3>

2262

<p>Default progress bar.</p>

2263

2264

2265

2266

<span class="sr-only">60% Complete</span>

2267

</div>

2268

</div>

2269

</div>

2270

{% highlight html %}

2271

2272

2273

<span class="sr-only">60% Complete</span>

2274

</div>

2275

</div>

2276

{% endhighlight %}

2277

2278

<h3 id="progress-alternatives">Contextual alternatives</h3>

2279

<p>Progress bars use some of the same button and alert classes for consistent styles.</p>

2280

2281

2282

2283

<span class="sr-only">40% Complete (success)</span>

2284

</div>

2285

</div>

2286

2287

2288

<span class="sr-only">20% Complete</span>

2289

</div>

2290

</div>

2291

2292

2293

<span class="sr-only">60% Complete (warning)</span>

2294

</div>

2295

</div>

2296

2297

2298

<span class="sr-only">80% Complete (danger)</span>

2299

</div>

2300

</div>

2301

</div>

2302

{% highlight html %}

2303

2304

2305

<span class="sr-only">40% Complete (success)</span>

2306

</div>

2307

</div>

2308

2309

2310

<span class="sr-only">20% Complete</span>

2311

</div>

2312

</div>

2313

2314

2315

<span class="sr-only">60% Complete (warning)</span>

2316

</div>

2317

</div>

2318

2319

2320

<span class="sr-only">80% Complete</span>

2321

</div>

2322

</div>

2323

{% endhighlight %}

2324

2325

<h3 id="progress-striped">Striped</h3>

2326

<p>Uses a gradient to create a striped effect. Not available in IE8.</p>

2327

2328

2329

2330

<span class="sr-only">40% Complete (success)</span>

2331

</div>

2332

</div>

2333

2334

2335

<span class="sr-only">20% Complete</span>

2336

</div>

2337

</div>

2338

2339

2340

<span class="sr-only">60% Complete (warning)</span>

2341

</div>

2342

</div>

2343

2344

2345

<span class="sr-only">80% Complete (danger)</span>

2346

</div>

2347

</div>

2348

</div>

2349

{% highlight html %}

2350

2351

2352

<span class="sr-only">40% Complete (success)</span>

2353

</div>

2354

</div>

2355

2356

2357

<span class="sr-only">20% Complete</span>

2358

</div>

2359

</div>

2360

2361

2362

<span class="sr-only">60% Complete (warning)</span>

2363

</div>

2364

</div>

2365

2366

2367

<span class="sr-only">80% Complete (danger)</span>

2368

</div>

2369

</div>

2370

{% endhighlight %}

2371

2372

<h3 id="progress-animated">Animated</h3>

2373

<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>

2374

2375

2376

<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>

2377

</div>

2378

</div>

2379

{% highlight html %}

2380

2381

2382

<span class="sr-only">45% Complete</span>

2383

</div>

2384

</div>

2385

{% endhighlight %}

2386

2387

<h3 id="progress-stacked">Stacked</h3>

2388

<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>

2389

2390

2391

2392

<span class="sr-only">35% Complete (success)</span>

2393

</div>

2394

2395

<span class="sr-only">20% Complete (warning)</span>

2396

</div>

2397

2398

<span class="sr-only">10% Complete (danger)</span>

2399

</div>

2400

</div>

2401

</div>

2402

{% highlight html %}

2403

2404

2405

<span class="sr-only">35% Complete (success)</span>

2406

</div>

2407

2408

<span class="sr-only">20% Complete (warning)</span>

2409

</div>

2410

2411

<span class="sr-only">10% Complete (danger)</span>

2412

</div>

2413

</div>

2414

{% endhighlight %}

2415

</div>

2416

2417

2418

2419

2420

<!-- Media object

2421

================================================== -->

2422

2423

2424

<h1 id="media">Media object</h1>

2425

</div>

2426

<p class="lead">Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.</p>

2427

2428

<h3 id="media-default">Default media</h3>

2429

<p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>

2430

2431

2432

2433

2434

</a>

2435

2436

<h4 class="media-heading">Media heading</h4>

2437

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

2438

</div>

2439

</div>

2440

2441

2442

2443

</a>

2444

2445

<h4 class="media-heading">Media heading</h4>

2446

2447

2448

2449

2450

</a>

2451

2452

<h4 class="media-heading">Media heading</h4>

2453

2454

</div>

2455

</div>

2456

</div>

2457

</div>

2458

</div>

2459

{% highlight html %}

2460

2461

2462

2463

</a>

2464

2465

<h4 class="media-heading">Media heading</h4>

2466

...

2467

</div>

2468

</div>

2469

{% endhighlight %}

2470

2471

<h3 id="media-list">Media list</h3>

2472

<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>

2473

2474

2475

2476

2477

2478

</a>

2479

2480

<h4 class="media-heading">Media heading</h4>

2481

<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>

2482

2483

2484

2485

2486

</a>

2487

2488

<h4 class="media-heading">Nested media heading</h4>

2489

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

2490

2491

2492

2493

2494

</a>

2495

2496

<h4 class="media-heading">Nested media heading</h4>

2497

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

2498

</div>

2499

</div>

2500

</div>

2501

</div>

2502

2503

2504

2505

2506

</a>

2507

2508

<h4 class="media-heading">Nested media heading</h4>

2509

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

2510

</div>

2511

</div>

2512

</div>

2513

</li>

2514

2515

2516

2517

</a>

2518

2519

<h4 class="media-heading">Media heading</h4>

2520

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

2521

</div>

2522

</li>

2523

</ul>

2524

</div>

2525

{% highlight html %}

2526

2527

2528

2529

2530

</a>

2531

2532

<h4 class="media-heading">Media heading</h4>

2533

...

2534

</div>

2535

</li>

2536

</ul>

2537

{% endhighlight %}

2538

</div>

2539

2540

2541

2542

<!-- List group

2543

================================================== -->

2544

2545

2546

<h1 id="list-group">List group</h1>

2547

</div>

2548

<p class="lead">List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</p>

2549

2550

<h3 id="list-group-basic">Basic example</h3>

2551

<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>

2552

2553

2554

<li class="list-group-item">Cras justo odio</li>

2555

<li class="list-group-item">Dapibus ac facilisis in</li>

2556

<li class="list-group-item">Morbi leo risus</li>

2557

<li class="list-group-item">Porta ac consectetur ac</li>

2558

<li class="list-group-item">Vestibulum at eros</li>

2559

</ul>

2560

</div>

2561

{% highlight html %}

2562

2563

<li class="list-group-item">Cras justo odio</li>

2564

<li class="list-group-item">Dapibus ac facilisis in</li>

2565

<li class="list-group-item">Morbi leo risus</li>

2566

<li class="list-group-item">Porta ac consectetur ac</li>

2567

<li class="list-group-item">Vestibulum at eros</li>

2568

</ul>

2569

{% endhighlight %}

2570

2571

<h3 id="list-group-badges">Badges</h3>

2572

<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>

2573

2574

2575

2576

2577

Cras justo odio

2578

</li>

2579

2580

2581

Dapibus ac facilisis in

2582

</li>

2583

2584

2585

Morbi leo risus

2586

</li>

2587

</ul>

2588

</div>

2589

{% highlight html %}

2590

2591

2592

2593

Cras justo odio

2594

</li>

2595

</ul>

2596

{% endhighlight %}

2597

2598

<h3 id="list-group-linked">Linked items</h3>

2599

<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code><div></code> instead of an <code><ul></code>). No need for individual parents around each element.</p>

2600

2601

2602

2603

Cras justo odio

2604

</a>

2605

<a href="#" class="list-group-item">Dapibus ac facilisis in</a>

2606

<a href="#" class="list-group-item">Morbi leo risus</a>

2607

<a href="#" class="list-group-item">Porta ac consectetur ac</a>

2608

<a href="#" class="list-group-item">Vestibulum at eros</a>

2609

</div>

2610

</div>

2611

{% highlight html %}

2612

2613

2614

Cras justo odio

2615

</a>

2616

<a href="#" class="list-group-item">Dapibus ac facilisis in</a>

2617

<a href="#" class="list-group-item">Morbi leo risus</a>

2618

<a href="#" class="list-group-item">Porta ac consectetur ac</a>

2619

<a href="#" class="list-group-item">Vestibulum at eros</a>

2620

</div>

2621

{% endhighlight %}

2622

2623

<h3 id="list-group-custom-content">Custom content</h3>

2624

<p>Add nearly any HTML within, even for linked list groups like the one below.</p>

2625

2626

2627

2628

<h4 class="list-group-item-heading">List group item heading</h4>

2629

<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

2630

</a>

2631

2632

<h4 class="list-group-item-heading">List group item heading</h4>

2633

<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

2634

</a>

2635

2636

<h4 class="list-group-item-heading">List group item heading</h4>

2637

<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>

2638

</a>

2639

</div>

2640

</div>

2641

{% highlight html %}

2642

2643

2644

<h4 class="list-group-item-heading">List group item heading</h4>

2645

2646

</a>

2647

</div>

2648

{% endhighlight %}

2649

</div>

2650

2651

2652

2653

2654

<!-- Panels

2655

================================================== -->

2656

2657

2658

<h1 id="panels">Panels</h1>

2659

</div>

2660

<p class="lead">While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.</p>

2661

2662

<h3 id="panels-basic">Basic example</h3>

2663

<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>

2664

2665

2666

2667

Basic panel example

2668

</div>

2669

</div>

2670

</div>

2671

{% highlight html %}

2672

2673

2674

Basic panel example

2675

</div>

2676

</div>

2677

{% endhighlight %}

2678

2679

<h3 id="panels-heading">Panel with heading</h3>

2680

<p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code><h1></code>-<code><h6></code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>

2681

2682

2683

<div class="panel-heading">Panel heading without title</div>

2684

2685

Panel content

2686

</div>

2687

</div>

2688

2689

2690

<h3 class="panel-title">Panel title</h3>

2691

</div>

2692

2693

Panel content

2694

</div>

2695

</div>

2696

</div>

2697

{% highlight html %}

2698

2699

<div class="panel-heading">Panel heading without title</div>

2700

2701

Panel content

2702

</div>

2703

</div>

2704

2705

2706

2707

<h3 class="panel-title">Panel title</h3>

2708

</div>

2709

2710

Panel content

2711

</div>

2712

</div>

2713

{% endhighlight %}

2714

2715

<h3 id="panels-footer">Panel with footer</h3>

2716

<p>Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers <strong>do not</strong> inherit colors and borders when using contextual variations as they are not meant to be in the foreground.</p>

2717

2718

2719

2720

Panel content

2721

</div>

2722

<div class="panel-footer">Panel footer</div>

2723

</div>

2724

</div>

2725

{% highlight html %}

2726

2727

2728

Panel content

2729

</div>

2730

<div class="panel-footer">Panel footer</div>

2731

</div>

2732

{% endhighlight %}

2733

2734

<h3 id="panels-alternatives">Contextual alternatives</h3>

2735

<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>

2736

2737

2738

2739

<h3 class="panel-title">Panel title</h3>

2740

</div>

2741

2742

Panel content

2743

</div>

2744

</div>

2745

2746

2747

<h3 class="panel-title">Panel title</h3>

2748

</div>

2749

2750

Panel content

2751

</div>

2752

</div>

2753

2754

2755

<h3 class="panel-title">Panel title</h3>

2756

</div>

2757

2758

Panel content

2759

</div>

2760

</div>

2761

2762

2763

<h3 class="panel-title">Panel title</h3>

2764

</div>

2765

2766

Panel content

2767

</div>

2768

</div>

2769

2770

2771

<h3 class="panel-title">Panel title</h3>

2772

</div>

2773

2774

Panel content

2775

</div>

2776

</div>

2777

</div>

2778

{% highlight html %}

2779

2780

2781

2782

2783

2784

{% endhighlight %}

2785

2786

<h3 id="panels-tables">With tables</h3>

2787

<p>Add any non-bordered <code>.table</code> within a panel for a seamless design. If there is a <code>.panel-body</code>, we add an extra border to the top of the table for separation.</p>

2788

2789

2790

2791

<div class="panel-heading">Panel heading</div>

2792

2793

<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

2794

</div>

2795

2796

2797

2798

<thead>

2799

<tr>

2800

2801

<th>First Name</th>

2802

2803

<th>Username</th>

2804

</tr>

2805

</thead>

2806

<tbody>

2807

<tr>

2808

2809

2810

2811

2812

</tr>

2813

<tr>

2814

2815

<td>Jacob</td>

2816

<td>Thornton</td>

2817

2818

</tr>

2819

<tr>

2820

2821

<td>Larry</td>

2822

2823

<td>@twitter</td>

2824

</tr>

2825

</tbody>

2826

</table>

2827

</div>

2828

</div>

2829

{% highlight html %}

2830

2831

2832

<div class="panel-heading">Panel heading</div>

2833

2834

2835

</div>

2836

2837

2838

2839

...

2840

</table>

2841

</div>

2842

{% endhighlight %}

2843

2844

<p>If there is no panel body, the component moves from panel header to table without interruption.</p>

2845

2846

2847

2848

<div class="panel-heading">Panel heading</div>

2849

2850

2851

2852

<thead>

2853

<tr>

2854

2855

<th>First Name</th>

2856

2857

<th>Username</th>

2858

</tr>

2859

</thead>

2860

<tbody>

2861

<tr>

2862

2863

2864

2865

2866

</tr>

2867

<tr>

2868

2869

<td>Jacob</td>

2870

<td>Thornton</td>

2871

2872

</tr>

2873

<tr>

2874

2875

<td>Larry</td>

2876

2877

<td>@twitter</td>

2878

</tr>

2879

</tbody>

2880

</table>

2881

</div>

2882

</div>

2883

{% highlight html %}

2884

2885

2886

<div class="panel-heading">Panel heading</div>

2887

2888

2889

2890

...

2891

</table>

2892

</div>

2893

{% endhighlight %}

2894

2895

2896

2897

<h3 id="panels-list-group">With list groups</h3>

2898

<p>Easily include full-width <a href="#list-group">list groups</a> within any panel.</p>

2899

2900

2901

2902

<div class="panel-heading">Panel heading</div>

2903

2904

2905

</div>

2906

2907

2908

2909

<li class="list-group-item">Cras justo odio</li>

2910

<li class="list-group-item">Dapibus ac facilisis in</li>

2911

<li class="list-group-item">Morbi leo risus</li>

2912

<li class="list-group-item">Porta ac consectetur ac</li>

2913

<li class="list-group-item">Vestibulum at eros</li>

2914

</ul>

2915

</div>

2916

</div>

2917

{% highlight html %}

2918

2919

2920

<div class="panel-heading">Panel heading</div>

2921

2922

2923

</div>

2924

2925

2926

2927

<li class="list-group-item">Cras justo odio</li>

2928

<li class="list-group-item">Dapibus ac facilisis in</li>

2929

<li class="list-group-item">Morbi leo risus</li>

2930

<li class="list-group-item">Porta ac consectetur ac</li>

2931

<li class="list-group-item">Vestibulum at eros</li>

2932

</ul>

2933

</div>

2934

{% endhighlight %}

2935

2936

</div>

2937

2938

2939

2940

2941

2942

<!-- Wells

2943

================================================== -->

2944

2945

2946

<h1 id="wells">Wells</h1>

2947

</div>

2948

2949

<h3>Default well</h3>

2950

<p>Use the well as a simple effect on an element to give it an inset effect.</p>

2951

2952

2953

Look, I'm in a well!

2954

</div>

2955

</div>

2956

{% highlight html %}

2957

2958

{% endhighlight %}

2959

<h3>Optional classes</h3>

2960

<p>Control padding and rounded corners with two optional modifier classes.</p>

2961

2962

2963

Look, I'm in a large well!

2964

</div>

2965

</div>

2966

{% highlight html %}

2967

2968

{% endhighlight %}

2969

2970

2971

2972

Look, I'm in a small well!

2973

</div>

2974

</div>

2975

{% highlight html %}

2976

2977

{% endhighlight %}

2978

</div>

Older »