<div class="alert alert-primary" role="alert">
<strong>Well done!</strong> You successfully read this
important alert message.
</div><div class="alert alert-secondary" role="alert">
<strong>Well done!</strong> You successfully read this
important alert message.
</div><div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this
important alert message.
</div><div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention,
but it's not super important.
</div><div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div><div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div><div class="alert alert-light" role="alert">
<strong>Well done!</strong> You successfully read this
important alert message.
</div><div class="alert alert-dark" role="alert">
<strong>Well done!</strong> You successfully read this
important alert message.
</div><div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong>
<a href="#!" class="alert-link">Change a few things up</a>
and try submitting again.
</div><div class="alert alert-warning alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div><div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
You successfully read this important alert message.
</div><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><span class="badge badge-pill badge-primary">Secondary</span><span class="badge badge-primary">Primary</span><span class="badge badge-secondary">Secondary</span><span class="badge badge-success">Success</span><span class="badge badge-info">Info</span><span class="badge badge-warning">Warning</span><span class="badge badge-danger">Danger</span><span class="badge badge-light">Light</span><span class="badge badge-dark">Dark</span><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-info">Info</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-danger">Danger</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><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-info">Info</button><button type="button" class="btn btn-outline-warning">Warning</button><button type="button" class="btn btn-outline-danger">Danger</button><button type="button" class="btn btn-outline-light">Light</button><button type="button" class="btn btn-outline-dark">Dark</button><div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div><div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div><div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div><div class="btn-group-vertical" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div><div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#!">Dropdown link</a>
<a class="dropdown-item" href="#!">Dropdown link</a>
</div>
</div>
</div><div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
</div>
<div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div><button type="button" class="btn btn-primary btn-lg">Large button</button><button type="button" class="btn btn-primary btn-sm">Small button</button><button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button><div class="card">
<img class="card-img-top" src="./img/pathToYourImage.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<div class="card">
<div class="card-body">
This is some text within a card block.
</div>
</div><div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="card-link">Card link</a>
<a href="#!" class="card-link">Another link</a>
</div>
</div>Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link<div class="card">
<img class="card-img-top" src="./img/pathToYourImage.png" alt="Card image cap">
<div class="card-body"> Some more card content </div>
</div><div class="card">
<div class="card-body">
<p class="card-text">This image is in the middle</p>
</div>
<img src="./img/pathToYourImage.png" alt="Card image">
<div class="card-body">
<p class="card-text">of a card.</p>
</div>
</div>This image is in the middle
of a card.
This image is in the middle
of a card.
<div class="card">
<div class="card-body"> Some more card content </div>
<img class="card-img-bottom" src="./img/pathToYourImage.png" alt="Card image cap">
</div><div class="card">
<img class="card-img" src="./img/pathToYourImage.png" alt="Card image">
<div class="card-img-overlay">
<p class="card-text">I'm text that has a background image!</p>
</div>
</div><div class="card">
<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">Vestibulum at eros</li>
</ul>
</div><div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>With supporting text below as a natural lead-in to additional content.
<div class="card">
<h3 class="card-header">Featured</h3>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#!" class="btn btn-primary">Go somewhere</a>
</div>
</div>With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card-group">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
</div>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This card has supporting text below as a natural lead-in to additional content.
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<div class="card-deck">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
</div>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This card has supporting text below as a natural lead-in to additional content.
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<div class="card-columns">
<div class="card">
<div class="card-body">
<!-- Card content -->
</div>
</div>
<div class="card p-3">
<!-- Card content -->
</div>
<div class="card">
<div class="card-body">
<!-- Card content -->
</div>
</div>
<div class="card bg-primary p-3 text-center">
<!-- Card content -->
</div>
</div>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<!-- Tip: use bg-* and text-* utilities to style the card -->
<div class="card text-white bg-primary mb-3 d-inline-block" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<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>
</div>
</div>
<div class="card text-white bg-dark mb-3 d-inline-block" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<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>
</div>
</div>Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="#" data-src="holder.js/900x400?theme=social" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="#" data-src="holder.js/900x400?theme=industrial" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><div id="carouselFadeExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="#" data-src="holder.js/900x400?theme=social" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="#" data-src="holder.js/900x400?theme=industrial" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselFadeExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselFadeExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="#" data-src="holder.js/900x400?theme=social" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="#" data-src="holder.js/900x400?theme=industrial" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" data-src="holder.js/900x300?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" data-src="holder.js/900x300?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div><div id="accordion" role="tablist">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div><div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
</div>
</div><div class="btn-group">
<button type="button" class="btn btn-secondary">Dropdown</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
</div>
</div><br> <br> <br> <br>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Something else here</a>
</div>
</div><br> <br> <br> <br>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div><div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div><div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div><div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenu3" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
</div>
</div><div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenu4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
</div>
</div><div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenu5" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#!">Separated link</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item" href="#!">Another action</a>
</div>
</div><div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle"
type="button" id="dropdownMenu5" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item disabled" href="#!">Disabled action</a>
</div>
</div><form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form><form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form><form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form><input class="form-control" type="text" placeholder="Default input"><input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"><input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"><input type="file" class="form-control-file" id="exampleFormControlFile1"><input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com"><input type="range" class="form-control-range"><div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div><div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div><form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form><input class="form-control" type="text" placeholder="Readonly input here…" readonly><div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Left addon</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">Right addon</span>
</div>
</div><div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-success" type="button">Love it</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div><div class="input-group">
<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-success" type="button">Love it</button>
</div>
</div><div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div><div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div><div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div><div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div><div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div><div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div><div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div><select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select><div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div><label for="customRange1">Basic range</label>
<input type="range" class="custom-range" id="customRange1">
<label class="mt-3" for="customRange3">Range with steps</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3"><div class="container">
<!-- Content here -->
</div><div class="container-fluid">
<!-- A fluid container that uses the full witdh -->
</div><div class="container">
<div class="row">
<!-- col- elements here -->
</div>
</div><div class="container">
<div class="row">
<div class="col-2">
<!-- Content -->
</div>
<div class="col-2">
<!-- Content -->
</div>
<div class="col-8">
<!-- Content -->
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col-sm-2">
<!-- Content -->
</div>
<div class="col-sm-2">
<!-- Content -->
</div>
<div class="col-sm-8">
<!-- Content -->
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col-md-2">
<!-- Content -->
</div>
<div class="col-md-2">
<!-- Content -->
</div>
<div class="col-md-8">
<!-- Content -->
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col-lg-2">
<!-- Content -->
</div>
<div class="col-lg-2">
<!-- Content -->
</div>
<div class="col-lg-8">
<!-- Content -->
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col-xl-2">
<!-- Content -->
</div>
<div class="col-xl-2">
<!-- Content -->
</div>
<div class="col-xl-8">
<!-- Content -->
</div>
</div>
</div><!-- Equal width cols, same on all screen sizes -->
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div><!-- responsive equal width cols, can be sm, md, lg, or xl -->
<div class="container">
<div class="row">
<div class="col-sm">1 of 3</div>
<div class="col-sm">1 of 3</div>
<div class="col-sm">1 of 3</div>
</div>
</div><div class="container">
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div><div class="container">
<div class="row">
<div class="col-3 offset-6">
<!-- Content -->
</div>
</div>
<!-- This class can be used with responsive classes such as -md- as well: -->
<div class="row">
<div class="col-md-3 offset-md-6">
<!-- Content -->
</div>
</div>
</div><div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
<!-- responsive variations -->
<div class="col order-sm-3">Ordered column</div>
<div class="col order-md-3">Ordered column</div>
<div class="col order-lg-3">Ordered column</div>
<div class="col order-xl-3">Ordered column</div><div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div><img src="./img/pathToYourImage.png" class="img-fluid" alt="Responsive image"><img class="img-thumbnail" src="./img/pathToYourImage.png" alt="Thumbnail image"><div class="jumbotron">
<h1 class="display-3">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-2">
<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">Some action</a>
</p>
</div>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.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies
the entire horizontal space of its parent.</p>
</div>
</div>This is a modified jumbotron that occupies the entire horizontal space of its parent.
<ul class="list-group">
<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><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>
</ul><ul class="list-group">
<li class="list-group-item disabled">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
</ul><div class="list-group">
<a href="#!" class="list-group-item active">Cras justo odio</a>
<a href="#!" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#!" class="list-group-item list-group-item-action">Morbi leo risus</a>
</div><div class="list-group">
<a href="#!" class="list-group-item list-group-item-action list-group-item-primary">Dapibus ac facilisis in</a>
</div><div class="list-group">
<a href="#!" class="list-group-item list-group-item-action list-group-item-secondary">Dapibus ac facilisis in</a>
</div><div class="list-group">
<a href="#!" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
</div><div class="list-group">
<a href="#!" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
</div><div class="list-group">
<a href="#!" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
</div><div class="list-group">
<a href="#!" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
</div><div class="list-group">
<a href="#!" class="list-group-item list-group-item-action list-group-item-light">Dapibus ac facilisis in</a>
</div><div class="list-group">
<a href="#!" class="list-group-item list-group-item-action list-group-item-dark">Dapibus ac facilisis in</a>
</div><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><div class="list-group">
<a href="#!" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#!" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
<a href="#!" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.<div class="media">
<img class="d-flex mr-3" data-src="holder.js/64x64?theme=sky" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div><div class="media">
<img class="d-flex mr-3" src="./img/pathToYourImage.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media mt-3">
<a class="d-flex pr-3" href="#!">
<img src="./img/pathToYourImage.png" alt="Generic placeholder image">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div><div class="media">
<img class="d-flex align-self-start mr-3" src="./img/pathToYourImage.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<img class="d-flex align-self-center mr-3" src="./img/pathToYourImage.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<img class="d-flex align-self-end mr-3" src="./img/pathToYourImage.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
<img class="d-flex ml-3" src="./img/pathToYourImage.png" alt="Generic placeholder image">
</div><!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" 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><!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch centered demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModalVertical" tabindex="-1" role="dialog" aria-labelledby="exampleModalVerticalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalVerticalLabel">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><!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal3Label">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><!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
Large modal
</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div><!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">
Small modal
</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog"
aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div><nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#!" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#!">1</a></li>
<li class="page-item"><a class="page-link" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item">
<a class="page-link" href="#!" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav><nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#!" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#!">1</a></li>
<li class="page-item active">
<a class="page-link" href="#!">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item">
<a class="page-link" href="#!">Next</a>
</li>
</ul>
</nav><nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#!" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#!">1</a></li>
<li class="page-item active">
<a class="page-link" href="#!">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item">
<a class="page-link" href="#!">Next</a>
</li>
</ul>
</nav><nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#!" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#!">1</a></li>
<li class="page-item"><a class="page-link" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item">
<a class="page-link" href="#!">Next</a>
</li>
</ul>
</nav><nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#!" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#!">1</a></li>
<li class="page-item"><a class="page-link" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item">
<a class="page-link" href="#!">Next</a>
</li>
</ul>
</nav><!-- Note: A custom script is used to activate popovers:
$(function(){
$('[data-toggle="popover"]').popover()
});
-->
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="top"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="right"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body"
data-toggle="popover" data-placement="left"
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button><!-- Note: A custom script is used to activate popovers:
$(function(){
$('[data-toggle="popover"]').popover()
});
-->
<a tabindex="0" class="btn btn-lg btn-danger" role="button"
data-toggle="popover" data-trigger="focus" title="Dismissible popover"
data-content="Click anywhere to dismiss this popover">
Dismissible popover
</a><div class="progress">
<div class="progress-bar" role="progressbar" style="width: 41%" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
</div><div class="progress">
<div class="progress-bar" role="progressbar" style="width: 41%" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
</div><div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%; height: 35px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><div class="progress"> <div class="progress-bar bg-primary" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 38%" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-light" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div><div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div><div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div><div class="progress"> <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-secondary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 38%" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-light" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div><div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div><!-- Custom css that makes this example work like it does: -->
<style type="text/css" scoped>
.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}
</style>
<!-- Actual scrollspy markup: -->
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<h3 class="navbar-brand">Project Name</h3>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#verse1">Verse 1</a></li>
<li class="nav-item"><a class="nav-link" href="#verse2">Verse 2</a></li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="verse1">Verse 1</h4>
<p>May <br> the <br> gods <br> forgive <br> me.</p>
<h4 id="verse2">Verse 2</h4>
<p>For <br> this <br> rampant <br> abuse <br> of <br> br-tags.</p>
</div>May
the
gods
forgive
me.
For
this
rampant
abuse
of
br-tags.
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead class="thead-light">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table table-borderless">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table table-sm">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table table-responsive">
<!-- table content here -->
</table>
<table class="table table-sm-responsive"><!-- ... --></table>
<table class="table table-md-responsive"><!-- ... --></table>
<table class="table table-lg-responsive"><!-- ... --></table>
<table class="table table-xl-responsive"><!-- ... --></table>| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<table class="table table-reflow">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>| # | Table heading | Table heading | Table heading |
|---|---|---|---|
| 1 | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="table-secondary">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="table-info">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="table-danger">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="table-light">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="table-dark">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>| # | First Name | Last Name |
|---|---|---|
| 1 | Mark | Otto |
| 2 | Jacob | Thornton |
<!-- Note: A custom script is used to activate tooltips:
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
-->
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
data-placement="top" title="Tooltip on top"> Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
data-placement="right" title="Tooltip on right"> Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
data-placement="left" title="Tooltip on left"> Tooltip on left
</button><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><p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<blockquote class="blockquote">
<p class="mb-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<blockquote class="blockquote blockquote-reverse">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<footer class="blockquote-footer">Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul class="list-unstyled">
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Eget porttitor lorem</li>
</ul><ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul><dl class="dl-horizontal">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">Vestibulum felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibmodo, nibh, ut fermentum massa justo sit amet risus.</dd>
</dl><span class="border border-dark">Hello World</span><span class="p-1 border border-primary border-0">Hello World</span>
<span class="p-1 border border-primary border-top-0">Hello World</span>
<span class="p-1 border border-primary border-right-0">Hello World</span>
<span class="p-1 border border-primary border-bottom-0">Hello World</span>
<span class="p-1 border border-primary border-left-0">Hello World</span><span class="border border-primary">Hello World</span><span class="border border-secondary">Hello World</span><span class="border border-success">Hello World</span><span class="border border-danger">Hello World</span><span class="border border-warning">Hello World</span><span class="border border-info">Hello World</span><span class="border border-light">Hello World</span><span class="border border-dark">Hello World</span><span class="border border-white">Hello World</span><img class="rounded" src="./img/pathToYourImage.png" alt="Rounded image"><img class="rounded-circle" src="./img/pathToYourImage.png" alt="Circle image"><img class="rounded-top" src="./img/pathToYourImage.png" alt="Circle image">
<img class="rounded-right" src="./img/pathToYourImage.png" alt="Circle image">
<img class="rounded-bottom" src="./img/pathToYourImage.png" alt="Circle image">
<img class="rounded-left" src="./img/pathToYourImage.png" alt="Circle image"><div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div><div class="bg-secondary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div><div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div><div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div><div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div><div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div><div class="bg-light">Cras mattis consectetur purus sit amet fermentum.</div><div class="bg-dark text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div><div class="bg-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div><p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>Nullam id dolor id nibh ultricies vehicula ut id elit.
<p class="text-secondary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>Nullam id dolor id nibh ultricies vehicula ut id elit.
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>Maecenas sed diam eget risus varius blandit sit amet non magna.
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>Etiam porta sem malesuada magna mollis euismod.
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-light">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>Nullam id dolor id nibh ultricies vehicula ut id elit.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-dark">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>Nullam id dolor id nibh ultricies vehicula ut id elit.
<p class="text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>Donec ullamcorper nulla non metus auctor fringilla.
Donec ullamcorper nulla non metus auctor fringilla.
<span class="d-block bg-primary">d-block</span>
<span class="d-sm-block bg-primary">d-sm-block</span>
<span class="d-md-block bg-primary">d-md-block</span>
<span class="d-lg-block bg-primary">d-lg-block</span>
<span class="d-xl-block bg-primary">d-xl-block</span><div class="d-flex bg-primary">d-flex</div>
<span class="d-sm-flex bg-primary">d-sm-flex</span>
<span class="d-md-flex bg-primary">d-md-flex</span>
<span class="d-lg-flex bg-primary">d-lg-flex</span>
<span class="d-xl-flex bg-primary">d-xl-flex</span><div class="d-inline bg-primary">d-inline</div>
<div class="d-sm-inline bg-primary">d-sm-inline</div>
<div class="d-md-inline bg-primary">d-md-inline</div>
<div class="d-lg-inline bg-primary">d-lg-inline</div>
<div class="d-xl-inline bg-primary">d-xl-inline</div><div class="d-inline-block bg-primary">d-inline-block</div>
<span class="d-sm-inline-block bg-primary">d-sm-inline-block</span>
<span class="d-md-inline-block bg-primary">d-md-inline-block</span>
<span class="d-lg-inline-block bg-primary">d-lg-inline-block</span>
<span class="d-xl-inline-block bg-primary">d-xl-inline-block</span><div class="d-inline-flex bg-primary">d-inline-flex</div>
<span class="d-sm-inline-flex bg-primary">d-sm-inline-flex</span>
<span class="d-md-inline-flex bg-primary">d-md-inline-flex</span>
<span class="d-lg-inline-flex bg-primary">d-lg-inline-flex</span>
<span class="d-xl-inline-flex bg-primary">d-xl-inline-flex</span><div class="d-none">d-none">This</div>
<span class="d-sm-none bg-primary">d-sm-none</span>
<span class="d-md-none bg-primary">d-md-none</span>
<span class="d-lg-none bg-primary">d-lg-none</span>
<span class="d-xl-none bg-primary">d-xl-none</span><div class="d-table bg-primary">d-table</div>
<span class="d-sm-table bg-primary">d-sm-table</span>
<span class="d-md-table bg-primary">d-md-table</span>
<span class="d-lg-table bg-primary">d-lg-table</span>
<span class="d-xl-table bg-primary">d-xl-table</span><div class="d-table-cell bg-primary">d-table-cell</div>
<span class="d-sm-table-cell bg-primary">d-sm-table-cell</span>
<span class="d-md-table-cell bg-primary">d-md-table-cell</span>
<span class="d-lg-table-cell bg-primary">d-lg-table-cell</span>
<span class="d-xl-table-cell bg-primary">d-xl-table-cell</span><div class="d-print-none">Doesn't display when printing</div>
<div class="d-print-block">Displays as block when printing</div>
<div class="d-print-inline">Displays as inline when printing</div>
<div class="d-print-inline-block">Displays as inline-block when printing</div><div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex flex-sm-column">...</div>
<div class="d-flex flex-md-column">...</div>
<div class="d-flex flex-lg-column">...</div>
<div class="d-flex flex-xl-column">...</div><div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex flex-sm-column-reverse">...</div>
<div class="d-flex flex-md-column-reverse">...</div>
<div class="d-flex flex-lg-column-reverse">...</div>
<div class="d-flex flex-xl-column-reverse">...</div><div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex flex-sm-row">...</div>
<div class="d-flex flex-md-row">...</div>
<div class="d-flex flex-lg-row">...</div>
<div class="d-flex flex-xl-row">...</div><div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex flex-sm-row-reverse">...</div>
<div class="d-flex flex-md-row-reverse">...</div>
<div class="d-flex flex-lg-row-reverse">...</div>
<div class="d-flex flex-xl-row-reverse">...</div><div class="d-flex flex-nowrap"> ... </div>
<div class="d-flex flex-sm-nowrap"> ... </div>
<div class="d-flex flex-md-nowrap"> ... </div>
<div class="d-flex flex-lg-nowrap"> ... </div>
<div class="d-flex flex-xl-nowrap"> ... </div><div class="d-flex flex-wrap"> ... </div>
<div class="d-flex flex-sm-wrap"> ... </div>
<div class="d-flex flex-md-wrap"> ... </div>
<div class="d-flex flex-lg-wrap"> ... </div>
<div class="d-flex flex-xl-wrap"> ... </div><div class="d-flex flex-wrap-reverse"> ... </div>
<div class="d-flex flex-sm-wrap-reverse"> ... </div>
<div class="d-flex flex-md-wrap-reverse"> ... </div>
<div class="d-flex flex-lg-wrap-reverse"> ... </div>
<div class="d-flex flex-xl-wrap-reverse"> ... </div><div class="d-flex text-white">
<div class="p-2 flex-fill bg-primary">Flex item</div>
<div class="p-2 flex-fill bg-success">Flex item</div>
<div class="p-2 flex-fill bg-primary">Flex item</div>
</div><div class="d-flex text-white">
<div class="p-2 flex-grow-1 bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="p-2 bg-primary">Third flex item</div>
</div>
<div class="d-flex text-white mt-1">
<div class="p-2 flex-sm-grow-1 bg-danger">Flex item</div>
<div class="p-2 flex-md-grow-1 bg-warning">Flex item</div>
<div class="p-2 flex-lg-grow-1 bg-danger">Flex item</div>
<div class="p-2 flex-xl-grow-1 bg-warning">Flex item</div>
</div><div class="d-flex text-white">
<div class="p-2 flex-grow-0 bg-primary">Flex item</div>
<div class="p-2 bg-success">Flex item</div>
<div class="p-2 bg-primary">Third flex item</div>
</div>
<div class="d-flex text-white mt-1">
<div class="p-2 flex-sm-grow-0 bg-danger">Flex item</div>
<div class="p-2 flex-md-grow-0 bg-warning">Flex item</div>
<div class="p-2 flex-lg-grow-0 bg-danger">Flex item</div>
<div class="p-2 flex-xl-grow-0 bg-warning">Flex item</div>
</div><div class="d-flex text-white">
<div class="p-2 w-100 bg-primary">Flex item</div>
<div class="p-2 flex-shrink-1 bg-success">Flex item</div>
</div>
<div class="d-flex text-white mt-2">
<div class="p-2 w-100 bg-warning">Flex item</div>
<div class="p-2 flex-sm-shrink-1 bg-danger">Flex item</div>
<div class="p-2 flex-md-shrink-1 bg-warning">Flex item</div>
<div class="p-2 flex-lg-shrink-1 bg-danger">Flex item</div>
<div class="p-2 flex-xl-shrink-1 bg-warning">Flex item</div>
</div<div class="d-flex text-white">
<div class="p-2 w-100 bg-primary">Flex item</div>
<div class="p-2 flex-shrink-0 bg-success">Flex item</div>
</div>
<div class="d-flex text-white mt-2">
<div class="p-2 w-100 bg-warning">Flex item</div>
<div class="p-2 flex-sm-shrink-0 bg-danger">Flex item</div>
<div class="p-2 flex-md-shrink-0 bg-warning">Flex item</div>
<div class="p-2 flex-lg-shrink-0 bg-danger">Flex item</div>
<div class="p-2 flex-xl-shrink-0 bg-warning">Flex item</div>
</div<div class="d-flex justify-content-start">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex justify-content-sm-start">...</div>
<div class="d-flex justify-content-md-start">...</div>
<div class="d-flex justify-content-lg-start">...</div>
<div class="d-flex justify-content-xl-start">...</div><div class="d-flex justify-content-end">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex justify-content-sm-end">...</div>
<div class="d-flex justify-content-md-end">...</div>
<div class="d-flex justify-content-lg-end">...</div>
<div class="d-flex justify-content-xl-end">...</div><div class="d-flex justify-content-center">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex justify-content-sm-center">...</div>
<div class="d-flex justify-content-md-center">...</div>
<div class="d-flex justify-content-lg-center">...</div>
<div class="d-flex justify-content-xl-center">...</div><div class="d-flex justify-content-between">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex justify-content-sm-between">...</div>
<div class="d-flex justify-content-md-between">...</div>
<div class="d-flex justify-content-lg-between">...</div>
<div class="d-flex justify-content-xl-between">...</div><div class="d-flex justify-content-around">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex justify-content-sm-around">...</div>
<div class="d-flex justify-content-md-around">...</div>
<div class="d-flex justify-content-lg-around">...</div>
<div class="d-flex justify-content-xl-around">...</div><div class="d-flex flex-wrap align-content-start">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
...
</div>
<!-- responsive variations -->
<div class="d-flex align-content-sm-start">...</div>
<div class="d-flex align-content-md-start">...</div>
<div class="d-flex align-content-lg-start">...</div>
<div class="d-flex align-content-xl-start">...</div><div class="d-flex flex-wrap align-content-end">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
...
</div>
<!-- responsive variations -->
<div class="d-flex align-content-sm-end">...</div>
<div class="d-flex align-content-md-end">...</div>
<div class="d-flex align-content-lg-end">...</div>
<div class="d-flex align-content-xl-end">...</div><div class="d-flex flex-wrap align-content-center">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
...
</div>
<!-- responsive variations -->
<div class="d-flex align-content-sm-center">...</div>
<div class="d-flex align-content-md-center">...</div>
<div class="d-flex align-content-lg-center">...</div>
<div class="d-flex align-content-xl-center">...</div><div class="d-flex flex-wrap align-content-around">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
...
</div>
<!-- responsive variations -->
<div class="d-flex align-content-sm-around">...</div>
<div class="d-flex align-content-md-around">...</div>
<div class="d-flex align-content-lg-around">...</div>
<div class="d-flex align-content-xl-around">...</div><div class="d-flex flex-wrap align-content-stretch">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
...
</div>
<!-- responsive variations -->
<div class="d-flex align-content-sm-stretch">...</div>
<div class="d-flex align-content-md-stretch">...</div>
<div class="d-flex align-content-lg-stretch">...</div>
<div class="d-flex align-content-xl-stretch">...</div><div class="d-flex align-items-start">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex align-items-sm-start">...</div>
<div class="d-flex align-items-md-start">...</div>
<div class="d-flex align-items-lg-start">...</div>
<div class="d-flex align-items-xl-start">...</div><div class="d-flex align-items-end">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex align-items-sm-end">...</div>
<div class="d-flex align-items-md-end">...</div>
<div class="d-flex align-items-lg-end">...</div>
<div class="d-flex align-items-xl-end">...</div><div class="d-flex align-items-center">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex align-items-sm-center">...</div>
<div class="d-flex align-items-md-center">...</div>
<div class="d-flex align-items-lg-center">...</div>
<div class="d-flex align-items-xl-center">...</div><div class="d-flex align-items-baseline">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex align-items-sm-baseline">...</div>
<div class="d-flex align-items-md-baseline">...</div>
<div class="d-flex align-items-lg-baseline">...</div>
<div class="d-flex align-items-xl-baseline">...</div><div class="d-flex align-items-stretch">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<!-- responsive variations -->
<div class="d-flex align-items-sm-stretch">...</div>
<div class="d-flex align-items-md-stretch">...</div>
<div class="d-flex align-items-lg-stretch">...</div>
<div class="d-flex align-items-xl-stretch">...</div><div class="align-self-start">Aligned flex item</div>
<!-- responsive variations -->
<div class="align-self-sm-start">Aligned flex item</div>
<div class="align-self-md-start">Aligned flex item</div>
<div class="align-self-lg-start">Aligned flex item</div>
<div class="align-self-xl-start">Aligned flex item</div><div class="align-self-end">Aligned flex item</div>
<!-- responsive variations -->
<div class="align-self-sm-end">Aligned flex item</div>
<div class="align-self-md-end">Aligned flex item</div>
<div class="align-self-lg-end">Aligned flex item</div>
<div class="align-self-xl-end">Aligned flex item</div><div class="align-self-center">Aligned flex item</div>
<!-- responsive variations -->
<div class="align-self-sm-center">Aligned flex item</div>
<div class="align-self-md-center">Aligned flex item</div>
<div class="align-self-lg-center">Aligned flex item</div>
<div class="align-self-xl-center">Aligned flex item</div><div class="align-self-baseline">Aligned flex item</div>
<!-- responsive variations -->
<div class="align-self-sm-baseline">Aligned flex item</div>
<div class="align-self-md-baseline">Aligned flex item</div>
<div class="align-self-lg-baseline">Aligned flex item</div>
<div class="align-self-xl-baseline">Aligned flex item</div><div class="align-self-stretch">Aligned flex item</div>
<!-- responsive variations -->
<div class="align-self-sm-stretch">Aligned flex item</div>
<div class="align-self-md-stretch">Aligned flex item</div>
<div class="align-self-lg-stretch">Aligned flex item</div>
<div class="align-self-xl-stretch">Aligned flex item</div><div class="d-flex flex-nowrap">
<div class="order-8 p-2">First flex item</div>
<div class="order-12 p-2">Second flex item</div>
<div class="order-3 p-2">Third flex item</div>
</div>
<!-- responsive variations -->
<div class="order-sm-3">Flex item</div>
<div class="order-md-3">Flex item</div>
<div class="order-lg-3">Flex item</div>
<div class="order-xl-3">Flex item</div><button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button><div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/48OJbbI0DfE" allowfullscreen></iframe>
</div><div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div><div class="shadow-sm p-3 mb-5 bg-light rounded">Small Shadow shadow</div><div class="shadow p-3 mb-5 bg-light rounded">Regular shadow</div><div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div><div class="invisible">...</div><div class="visible">...</div><a class="sr-only" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable" href="#content">Skip to main content</a><span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span><div class="clearfix">...</div><div class="fixed-top bg-primary">Fixed top</div><div class="fixed-bottom bg-primary">Fixed bottom</div><div class="sticky-top bg-primary">Sticky top</div><div class="float-left">Float left on all viewport sizes</div>
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><div class="float-right">Float right on all viewport sizes</div>
<div class="float-sm-right">Float right on viewports sized SM (small) or wider</div>
<div class="float-md-right">Float right on viewports sized MD (medium) or wider</div>
<div class="float-lg-right">Float right on viewports sized LG (large) or wider</div>
<div class="float-xl-right">Float right on viewports sized XL (extra-large) or wider</div><div class="float-none">Don't float on all viewport sizes</div>
<div class="float-sm-none">Don't float on viewports sized SM (small) or wider</div>
<div class="float-md-none">Don't float on viewports sized MD (medium) or wider</div>
<div class="float-lg-none">Don't float on viewports sized LG (large) or wider</div>
<div class="float-xl-none">Don't float on viewports sized XL (extra-large) or wider</div><div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div><div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div><img class="mw-100" src="# alt="Max-width 100%"><img class="mh-100" src="# alt="Max-height 100%"><div class="m-0 bg-primary d-inline-block">Spaced Div</div>
<div class="m-1 bg-primary d-inline-block">Spaced Div</div>
<div class="m-2 bg-primary d-inline-block">Spaced Div</div>
<div class="m-3 bg-primary d-inline-block">Spaced Div</div>
<div class="m-4 bg-primary d-inline-block">Spaced Div</div>
<div class="m-5 bg-primary d-inline-block">Spaced Div</div>
<!-- respsonsive viariations -->
<div class="m-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="m-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="m-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="m-xl-5 d-inline-block bg-primary">Spaced Div</div><div class="mt-0 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-1 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-2 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-3 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-4 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-5 bg-primary d-inline-block">Spaced Div</div>
<!-- respsonsive viariations -->
<div class="mt-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mt-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mt-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mt-xl-5 d-inline-block bg-primary">Spaced Div</div><div class="mr-0 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-1 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-2 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-3 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-4 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-5 bg-primary d-inline-block">Spaced Div</div>
<!-- respsonsive viariations -->
<div class="mr-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mr-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mr-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mr-xl-5 d-inline-block bg-primary">Spaced Div</div><div class="mb-0 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-1 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-2 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-3 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-4 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-5 bg-primary d-inline-block">Spaced Div</div>
<!-- respsonsive viariations -->
<div class="mb-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mb-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mb-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mb-xl-5 d-inline-block bg-primary">Spaced Div</div><div class="ml-0 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-1 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-2 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-3 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-4 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-5 bg-primary d-inline-block">Spaced Div</div>
<!-- respsonsive viariations -->
<div class="ml-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="ml-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="ml-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="ml-xl-5 d-inline-block bg-primary">Spaced Div</div><div class="mx-0 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-1 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-2 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-3 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-4 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-5 bg-primary d-inline-block">Spaced Div</div>
<!-- respsonsive viariations -->
<div class="mx-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mx-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mx-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mx-xl-5 d-inline-block bg-primary">Spaced Div</div><div class="my-0 bg-primary d-inline-block">Spaced Div</div>
<div class="my-1 bg-primary d-inline-block">Spaced Div</div>
<div class="my-2 bg-primary d-inline-block">Spaced Div</div>
<div class="my-3 bg-primary d-inline-block">Spaced Div</div>
<div class="my-4 bg-primary d-inline-block">Spaced Div</div>
<div class="my-5 bg-primary d-inline-block">Spaced Div</div>
<!-- respsonsive viariations -->
<div class="my-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="my-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="my-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="my-xl-5 d-inline-block bg-primary">Spaced Div</div><div class="p-0 bg-primary d-inline-block">Padded Div</div>
<div class="p-1 bg-primary d-inline-block">Padded Div</div>
<div class="p-2 bg-primary d-inline-block">Padded Div</div>
<div class="p-3 bg-primary d-inline-block">Padded Div</div>
<div class="p-4 bg-primary d-inline-block">Padded Div</div>
<div class="p-5 bg-primary d-inline-block">Padded Div</div>
<!-- respsonsive viariations -->
<div class="p-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="p-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="p-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="p-xl-5 d-inline-block bg-primary">Padded Div</div><div class="pt-0 bg-primary d-inline-block">Padded Div</div>
<div class="pt-1 bg-primary d-inline-block">Padded Div</div>
<div class="pt-2 bg-primary d-inline-block">Padded Div</div>
<div class="pt-3 bg-primary d-inline-block">Padded Div</div>
<div class="pt-4 bg-primary d-inline-block">Padded Div</div>
<div class="pt-5 bg-primary d-inline-block">Padded Div</div>
<!-- respsonsive viariations -->
<div class="pt-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="pt-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="pt-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="pt-xl-5 d-inline-block bg-primary">Padded Div</div><div class="pr-0 bg-primary d-inline-block">Padded Div</div>
<div class="pr-1 bg-primary d-inline-block">Padded Div</div>
<div class="pr-2 bg-primary d-inline-block">Padded Div</div>
<div class="pr-3 bg-primary d-inline-block">Padded Div</div>
<div class="pr-4 bg-primary d-inline-block">Padded Div</div>
<div class="pr-5 bg-primary d-inline-block">Padded Div</div>
<!-- respsonsive viariations -->
<div class="pr-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="pr-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="pr-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="pr-xl-5 d-inline-block bg-primary">Padded Div</div><div class="pb-0 bg-primary d-inline-block">Padded Div</div>
<div class="pb-1 bg-primary d-inline-block">Padded Div</div>
<div class="pb-2 bg-primary d-inline-block">Padded Div</div>
<div class="pb-3 bg-primary d-inline-block">Padded Div</div>
<div class="pb-4 bg-primary d-inline-block">Padded Div</div>
<div class="pb-5 bg-primary d-inline-block">Padded Div</div>
<!-- respsonsive viariations -->
<div class="pb-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="pb-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="pb-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="pb-xl-5 d-inline-block bg-primary">Padded Div</div><div class="pl-0 bg-primary d-inline-block">Padded Div</div>
<div class="pl-1 bg-primary d-inline-block">Padded Div</div>
<div class="pl-2 bg-primary d-inline-block">Padded Div</div>
<div class="pl-3 bg-primary d-inline-block">Padded Div</div>
<div class="pl-4 bg-primary d-inline-block">Padded Div</div>
<div class="pl-5 bg-primary d-inline-block">Padded Div</div>
<!-- respsonsive viariations -->
<div class="pl-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="pl-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="pl-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="pl-xl-5 d-inline-block bg-primary">Padded Div</div><div class="px-0 bg-primary d-inline-block">Padded Div</div>
<div class="px-1 bg-primary d-inline-block">Padded Div</div>
<div class="px-2 bg-primary d-inline-block">Padded Div</div>
<div class="px-3 bg-primary d-inline-block">Padded Div</div>
<div class="px-4 bg-primary d-inline-block">Padded Div</div>
<div class="px-5 bg-primary d-inline-block">Padded Div</div>
<!-- respsonsive viariations -->
<div class="px-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="px-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="px-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="px-xl-5 d-inline-block bg-primary">Padded Div</div><div class="py-0 bg-primary d-inline-block">Padded Div</div>
<div class="py-1 bg-primary d-inline-block">Padded Div</div>
<div class="py-2 bg-primary d-inline-block">Padded Div</div>
<div class="py-3 bg-primary d-inline-block">Padded Div</div>
<div class="py-4 bg-primary d-inline-block">Padded Div</div>
<div class="py-5 bg-primary d-inline-block">Padded Div</div>
<!-- respsonsive viariations -->
<div class="py-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="py-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="py-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="py-xl-5 d-inline-block bg-primary">Padded Div</div><p class="font-weight-bold">Bold text.</p>Bold text.
<p class="font-weight-light">Light text.</p>Light text.
<p class="font-weight-normal">Normal weight text.</p>Normal weight text.
<p class="font-italic">Italicized text.</p>Italicized text.
<p class="text-monospace">This is in monospace</p>This is in monospace
<p class="text-justify">Justified text.</p>Justified text.
<p class="text-nowrap">No wrap text.</p>No wrap text.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>Left aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>Right aligned text on all viewport sizes.
Right aligned text on viewports sized SM (small) or wider.
Right aligned text on viewports sized MD (medium) or wider.
Right aligned text on viewports sized LG (large) or wider.
Right aligned text on viewports sized XL (extra-large) or wider.
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-sm-center">Center aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-center">Center aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-center">Center aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-center">Center aligned text on viewports sized XL (extra-large) or wider.</p>Center aligned text on all viewport sizes.
Center aligned text on viewports sized SM (small) or wider.
Center aligned text on viewports sized MD (medium) or wider.
Center aligned text on viewports sized LG (large) or wider.
Center aligned text on viewports sized XL (extra-large) or wider.
<p class="text-lowercase">lowercased text.</p>lowercased text.
<p class="text-uppercase">uppercased text.</p>uppercased text.
<p class="text-capitalize">capitalized text.</p>capitalized text.
<p class="text-truncate">truncated text.</p>truncated text.
<p class="text-body">I'm a text with the default body color.</p>I'm a text with the default body color.
<p class="text-black-50">I'm a text with 50% opacity black.</p>I'm a text with 50% opacity black.
<p class="text-white-50 bg-danger">I'm a text with 50% opacity white</p>I'm a text with 50% opacity white
<p class="text-muted"> Heron alap ceroau kesse elex ruta. Tauru hemed ela meliado egeb selof.</p>Heron alap ceroau kesse elex ruta. Tauru hemed ela meliado egeb selof.
<!-- this class is deprecated and will be removed in v5 -->
<h1 class="text-hide">Custom heading</h1>