Você está aqui:

Glyphicons

glyphicon glyphicon-asterisk glyphicon glyphicon-plus glyphicon glyphicon-euro glyphicon glyphicon-eur glyphicon glyphicon-minus glyphicon glyphicon-cloud glyphicon glyphicon-envelope glyphicon glyphicon-pencil glyphicon glyphicon-glass glyphicon glyphicon-music glyphicon glyphicon-search glyphicon glyphicon-heart glyphicon glyphicon-star glyphicon glyphicon-star-empty glyphicon glyphicon-user glyphicon glyphicon-film glyphicon glyphicon-th-large glyphicon glyphicon-th glyphicon glyphicon-th-list glyphicon glyphicon-ok glyphicon glyphicon-remove glyphicon glyphicon-zoom-in glyphicon glyphicon-zoom-out glyphicon glyphicon-off glyphicon glyphicon-signal glyphicon glyphicon-cog glyphicon glyphicon-trash glyphicon glyphicon-home glyphicon glyphicon-file glyphicon glyphicon-time glyphicon glyphicon-road glyphicon glyphicon-download-alt glyphicon glyphicon-download glyphicon glyphicon-upload glyphicon glyphicon-inbox glyphicon glyphicon-play-circle glyphicon glyphicon-repeat glyphicon glyphicon-refresh glyphicon glyphicon-list-alt glyphicon glyphicon-lock glyphicon glyphicon-flag glyphicon glyphicon-headphones glyphicon glyphicon-volume-off glyphicon glyphicon-volume-down glyphicon glyphicon-volume-up glyphicon glyphicon-qrcode glyphicon glyphicon-barcode glyphicon glyphicon-tag glyphicon glyphicon-tags glyphicon glyphicon-book glyphicon glyphicon-bookmark glyphicon glyphicon-print glyphicon glyphicon-camera glyphicon glyphicon-font glyphicon glyphicon-bold glyphicon glyphicon-italic glyphicon glyphicon-text-height glyphicon glyphicon-text-width glyphicon glyphicon-align-left glyphicon glyphicon-align-center glyphicon glyphicon-align-right glyphicon glyphicon-align-justify glyphicon glyphicon-list glyphicon glyphicon-indent-left glyphicon glyphicon-indent-right glyphicon glyphicon-facetime-video glyphicon glyphicon-picture glyphicon glyphicon-map-marker glyphicon glyphicon-adjust glyphicon glyphicon-tint glyphicon glyphicon-edit glyphicon glyphicon-share glyphicon glyphicon-check glyphicon glyphicon-move glyphicon glyphicon-step-backward glyphicon glyphicon-fast-backward glyphicon glyphicon-backward glyphicon glyphicon-play glyphicon glyphicon-pause glyphicon glyphicon-stop glyphicon glyphicon-forward glyphicon glyphicon-fast-forward glyphicon glyphicon-step-forward glyphicon glyphicon-eject glyphicon glyphicon-chevron-left glyphicon glyphicon-chevron-right glyphicon glyphicon-plus-sign glyphicon glyphicon-minus-sign glyphicon glyphicon-remove-sign glyphicon glyphicon-ok-sign glyphicon glyphicon-question-sign glyphicon glyphicon-info-sign glyphicon glyphicon-screenshot glyphicon glyphicon-remove-circle glyphicon glyphicon-ok-circle glyphicon glyphicon-ban-circle glyphicon glyphicon-arrow-left glyphicon glyphicon-arrow-right glyphicon glyphicon-arrow-up glyphicon glyphicon-arrow-down glyphicon glyphicon-share-alt glyphicon glyphicon-resize-full glyphicon glyphicon-resize-small glyphicon glyphicon-exclamation-sign glyphicon glyphicon-gift glyphicon glyphicon-leaf glyphicon glyphicon-fire glyphicon glyphicon-eye-open glyphicon glyphicon-eye-close glyphicon glyphicon-warning-sign glyphicon glyphicon-plane glyphicon glyphicon-calendar glyphicon glyphicon-random glyphicon glyphicon-comment glyphicon glyphicon-magnet glyphicon glyphicon-chevron-up glyphicon glyphicon-chevron-down glyphicon glyphicon-retweet glyphicon glyphicon-shopping-cart glyphicon glyphicon-folder-close glyphicon glyphicon-folder-open glyphicon glyphicon-resize-vertical glyphicon glyphicon-resize-horizontal glyphicon glyphicon-hdd glyphicon glyphicon-bullhorn glyphicon glyphicon-bell glyphicon glyphicon-certificate glyphicon glyphicon-thumbs-up glyphicon glyphicon-thumbs-down glyphicon glyphicon-hand-right glyphicon glyphicon-hand-left glyphicon glyphicon-hand-up glyphicon glyphicon-hand-down glyphicon glyphicon-circle-arrow-right glyphicon glyphicon-circle-arrow-left glyphicon glyphicon-circle-arrow-up glyphicon glyphicon-circle-arrow-down glyphicon glyphicon-globe glyphicon glyphicon-wrench glyphicon glyphicon-tasks glyphicon glyphicon-filter glyphicon glyphicon-briefcase glyphicon glyphicon-fullscreen glyphicon glyphicon-dashboard glyphicon glyphicon-paperclip glyphicon glyphicon-heart-empty glyphicon glyphicon-link glyphicon glyphicon-phone glyphicon glyphicon-pushpin glyphicon glyphicon-usd glyphicon glyphicon-gbp glyphicon glyphicon-sort glyphicon glyphicon-sort-by-alphabet glyphicon glyphicon-sort-by-alphabet-alt glyphicon glyphicon-sort-by-order glyphicon glyphicon-sort-by-order-alt glyphicon glyphicon-sort-by-attributes glyphicon glyphicon-sort-by-attributes-alt glyphicon glyphicon-unchecked glyphicon glyphicon-expand glyphicon glyphicon-collapse-down glyphicon glyphicon-collapse-up glyphicon glyphicon-log-in glyphicon glyphicon-flash glyphicon glyphicon-log-out glyphicon glyphicon-new-window glyphicon glyphicon-record glyphicon glyphicon-save glyphicon glyphicon-open glyphicon glyphicon-saved glyphicon glyphicon-import glyphicon glyphicon-export glyphicon glyphicon-send glyphicon glyphicon-floppy-disk glyphicon glyphicon-floppy-saved glyphicon glyphicon-floppy-remove glyphicon glyphicon-floppy-save glyphicon glyphicon-floppy-open glyphicon glyphicon-credit-card glyphicon glyphicon-transfer glyphicon glyphicon-cutlery glyphicon glyphicon-header glyphicon glyphicon-compressed glyphicon glyphicon-earphone glyphicon glyphicon-phone-alt glyphicon glyphicon-tower glyphicon glyphicon-stats glyphicon glyphicon-sd-video glyphicon glyphicon-hd-video glyphicon glyphicon-subtitles glyphicon glyphicon-sound-stereo glyphicon glyphicon-sound-dolby glyphicon glyphicon-sound-5-1 glyphicon glyphicon-sound-6-1 glyphicon glyphicon-sound-7-1 glyphicon glyphicon-copyright-mark glyphicon glyphicon-registration-mark glyphicon glyphicon-cloud-download glyphicon glyphicon-cloud-upload glyphicon glyphicon-tree-conifer glyphicon glyphicon-tree-deciduous glyphicon glyphicon-cd glyphicon glyphicon-save-file glyphicon glyphicon-open-file glyphicon glyphicon-level-up glyphicon glyphicon-copy glyphicon glyphicon-paste glyphicon glyphicon-alert glyphicon glyphicon-equalizer glyphicon glyphicon-king glyphicon glyphicon-queen glyphicon glyphicon-pawn glyphicon glyphicon-bishop glyphicon glyphicon-knight glyphicon glyphicon-baby-formula glyphicon glyphicon-tent glyphicon glyphicon-blackboard glyphicon glyphicon-bed glyphicon glyphicon-apple glyphicon glyphicon-erase glyphicon glyphicon-hourglass glyphicon glyphicon-lamp glyphicon glyphicon-duplicate glyphicon glyphicon-piggy-bank glyphicon glyphicon-scissors glyphicon glyphicon-bitcoin glyphicon glyphicon-btc glyphicon glyphicon-xbt glyphicon glyphicon-yen glyphicon glyphicon-jpy glyphicon glyphicon-ruble glyphicon glyphicon-rub glyphicon glyphicon-scale glyphicon glyphicon-ice-lolly glyphicon glyphicon-ice-lolly-tasted glyphicon glyphicon-education glyphicon glyphicon-option-horizontal glyphicon glyphicon-option-vertical glyphicon glyphicon-menu-hamburger glyphicon glyphicon-modal-window glyphicon glyphicon-oil glyphicon glyphicon-grain glyphicon glyphicon-sunglasses glyphicon glyphicon-text-size glyphicon glyphicon-text-color glyphicon glyphicon-text-background glyphicon glyphicon-object-align-top glyphicon glyphicon-object-align-bottom glyphicon glyphicon-object-align-horizontal glyphicon glyphicon-object-align-left glyphicon glyphicon-object-align-vertical glyphicon glyphicon-object-align-right glyphicon glyphicon-triangle-right glyphicon glyphicon-triangle-left glyphicon glyphicon-triangle-bottom glyphicon glyphicon-triangle-top glyphicon glyphicon-console glyphicon glyphicon-superscript glyphicon glyphicon-subscript glyphicon glyphicon-menu-left glyphicon glyphicon-menu-right glyphicon glyphicon-menu-down glyphicon glyphicon-menu-up

<span class="glyphicon glyphicon-*" aria-hidden="true"></span>

<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Texto 1</button>

Dropdowns

Padrão

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" id="nome-dropdown-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Texto 1
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="nome-dropdown-1">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>

Dropup

<div class="dropup">
	<button class="btn btn-default dropdown-toggle" type="button" id="nome-dropdown-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Texto 1
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="nome-dropdown-2">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>

Alinhamento

<div class="dropdown pull-right">
	<button class="btn btn-default dropdown-toggle" type="button" id="nome-dropdown-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Texto 1
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu dropdown-menu-left" aria-labelledby="nome-dropdown-3">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>

Cabeçalhos

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" id="nome-dropdown-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Texto 1
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="nome-dropdown-4">
		<li class="dropdown-header">Cabeçalho</li>
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>

Divisor

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" id="nome-dropdown-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Texto 1
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="nome-dropdown-5">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>

Desativado os itens de menu

<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" id="nome-dropdown-6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Texto 1
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="nome-dropdown-6">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li class="disabled"><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>

Grupos de botões

Padrão

<div class="btn-group" role="group" aria-label="">
	<button type="button" class="btn btn-default">Texto 1</button>
	<button type="button" class="btn btn-default">Texto 2</button>
	<button type="button" class="btn btn-default">Texto 3</button>
</div>

Múltiplos

<div class="btn-toolbar" role="toolbar" aria-label="">
	<div class="btn-group" role="group" aria-label="">
		<button type="button" class="btn btn-default">Texto 1</button>
		<button type="button" class="btn btn-default">Texto 2</button>
		<button type="button" class="btn btn-default">Texto 3</button>
	</div>
	<div class="btn-group" role="group" aria-label="">
		<button type="button" class="btn btn-default">Texto 1</button>
		<button type="button" class="btn btn-default">Texto 2</button>
		<button type="button" class="btn btn-default">Texto 3</button>
	</div>
	<div class="btn-group" role="group" aria-label="">
		<button type="button" class="btn btn-default">Texto 1</button>
		<button type="button" class="btn btn-default">Texto 2</button>
		<button type="button" class="btn btn-default">Texto 3</button>
	</div>
</div>

Tamanhos

<div class="btn-group btn-group-lg" role="group" aria-label="">
	<button type="button" class="btn btn-default">Texto 1</button>
	<button type="button" class="btn btn-default">Texto 2</button>
	<button type="button" class="btn btn-default">Texto 3</button>
</div>
<div class="btn-group" role="group" aria-label="">
	<button type="button" class="btn btn-default">Texto 1</button>
	<button type="button" class="btn btn-default">Texto 2</button>
	<button type="button" class="btn btn-default">Texto 3</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="">
	<button type="button" class="btn btn-default">Texto 1</button>
	<button type="button" class="btn btn-default">Texto 2</button>
	<button type="button" class="btn btn-default">Texto 3</button>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="">
	<button type="button" class="btn btn-default">Texto 1</button>
	<button type="button" class="btn btn-default">Texto 2</button>
	<button type="button" class="btn btn-default">Texto 3</button>
</div>

Botões conjugados

<div class="btn-group" role="group" aria-label="">
	<button type="button" class="btn btn-default">Texto 1</button>
	<button type="button" class="btn btn-default">Texto 2</button>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Texto 3
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="javascript:void(0);">Texto 4</a></li>
			<li><a href="javascript:void(0);">Texto 5</a></li>
		</ul>
	</div>
</div>

Verticais

Justificados

Texto 1 Texto 2 Texto 3

<div class="btn-group btn-group-justified" role="group" aria-label="">
	<a href="javascript:void(0);" class="btn btn-default" role="button">Texto 1</a>
	<a href="javascript:void(0);" class="btn btn-default" role="button">Texto 2</a>
	<a href="javascript:void(0);" class="btn btn-default" role="button">Texto 3</a>
</div>

Texto 1 Texto 2

<div class="btn-group btn-group-justified" role="group" aria-label="">
	<a href="javascript:void(0);" class="btn btn-default" role="button">Texto 1</a>
	<a href="javascript:void(0);" class="btn btn-default" role="button">Texto 2</a>
	<div class="btn-group" role="group">
		<a href="javascript:void(0);" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
			Texto 3 <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="javascript:void(0);">Texto 4</a></li>
			<li><a href="javascript:void(0);">Texto 5</a></li>
			<li><a href="javascript:void(0);">Texto 6</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="javascript:void(0);">Texto 7</a></li>
		</ul>
	</div>
</div>

<div class="btn-group btn-group-justified" role="group" aria-label="">
		<div class="btn-group" role="group">
			<button type="button" class="btn btn-default">Texto 1</button>
		</div>
		<div class="btn-group" role="group">
			<button type="button" class="btn btn-default">Texto 2</button>
		</div>
		<div class="btn-group" role="group">
			<button type="button" class="btn btn-default">Texto 3</button>
		</div>
	</div>

Dropdown de Botões

Padrão

<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Texto 1 <span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Texto 1 <span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Texto 1 <span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Texto 1 <span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Texto 1 <span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Texto 1 <span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="javascript:void(0);">Texto 2</a></li>
		<li><a href="javascript:void(0);">Texto 3</a></li>
		<li><a href="javascript:void(0);">Texto 4</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="javascript:void(0);">Texto 5</a></li>
	</ul>
</div>

Grupos de input

Padrão

Texto 1

<div class="input-group">
	<span class="input-group-addon" id="iga-a">Texto 1</span>
	<input type="text" class="form-control" placeholder="Texto 2" aria-describedby="iga-a">
</div>

Texto 2

<div class="input-group">
	<input type="text" class="form-control" placeholder="Texto 1" aria-describedby="iga-b">
	<span class="input-group-addon" id="iga-b">Texto 2</span>
</div>

Texto 1 Texto 3

<div class="input-group">
	<span class="input-group-addon">Texto 1</span>
	<input type="text" class="form-control" aria-label="Texto 2">
	<span class="input-group-addon">Texto 3</span>
</div>

Tamanhos

Texto 1

<div class="input-group input-group-lg">
	<span class="input-group-addon" id="iga-c">Texto 1</span>
	<input type="text" class="form-control" placeholder="Texto 2" aria-describedby="iga-c">
</div>

Texto 1

<div class="input-group">
	<span class="input-group-addon" id="iga-d">Texto 1</span>
	<input type="text" class="form-control" placeholder="Texto 2" aria-describedby="iga-d">
</div>

Texto 1

<div class="input-group input-group-sm">
	<span class="input-group-addon" id="iga-e">Texto 1</span>
	<input type="text" class="form-control" placeholder="Texto 2" aria-describedby="iga-e">
</div>

Checkbox

<div class="input-group">
	<span class="input-group-addon">
		<input type="checkbox" aria-label="Texto 1">
	</span>
	<input type="text" class="form-control" aria-label="Texto 2">
</div>

Radio

<div class="input-group">
	<span class="input-group-addon">
		<input type="radio" aria-label="Texto 1">
	</span>
	<input type="text" class="form-control" aria-label="Texto 2">
</div>

Botão

<div class="input-group">
	<span class="input-group-btn">
		<button class="btn btn-default" type="button">Texto 1</button>
	</span>
	<input type="text" class="form-control" placeholder="Texto 2">
</div>

<div class="input-group">
	<input type="text" class="form-control" placeholder="Texto 1">
	<span class="input-group-btn">
		<button class="btn btn-default" type="button">Texto 2</button>
	</span>
</div>

Botões com dropdowns

<div class="input-group">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Texto 1 <span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li><a href="javascript:void(0);">Texto 2</a></li>
			<li><a href="javascript:void(0);">Texto 3</a></li>
			<li><a href="javascript:void(0);">Texto 4</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="javascript:void(0);">Texto 5</a></li>
		</ul>
	</div>
	<input type="text" class="form-control" aria-label="Texto 6">
</div>

<div class="input-group">
	<input type="text" class="form-control" aria-label="Texto 1">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Texto 2 <span class="caret"></span></button>
		<ul class="dropdown-menu dropdown-menu-right">
			<li><a href="javascript:void(0);">Texto 3</a></li>
			<li><a href="javascript:void(0);">Texto 4</a></li>
			<li><a href="javascript:void(0);">Texto 5</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="javascript:void(0);">Texto 6</a></li>
		</ul>
	</div>
</div>

Botões Segmented

<div class="input-group">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default">Texto 1</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="caret"></span>
			<span class="sr-only">Texto 2</span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="javascript:void(0);">Texto 3</a></li>
			<li><a href="javascript:void(0);">Texto 4</a></li>
			<li><a href="javascript:void(0);">Texto 5</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="javascript:void(0);">Texto 6</a></li>
		</ul>
	</div>
	<input type="text" class="form-control" aria-label="Texto 7">
</div>

<div class="input-group">
	<input type="text" class="form-control" aria-label="Texto 1">
	<div class="input-group-btn">
		<button type="button" class="btn btn-default">Texto 2</button>
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="caret"></span>
			<span class="sr-only">Texto 3</span>
		</button>
		<ul class="dropdown-menu dropdown-menu-right">
			<li><a href="javascript:void(0);">Texto 4</a></li>
			<li><a href="javascript:void(0);">Texto 5</a></li>
			<li><a href="javascript:void(0);">Texto 6</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="javascript:void(0);">Texto 7</a></li>
		</ul>
	</div>
</div>

Navegação

Abas

<ul class="nav nav-tabs">
	<li role="presentation" class="active"><a href="javascript:void(0);">Texto 1</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 2</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 3</a></li>
</ul>

Pílulas

<ul class="nav nav-pills">
	<li role="presentation" class="active"><a href="javascript:void(0);">Texto 1</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 2</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 3</a></li>
</ul>

Pílulas estagnadas

<ul class="nav nav-pills nav-stacked">
	<li role="presentation" class="active"><a href="javascript:void(0);">Texto 1</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 2</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 3</a></li>
</ul>

Aba justificada

<ul class="nav nav-tabs nav-justified">
	<li role="presentation" class="active"><a href="javascript:void(0);">Texto 1</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 2</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 3</a></li>
</ul>

Pílula justificada

<ul class="nav nav-pills nav-justified">
	<li role="presentation" class="active"><a href="javascript:void(0);">Texto 1</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 2</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 3</a></li>
</ul>

Links desabilitados

<ul class="nav nav-pills">
	<li role="presentation"><a href="javascript:void(0);">Texto 1</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 2</a></li>
	<li role="presentation" class="disabled"><a href="javascript:void(0);">Texto 3</a></li>
</ul>

Abas com dropdowns

<ul class="nav nav-tabs">
	<li role="presentation" class="active"><a href="javascript:void(0);">Texto 1</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 2</a></li>
	<li role="presentation" class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" role="button" aria-haspopup="true" aria-expanded="false">
			Texto 3 <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="javascript:void(0);">Texto 4</a></li>
			<li><a href="javascript:void(0);">Texto 5</a></li>
			<li><a href="javascript:void(0);">Texto 6</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="javascript:void(0);">Texto 7</a></li>
		</ul>
	</li>
</ul>

Pílula com dropdowns

<ul class="nav nav-pills">
	<li role="presentation" class="active"><a href="javascript:void(0);">Texto 1</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 2</a></li>
	<li role="presentation" class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" role="button" aria-haspopup="true" aria-expanded="false">
			Texto 3 <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="javascript:void(0);">Texto 4</a></li>
			<li><a href="javascript:void(0);">Texto 5</a></li>
			<li><a href="javascript:void(0);">Texto 6</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="javascript:void(0);">Texto 7</a></li>
		</ul>
	</li>
</ul>

Breadcrumbs

Você está aqui:


<div class="col-md-12 col-sm-12 col-xs-12">
	<div class="contentBreadcrumb">
		<span class="pull-left">Texto</span>
		<ol class="breadcrumb">
			<li class="active">Texto</li>
		</ol
	</div
</div

Paginação

Padrão

<nav>
	<ul class="pagination">
		<li>
			<a href="javascript:void(0);" aria-label="Anterior">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
		<li><a href="javascript:void(0);">1</a></li>
		<li><a href="javascript:void(0);">2</a></li>
		<li><a href="javascript:void(0);">3</a></li>
		<li><a href="javascript:void(0);">4</a></li>
		<li><a href="javascript:void(0);">5</a></li>
		<li>
			<a href="javascript:void(0);" aria-label="Próximo">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>

Estados ativado e desativado

<nav>
	<ul class="pagination">
		<li class="disabled">
			<a href="javascript:void(0);" aria-label="Anterior">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
		<li class="active"><a href="javascript:void(0);">1</a></li>
		<li><a href="javascript:void(0);">2</a></li>
		<li><a href="javascript:void(0);">3</a></li>
		<li><a href="javascript:void(0);">4</a></li>
		<li><a href="javascript:void(0);">5</a></li>
		<li>
			<a href="javascript:void(0);" aria-label="Próximo">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>

Tamanhos

<nav>
	<ul class="pagination pagination-lg">
		<li>
			<a href="javascript:void(0);" aria-label="Anterior">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
		<li><a href="javascript:void(0);">1</a></li>
		<li><a href="javascript:void(0);">2</a></li>
		<li><a href="javascript:void(0);">3</a></li>
		<li><a href="javascript:void(0);">4</a></li>
		<li><a href="javascript:void(0);">5</a></li>
		<li>
			<a href="javascript:void(0);" aria-label="Próximo">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>

<nav>
	<ul class="pagination">
		<li>
			<a href="javascript:void(0);" aria-label="Anterior">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
		<li><a href="javascript:void(0);">1</a></li>
		<li><a href="javascript:void(0);">2</a></li>
		<li><a href="javascript:void(0);">3</a></li>
		<li><a href="javascript:void(0);">4</a></li>
		<li><a href="javascript:void(0);">5</a></li>
		<li>
			<a href="javascript:void(0);" aria-label="Próximo">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>

<nav>
	<ul class="pagination pagination-sm">
		<li>
			<a href="javascript:void(0);" aria-label="Anterior">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
		<li><a href="javascript:void(0);">1</a></li>
		<li><a href="javascript:void(0);">2</a></li>
		<li><a href="javascript:void(0);">3</a></li>
		<li><a href="javascript:void(0);">4</a></li>
		<li><a href="javascript:void(0);">5</a></li>
		<li>
			<a href="javascript:void(0);" aria-label="Próximo">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>

Pager

<nav>
	<ul class="pager">
		<li><a href="javascript:void(0);">Anterior</a></li>
		<li><a href="javascript:void(0);">Próximo</a></li>
	</ul>
</nav>

Links alinhados

<nav>
	<ul class="pager">
		<li class="previous"><a href="javascript:void(0);"><span aria-hidden="true">&larr;</span> Anterior</a></li>
		<li class="next"><a href="javascript:void(0);">Próximo <span aria-hidden="true">&rarr;</span></a></li>
	</ul>
</nav>

Estado desabilitado opcional

<nav>
	<ul class="pager">
		<li class="previous disabled"><a href="javascript:void(0);"><span aria-hidden="true">&larr;</span> Anterior</a></li>
		<li class="next"><a href="javascript:void(0);">Próximo <span aria-hidden="true">&rarr;</span></a></li>
	</ul>
</nav>

Labels

Texto 1 Texto

Texto 2 Texto

Texto 3 Texto

Texto 4 Texto

Texto 5 Texto

Texto 6 Texto

<h1>Texto 1 <span class="label label-default">Texto</span></h1>
<h2>Texto 2 <span class="label label-default">Texto</span></h2>
<h3>Texto 3 <span class="label label-default">Texto</span></h3>
<h4>Texto 4 <span class="label label-default">Texto</span></h4>
<h5>Texto 5 <span class="label label-default">Texto</span></h5>
<h6>Texto 6 <span class="label label-default">Texto</span></h6>

Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 Texto 6

<span class="label label-default">Texto 1</span>
<span class="label label-primary">Texto 2</span>
<span class="label label-success">Texto 3</span>
<span class="label label-info">Texto 4</span>
<span class="label label-warning">Texto 5</span>
<span class="label label-danger">Texto 6</span>

Badges

Link

Texto 1 23

<a href="javascript:void(0);">Texto 1 <span class="badge">23</span></a>

Botão

<button class="btn btn-primary" type="button">
	Texto 1 <span class="badge">23</span>
</button>

Navegação pílula

<ul class="nav nav-pills" role="tablist">
	<li role="presentation" class="active"><a href="javascript:void(0);">Texto 1 <span class="badge">3</span></a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 2</a></li>
	<li role="presentation"><a href="javascript:void(0);">Texto 3 <span class="badge">4</span></a></li>
</ul>

Jumbotron

Padrão

Texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

Texto texto

<div class="jumbotron">
	<h1>Texto texto</h1>
	<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	<p><a class="btn btn-primary btn-lg" href="javascript:void(0);" role="button">Texto texto</a></p>
</div>

Cabeçalho da página

Padrão

<div class="page-header">
	<h1>Texto texto <small>Texto texto</small></h1>
</div>

Thumbnails

Padrão

<div class="row">
	<div class="col-xs-6 col-md-3">
		<a href="javascript:void(0);" class="thumbnail">
			<img src="img/Neurons 200 x 200.jpg" alt="200x200">
		</a>
	</div>
	<div class="col-xs-6 col-md-3">
		<a href="javascript:void(0);" class="thumbnail">
			<img src="img/Neurons 200 x 200.jpg" alt="200x200">
		</a>
	</div>
	<div class="col-xs-6 col-md-3">
		<a href="javascript:void(0);" class="thumbnail">
			<img src="img/Neurons 200 x 200.jpg" alt="200x200">
		</a>
	</div>
</div>

Alerta

Padrão

Texto texto texto texto texto texto texto texto.

<div class="alert alert-success" role="alert">Texto texto texto texto texto texto texto texto.</div>
<div class="alert alert-info" role="alert">Texto texto texto texto texto texto texto texto.</div>
<div class="alert alert-warning" role="alert">Texto texto texto texto texto texto texto texto.</div>
<div class="alert alert-danger" role="alert">Texto texto texto texto texto texto texto texto.</div>

De fechar

Texto! texto texto texto texto texto texto.

<div class="alert alert-warning alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	<strong>Texto!</strong> texto texto texto texto texto texto.
</div>

Links

Texto texto texto texto texto texto texto texto.

<div class="alert alert-success" role="alert">
	<a href="javascript:void(0);" class="alert-link">Texto texto</a> texto texto texto texto texto texto.
</div>
<div class="alert alert-info" role="alert">
	<a href="javascript:void(0);" class="alert-link">Texto texto</a> texto texto texto texto texto texto.
</div>
<div class="alert alert-warning" role="alert">
	<a href="javascript:void(0);" class="alert-link">Texto texto</a> texto texto texto texto texto texto.
</div>
<div class="alert alert-danger" role="alert">
	<a href="javascript:void(0);" class="alert-link">Texto texto</a> texto texto texto texto texto texto.
</div>

Barras de progresso

Padrão

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

Com label

60%

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		60%
	</div>
</div>

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
		0%
	</div>
</div>
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
		2%
	</div>
</div>

Alternativas contextuais

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
		<span class="sr-only">40% Completo</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		<span class="sr-only">40% Completo (sucesso)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		<span class="sr-only">20% Completo (informação)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
		<span class="sr-only">60% Completo (aviso)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		<span class="sr-only">80% Completo (perigo)</span>
	</div>
</div>

Zebrada

<div class="progress">
	<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
		<span class="sr-only">75% Completo (sucesso)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		<span class="sr-only">40% Completo (sucesso)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
		<span class="sr-only">20% Completo (informação)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
		<span class="sr-only">60% Completo (aviso)</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
		<span class="sr-only">80% Completo (perigo)</span>
	</div>
</div>

Animado

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

Stacked

<div class="progress">
	<div class="progress-bar progress-bar-success" style="width: 35%">
		<span class="sr-only">35% Completo (sucesso)</span>
	</div>
	<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
		<span class="sr-only">20% Completo (aviso)</span>
	</div>
	<div class="progress-bar progress-bar-danger" style="width: 10%">
		<span class="sr-only">10% Completo (perigo)</span>
	</div>
</div>

Objeto de mídia

Padrão

Texto 1

<div class="media">
	<div class="media-left">
		<a href="javascript:void(0);">
			<img class="media-object" src="img/64-64.svg" alt="64x64">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">Texto 1</h4>
		Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
	</div>
</div>

Texto 2

Texto 3

<div class="media">
	<div class="media-left">
		<a href="javascript:void(0);">
			<img class="media-object" src="img/64-64.svg" alt="64x64">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">Texto 2</h4>
		Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
		<div class="media">
			<div class="media-left">
				<a href="javascript:void(0);">
					<img class="media-object" src="img/64-64.svg" alt="64x64">
				</a>
			</div>
			<div class="media-body">
				<h4 class="media-heading">Texto 3</h4>
				Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
			</div>
		</div>
	</div>
</div>

Texto 4

<div class="media">
			<div class="media-body">
				<h4 class="media-heading">Texto 4</h4>
				Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
			</div>
			<div class="media-right">
				<a href="javascript:void(0);">
					<img class="media-object" src="img/64-64.svg" alt="64x64">
				</a>
			</div>
		</div>

Texto 5

<div class="media">
	<div class="media-left">
		<a href="javascript:void(0);">
			<img class="media-object" src="img/64-64.svg" alt="64x64">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">Texto 5</h4>
		Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
	</div>
	<div class="media-right">
		<a href="javascript:void(0);">
			<img class="media-object" src="img/64-64.svg" alt="64x64">
		</a>
	</div>
</div>

Alinhamento

Texto 1

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

Texto 2

Texto 3

<div class="media">
	<div class="media-left">
		<a href="javascript:void(0);">
			<img class="media-object" src="img/64-64.svg" alt="64x64">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">Texto 1</h4>
		<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</div>
</div>
<div class="media">
	<div class="media-left media-middle">
		<a href="javascript:void(0);">
			<img class="media-object" src="img/64-64.svg" alt="64x64">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">Texto 2</h4>
		<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</div>
</div>
<div class="media">
	<div class="media-left media-bottom">
		<a href="javascript:void(0);">
			<img class="media-object" src="img/64-64.svg" alt="64x64">
		</a>
	</div>
	<div class="media-body">
		<h4 class="media-heading">Texto 3</h4>
		<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</div>
</div>

Grupo de lista

Padrão

Texto 1
Texto 2
Texto 3
Texto 4
Texto 5

<ul class="list-group">
	<li class="list-group-item">Texto 1</li>
	<li class="list-group-item">Texto 2</li>
	<li class="list-group-item">Texto 3</li>
	<li class="list-group-item">Texto 4</li>
	<li class="list-group-item">Texto 5</li>
</ul>

Badges

1Texto 1
2Texto 2
3Texto 3
4Texto 4
5Texto 5

<ul class="list-group">
	<li class="list-group-item"><span class="badge">1</span>Texto 1</li>
	<li class="list-group-item"><span class="badge">2</span>Texto 2</li>
	<li class="list-group-item"><span class="badge">3</span>Texto 3</li>
	<li class="list-group-item"><span class="badge">4</span>Texto 4</li>
	<li class="list-group-item"><span class="badge">5</span>Texto 5</li>
</ul>

Itens de link

Texto 1 Texto 2 Texto 3 Texto 4 Texto 5

<div class="list-group">
	<a href="javascript:void(0);" class="list-group-item active">Texto 1</a>
	<a href="javascript:void(0);" class="list-group-item">Texto 2</a>
	<a href="javascript:void(0);" class="list-group-item">Texto 3</a>
	<a href="javascript:void(0);" class="list-group-item">Texto 4</a>
	<a href="javascript:void(0);" class="list-group-item">Texto 5</a>
</div>

Itens de botão

<div class="list-group">
	<button type="button" class="list-group-item">Texto 1</button>
	<button type="button" class="list-group-item">Texto 2</button>
	<button type="button" class="list-group-item">Texto 3</button>
	<button type="button" class="list-group-item">Texto 4</button>
	<button type="button" class="list-group-item">Texto 5</button>
</div>

itens desativados

Texto 1 Texto 2 Texto 3 Texto 4 Texto 5

<div class="list-group">
	<a href="javascript:void(0);" class="list-group-item disabled">Texto 1</a>
	<a href="javascript:void(0);" class="list-group-item">Texto 2</a>
	<a href="javascript:void(0);" class="list-group-item">Texto 3</a>
	<a href="javascript:void(0);" class="list-group-item">Texto 4</a>
	<a href="javascript:void(0);" class="list-group-item">Texto 5</a>
</div>

Classes contextuais

Texto 1
Texto 2
Texto 3
Texto 4
Texto 5

<ul class="list-group">
	<li class="list-group-item">Texto 1</li>
	<li class="list-group-item list-group-item-success">Texto 2</li>
	<li class="list-group-item list-group-item-info">Texto 3</li>
	<li class="list-group-item list-group-item-warning">Texto 4</li>
	<li class="list-group-item list-group-item-danger">Texto 5</li>
</ul>

Texto 1 Texto 2 Texto 3 Texto 4 Texto 5

<div class="list-group">
	<a href="javascript:void(0);" class="list-group-item">Texto 1</a>
	<a href="javascript:void(0);" class="list-group-item list-group-item-success">Texto 2</a>
	<a href="javascript:void(0);" class="list-group-item list-group-item-info">Texto 3</a>
	<a href="javascript:void(0);" class="list-group-item list-group-item-warning">Texto 4</a>
	<a href="javascript:void(0);" class="list-group-item list-group-item-danger">Texto 5</a>
</div>

<div class="list-group">
	<a href="javascript:void(0);" class="list-group-item active">
		<h4 class="list-group-item-heading">Texto 1</h4>
		<p class="list-group-item-text">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</a>
	<a href="javascript:void(0);" class="list-group-item">
		<h4 class="list-group-item-heading">Texto 2</h4>
		<p class="list-group-item-text">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</a>
	<a href="javascript:void(0);" class="list-group-item">
		<h4 class="list-group-item-heading">Texto 3</h4>
		<p class="list-group-item-text">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</a>
	<a href="javascript:void(0);" class="list-group-item">
		<h4 class="list-group-item-heading">Texto 4</h4>
		<p class="list-group-item-text">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</a>
	<a href="javascript:void(0);" class="list-group-item">
		<h4 class="list-group-item-heading">Texto 5</h4>
		<p class="list-group-item-text">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</a>
</div>

Painéis

Padrão

Texto 1

<div class="panel panel-default">
	<div class="panel-body">
		Texto 1
	</div>
</div>

Com cabeçalho

Texto 1

Texto 2

Texto 3

Texto 4

<div class="panel panel-default">
	<div class="panel-heading">Texto 1</div>
	<div class="panel-body">Texto 2</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">Texto 3</h3>
	</div>
	<div class="panel-body">Texto 4</div>
</div>

Com rodapé

Texto 1

Texto 2

<div class="panel panel-default">
	<div class="panel-body">Texto 1</div>
	<div class="panel-footer">Texto 2</div>
</div>

Alternativas contextuais

Texto 1

Texto 2

Texto 1

Texto 2

Texto 1

Texto 2

Texto 1

Texto 2

Texto 1

Texto 2

Texto 1

Texto 2

<div class="panel panel-default">
	<div class="panel-heading">Texto 1</div>
	<div class="panel-body">Texto 2</div>
</div>
<div class="panel panel-primary">
	<div class="panel-heading">Texto 1</div>
	<div class="panel-body">Texto 2</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">Texto 1</div>
	<div class="panel-body">Texto 2</div>
</div>
<div class="panel panel-info">
	<div class="panel-heading">Texto 1</div>
	<div class="panel-body">Texto 2</div>
</div>
<div class="panel panel-warning">
	<div class="panel-heading">Texto 1</div>
	<div class="panel-body">Texto 2</div>
</div>
<div class="panel panel-danger">
	<div class="panel-heading">Texto 1</div>
	<div class="panel-body">Texto 2</div>
</div>

Com tabelas

Texto 1

Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3
Texto 1	Texto 2	Texto 3

<div class="panel panel-default">
	<div class="panel-heading">Texto 1</div>
	<div class="panel-body">
		<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</div>		
	<table class="table">
		<thead>
			<tr>
				<th>Texto 1</th>
				<th>Texto 2</th>
				<th>Texto 3</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Texto 1</td>
				<td>Texto 2</td>
				<td>Texto 3</td>
			</tr>
			<tr>
				<td>Texto 1</td>
				<td>Texto 2</td>
				<td>Texto 3</td>
			</tr>
			<tr>
				<td>Texto 1</td>
				<td>Texto 2</td>
				<td>Texto 3</td>
			</tr>
			<tr>
				<td>Texto 1</td>
				<td>Texto 2</td>
				<td>Texto 3</td>
			</tr>
			<tr>
				<td>Texto 1</td>
				<td>Texto 2</td>
				<td>Texto 3</td>
			</tr>
		</tbody>
	</table>
</div>

Com grupos de lista

Texto 1

Texto 1
Texto 2
Texto 3
Texto 4
Texto 5

<div class="panel panel-default">
	<div class="panel-heading">Texto 1</div>
	<div class="panel-body">
		<p>Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.</p>
	</div>
	<ul class="list-group">
		<li class="list-group-item">Texto 1</li>
		<li class="list-group-item">Texto 2</li>
		<li class="list-group-item">Texto 3</li>
		<li class="list-group-item">Texto 4</li>
		<li class="list-group-item">Texto 5</li>
	</ul>
</div>

<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/omKyfSshGSA"></iframe>
</div>

Wells

Padrão

Texto 1

<div class="well">Texto 1</div>

Pequeno

Texto 2

<div class="well well-sm">Texto 1</div>

Grande

Texto 3

<div class="well well-lg">Texto 1</div>

Componentes

Glyphicons

Dropdowns

Padrão

Dropup

Alinhamento

Cabeçalhos

Divisor

Desativado os itens de menu

Grupos de botões

Padrão

Múltiplos

Tamanhos

Botões conjugados

Verticais

Justificados

Dropdown de Botões

Padrão

Grupos de input

Padrão

Tamanhos

Checkbox

Radio

Botão

Botões com dropdowns

Botões Segmented

Navegação

Abas

Pílulas

Pílulas estagnadas

Aba justificada

Pílula justificada

Links desabilitados

Abas com dropdowns

Pílula com dropdowns

Breadcrumbs

Paginação

Padrão

Estados ativado e desativado

Tamanhos

Pager

Links alinhados

Estado desabilitado opcional

Labels

Texto 1 Texto

Texto 2 Texto

Texto 3 Texto

Texto 4 Texto

Texto 5 Texto

Texto 6 Texto

Badges

Link

Botão

Navegação pílula

Jumbotron

Padrão

Texto texto

Cabeçalho da página

Padrão

Texto texto Texto texto

Thumbnails

Padrão

Alerta

Padrão

De fechar

Links

Barras de progresso

Padrão

Com label

Alternativas contextuais

Zebrada

Animado

Stacked

Objeto de mídia

Padrão

Texto 1

Texto 2

Texto 3

Texto 4

Texto 5