Componentes

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>

Barra de navegação

Padrão

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-a" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><strong>Texto 1</strong></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-a">
			<ul class="nav navbar-nav">
				<li class="active"><a href="javascript:void(0);"><strong>Texto 2</strong> <span class="sr-only">(atual)</span></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 3</strong></a></li>
				<li class="dropdown">
					<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>Texto 4</strong> <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="javascript:void(0);">Texto 5</a></li>
						<li><a href="javascript:void(0);">Texto 6</a></li>
						<li><a href="javascript:void(0);">Texto 7</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="javascript:void(0);">Texto 8</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="javascript:void(0);">Texto 9</a></li>
					</ul>
				</li>
			</ul>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="Texto 10">
				</div>
				<button type="submit" class="btn btn-primary">Texto 11</button>
			</form>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="javascript:void(0);"><strong>Texto 12</strong></a></li>
				<li class="dropdown">
					<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><strong>Texto 13</strong> <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="javascript:void(0);">Texto 14</a></li>
						<li><a href="javascript:void(0);">Texto 15</a></li>
						<li><a href="javascript:void(0);">Texto 16</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="javascript:void(0);">Texto 17</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>

Imagem de marca

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-b" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><img alt="SEST SENAT" height="20" src="img/logotipo-sest-senat-original.png"></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-b">
			<ul class="nav navbar-nav">
				<li class="active"><a href="javascript:void(0);"><strong>Texto 1</strong> <span class="sr-only">(atual)</span></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 2</strong></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 3</strong></a></li>
			</ul>
		</div>
	</div>
</nav>
<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-c" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><img alt="SEST SENAT" height="20" src="img/logotipo-sest-senat-original-inverso.png"></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-c">
			<ul class="nav navbar-nav">
				<li class="active"><a href="javascript:void(0);"><strong>Texto 1</strong> <span class="sr-only">(atual)</span></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 2</strong></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 3</strong></a></li>
			</ul>
		</div>
	</div>
</nav>

Formulários

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-d" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><strong>Texto 1</strong></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-d">
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="Texto 2">
				</div>
				<button type="submit" class="btn btn-primary">Texto 3</button>
			</form>
		</div>
	</div>
</nav>

Botões

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-e" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><strong>Texto 1</strong></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-e">
			<button type="button" class="btn btn-default navbar-btn">Texto 2</button>
			<button type="button" class="btn btn-primary navbar-btn">Texto 3</button>
			<button type="button" class="btn btn-success navbar-btn">Texto 4</button>
			<button type="button" class="btn btn-info navbar-btn">Texto 5</button>
			<button type="button" class="btn btn-warning navbar-btn">Texto 6</button>
			<button type="button" class="btn btn-danger navbar-btn">Texto 6</button>
		</div>
	</div>
</nav>

Texto

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-f" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><strong>Texto 1</strong></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-f">
			<p class="navbar-text">Texto texto texto</p>
		</div>
	</div>
</nav>

Links de não navegação

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-g" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><strong>Texto 1</strong> <span class="sr-only">(atual)</span></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-g">
			<p class="navbar-text navbar-left">Texto <a href="javascript:void(0);" class="navbar-link">texto</a></p>
		</div>
	</div>
</nav>

Alinhamento

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-h" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);">Texto 1</a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-h">
			<ul class="nav navbar-nav navbar-right">
				<li class="active"><a href="javascript:void(0);"><strong>Texto 2</strong> <span class="sr-only">(atual)</span></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 3</strong></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 4</strong></a></li>
			</ul>
			<ul class="nav navbar-nav navbar-left">
				<li><a href="javascript:void(0);"><strong>Texto 5</strong></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 6</strong></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 7</strong></a></li>
			</ul>
		</div>
	</div>
</nav>

Fixo no topo

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-i" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><strong>Texto 1</strong></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-i">
			<ul class="nav navbar-nav">
				<li class="active"><a href="javascript:void(0);"><strong>Texto 2</strong> <span class="sr-only">(atual)</span></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 3</strong></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 4</strong></a></li>
			</ul>
		</div>
	</div>
</nav>

Fixo em baixo

<nav class="navbar navbar-default navbar-fixed-bottom">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-j" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><strong>Texto 1</strong></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-j">
			<ul class="nav navbar-nav">
				<li class="active"><a href="javascript:void(0);"><strong>Texto 2</strong> <span class="sr-only">(atual)</span></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 3</strong></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 4</strong></a></li>
			</ul>
		</div>
	</div>
</nav>

Estático no topo

<nav class="navbar navbar-default navbar-static-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-k" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><strong>Texto 1</strong></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-k">
			<ul class="nav navbar-nav">
				<li class="active"><a href="javascript:void(0);"><strong>Texto 2</strong> <span class="sr-only">(atual)</span></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 3</strong></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 4</strong></a></li>
			</ul>
		</div>
	</div>
</nav>

Invertida

<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ss-nc-l" aria-expanded="false">
				<span class="sr-only">Alternar navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="javascript:void(0);"><strong>Texto 1</strong></a>
		</div>
		<div class="collapse navbar-collapse" id="ss-nc-l">
			<ul class="nav navbar-nav">
				<li class="active"><a href="javascript:void(0);"><strong>Texto 2</strong> <span class="sr-only">(atual)</span></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 3</strong></a></li>
				<li><a href="javascript:void(0);"><strong>Texto 4</strong></a></li>
			</ul>
		</div>
	</div>
</nav>

Breadcrumbs

  1. Texto
<ol class="breadcrumb">
	<li class="active">Texto</li>
</ol>
  1. Texto
  2. Texto 1
<ol class="breadcrumb">
	<li><a href="javascript:void(0);">Texto</a></li>
	<li class="active">Texto 1</li>
</ol>
  1. Texto
  2. Texto 1
  3. Texto 2
<ol class="breadcrumb">
	<li><a href="javascript:void(0);">Texto</a></li>
	<li><a href="javascript:void(0);">Texto 1</a></li>
	<li class="active">Texto 2</li>
</ol>

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

Texto texto Texto texto

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

Thumbnails

Padrão

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

Conteúdo personalizado

200x200

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 1 Texto 2

200x200

Texto 2

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

Texto 1 Texto 2

200x200

Texto 3

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

Texto 1 Texto 2

<div class="row">
	<div class="col-xs-8 col-md-3">
		<div class="thumbnail">
			<img src="img/logotipo-sest-senat-200-200.png" alt="200x200">
			<div class="caption">
				<h3>Texto 1</h3>
				<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.</p>
				<p><a href="javascript:void(0);" class="btn btn-primary" role="button">Texto 1</a> <a href="javascript:void(0);" class="btn btn-default" role="button">Texto 2</a></p>
			</div>
		</div>
	</div>
	<div class="col-xs-8 col-md-3">
		<div class="thumbnail">
			<img src="img/logotipo-sest-senat-200-200.png" alt="200x200">
			<div class="caption">
				<h3>Texto 2</h3>
				<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.</p>
				<p><a href="javascript:void(0);" class="btn btn-primary" role="button">Texto 1</a> <a href="javascript:void(0);" class="btn btn-default" role="button">Texto 2</a></p>
			</div>
		</div>
	</div>
	<div class="col-xs-8 col-md-3">
		<div class="thumbnail">
			<img src="img/logotipo-sest-senat-200-200.png" alt="200x200">
			<div class="caption">
				<h3>Texto 3</h3>
				<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.</p>
				<p><a href="javascript:void(0);" class="btn btn-primary" role="button">Texto 1</a> <a href="javascript:void(0);" class="btn btn-default" role="button">Texto 2</a></p>
			</div>
		</div>
	</div>
</div>

Alerta

Padrão

<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

<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

<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

60% completo 
<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>
0%
2% 
<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

40% Completo
40% Completo (sucesso)
20% Completo (informação)
60% Completo (aviso)
80% Completo (perigo) 
<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

75% Completo (sucesso)
40% Completo (sucesso)
20% Completo (informação)
60% Completo (aviso)
80% Completo (perigo) 
<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

45% Completo 
<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

35% Completo (sucesso)
20% Completo (aviso)
10% Completo (perigo) 
<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

64x64

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. 
<div class="media">
	<div class="media-left">
		<a href="javascript:void(0);">
			<img class="media-object" src="img/logotipo-sest-senat-64-64.png" 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>
64x64

Texto 2

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
64x64

Texto 3

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 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/logotipo-sest-senat-64-64.png" 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/logotipo-sest-senat-64-64.png" 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

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
64x64 
<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/logotipo-sest-senat-64-64.png" alt="64x64">
				</a>
			</div>
		</div>
64x64

Texto 5

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
64x64 
<div class="media">
	<div class="media-left">
		<a href="javascript:void(0);">
			<img class="media-object" src="img/logotipo-sest-senat-64-64.png" 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/logotipo-sest-senat-64-64.png" alt="64x64">
		</a>
	</div>
</div>

Alinhamento

64x64

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.

64x64

Texto 2

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

64x64

Texto 3

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 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/logotipo-sest-senat-64-64.png" 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/logotipo-sest-senat-64-64.png" 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/logotipo-sest-senat-64-64.png" 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>

Conteúdo personalizado

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 2

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

Texto 3

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

Texto 4

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

Texto 5

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 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="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 texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

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 texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.

  • 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>

Vídeos responsivos

4:3

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

16:9

<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>