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>
<a class= "btn btn-primary btn-lg mt-4" href= "#" role= "button" > Learn more</a>
</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>
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds
separators via CSS.
< 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 >
Dividers
< nav style = "--bs-breadcrumb-divider: '>';" 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 >
Cards
Card title
Some quick example text to build on the card title and make up the bulk
of the card's content.
Go somewhere
< div class = "card" style = "width: 18rem;" >
< img src = "images/card.jpg" class = "card-img-top" alt = "..." >
< div class = "card-body" >
< h5 class = "card-title" > Card title</ h5 >
< p class = "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</ p >
< a href = "#" class = "btn btn-primary" > Go somewhere</ a >
</ div >
</ 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>
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>
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
Launch demo modal
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.
<!-- 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" >
<p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.
</p>
</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
Launch demo modal
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.
<!-- 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" >
<p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.
</p>
</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@example.com" >
</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>