Overview
container
While containers can be nested, most layouts do not require a nested container.
<div class= "container" >
<!-- Content here -->
</div>
container-fluid
Use .container-fluid
for a full width container, spanning the
entire width of the viewport.
<div class= "container-fluid" >
...
</div>
Display headings
Display 1
Display 2
Display 3
Display 4
<h1 class= "display-1" > Display 1</h1>
<h1 class= "display-2" > Display 2</h1>
<h1 class= "display-3" > Display 3</h1>
<h1 class= "display-4" > Display 4</h1>
Blockquotes with Naming a source
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
<blockquote class= "blockquote" >
<p class= "mb-0" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class= "blockquote-footer" > Someone famous in <cite title= "Source Title" > Source Title</cite></footer>
</blockquote>
alighnments
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
<blockquote class= "blockquote text-right" >
<p class= "mb-0" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class= "blockquote-footer" > Someone famous in <cite title= "Source Title" > Source Title</cite></footer>
</blockquote>
Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn more
<div class= "jumbotron" >
<h1 class= "display-4" > Hello, world!</h1>
<p class= "lead" > This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class= "my-4" >
<p> It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class= "lead" >
<a class= "btn btn-primary btn-lg" href= "#" role= "button" > Learn more</a>
</p>
</div>
Fluid jumbotron
Fluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.
<div class= "jumbotron jumbotron-fluid" >
<div class= "container" >
<h1 class= "display-4" > Fluid jumbotron</h1>
<p class= "lead" > This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
Buttons
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
<button type= "button" class= "btn btn-primary" > Primary</button>
<button type= "button" class= "btn btn-secondary" > Secondary</button>
<button type= "button" class= "btn btn-success" > Success</button>
<button type= "button" class= "btn btn-danger" > Danger</button>
<button type= "button" class= "btn btn-warning" > Warning</button>
<button type= "button" class= "btn btn-info" > Info</button>
<button type= "button" class= "btn btn-light" > Light</button>
<button type= "button" class= "btn btn-dark" > Dark</button>
<button type= "button" class= "btn btn-link" > Link</button>
Outline buttons
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<button type= "button" class= "btn btn-outline-primary" > Primary</button>
<button type= "button" class= "btn btn-outline-secondary" > Secondary</button>
<button type= "button" class= "btn btn-outline-success" > Success</button>
<button type= "button" class= "btn btn-outline-danger" > Danger</button>
<button type= "button" class= "btn btn-outline-warning" > Warning</button>
<button type= "button" class= "btn btn-outline-info" > Info</button>
<button type= "button" class= "btn btn-outline-light" > Light</button>
<button type= "button" class= "btn btn-outline-dark" > Dark</button>
Flex Properties
d-flex
<div class= "d-flex p-2 bd-highlight" > I'm a flexbox container!</div>
d-inline-flex
I'm an inline flexbox container!
<div class= "d-inline-flex p-2 bd-highlight" > I'm an inline flexbox container!</div>
Flex Direction
flex-row
Flex item 1
Flex item 2
Flex item 3
<div class= "d-flex flex-row bd-highlight mb-3" >
<div class= "p-2 bd-highlight" > Flex item 1</div>
<div class= "p-2 bd-highlight" > Flex item 2</div>
<div class= "p-2 bd-highlight" > Flex item 3</div>
</div>
flex-row-reverse
Flex item 1
Flex item 2
Flex item 3
<div class= "d-flex flex-row-reverse bd-highlight" >
<div class= "p-2 bd-highlight" > Flex item 1</div>
<div class= "p-2 bd-highlight" > Flex item 2</div>
<div class= "p-2 bd-highlight" > Flex item 3</div>
</div>
Justify Content
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class= "d-flex justify-content-start" > ...</div>
<div class= "d-flex justify-content-end" > ...</div>
<div class= "d-flex justify-content-center" > ...</div>
<div class= "d-flex justify-content-between" > ...</div>
<div class= "d-flex justify-content-around" > ...</div>
Badges
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h1> Example heading <span class= "badge badge-secondary" > New</span></h1>
<h2> Example heading <span class= "badge badge-secondary" > New</span></h2>
<h3> Example heading <span class= "badge badge-secondary" > New</span></h3>
<h4> Example heading <span class= "badge badge-secondary" > New</span></h4>
<h5> Example heading <span class= "badge badge-secondary" > New</span></h5>
<h6> Example heading <span class= "badge badge-secondary" > New</span></h6>
Lists
List Group
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Active items
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<ul class= "list-group" >
<li class= "list-group-item active" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Flush
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<ul class= "list-group list-group-flush" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
With Badges
Cras justo odio
14
Dapibus ac facilisis in
2
Morbi leo risus
1
<ul class= "list-group" >
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Cras justo odio
<span class= "badge badge-primary badge-pill" > 14</span>
</li>
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Dapibus ac facilisis in
<span class= "badge badge-primary badge-pill" > 2</span>
</li>
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Morbi leo risus
<span class= "badge badge-primary badge-pill" > 1</span>
</li>
</ul>
Breadcrumb
<nav aria-label= "breadcrumb" >
<ol class= "breadcrumb" >
<li class= "breadcrumb-item active" aria-current= "page" > Home</li>
</ol>
</nav>
<nav aria-label= "breadcrumb" >
<ol class= "breadcrumb" >
<li class= "breadcrumb-item" ><a href= "#" > Home</a></li>
<li class= "breadcrumb-item active" aria-current= "page" > Library</li>
</ol>
</nav>
<nav aria-label= "breadcrumb" >
<ol class= "breadcrumb" >
<li class= "breadcrumb-item" ><a href= "#" > Home</a></li>
<li class= "breadcrumb-item" ><a href= "#" > Library</a></li>
<li class= "breadcrumb-item active" aria-current= "page" > Data</li>
</ol>
</nav>
Tables
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
<table class= "table" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
Striped rows
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
<table class= "table table-striped" >
<thead>
<tr>
<th scope= "col" > #</th>
<th scope= "col" > First</th>
<th scope= "col" > Last</th>
<th scope= "col" > Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "row" > 1</th>
<td> Mark</td>
<td> Otto</td>
<td> @mdo</td>
</tr>
<tr>
<th scope= "row" > 2</th>
<td> Jacob</td>
<td> Thornton</td>
<td> @fat</td>
</tr>
<tr>
<th scope= "row" > 3</th>
<td> Larry</td>
<td> the Bird</td>
<td> @twitter</td>
</tr>
</tbody>
</table>
Modals
Live demo
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModal" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLabel" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
Vertically centered
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalCenter" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalCenter" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalCenterTitle" aria-hidden= "true" >
<div class= "modal-dialog modal-dialog-centered" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLongTitle" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
Forms
<form>
<div class= "form-group" >
<label for= "exampleInputEmail1" > Email address</label>
<input type= "email" class= "form-control" id= "exampleInputEmail1" aria-describedby= "emailHelp" placeholder= "Enter email" >
<small id= "emailHelp" class= "form-text text-muted" > We'll never share your email with anyone else.</small>
</div>
<div class= "form-group" >
<label for= "exampleInputPassword1" > Password</label>
<input type= "password" class= "form-control" id= "exampleInputPassword1" placeholder= "Password" >
</div>
<div class= "form-check" >
<input type= "checkbox" class= "form-check-input" id= "exampleCheck1" >
<label class= "form-check-label" for= "exampleCheck1" > Check me out</label>
</div>
<button type= "submit" class= "btn btn-primary" > Submit</button>
</form>
Readonly plain text
<form>
<div class= "form-group row" >
<label for= "staticEmail" class= "col-sm-2 col-form-label" > Email</label>
<div class= "col-sm-10" >
<input type= "text" readonly class= "form-control-plaintext" id= "staticEmail" value= "[email protected] " >
</div>
</div>
<div class= "form-group row" >
<label for= "inputPassword" class= "col-sm-2 col-form-label" > Password</label>
<div class= "col-sm-10" >
<input type= "password" class= "form-control" id= "inputPassword" placeholder= "Password" >
</div>
</div>
</form>