Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg"href="#" role="button">Learn more</a>
</p>
</div>Fluid Jumbotron
Fluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>Card Desks
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
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
<div class="card-group">
<div class="card me-3 border">
<img class="card-img-top" src="./assets/images/b1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card me-3 border">
<img class="card-img-top" src="./assets/images/b2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card border">
<img class="card-img-top" src="./assets/images/b3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Breadcrumbs
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>Buttons
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Outline Buttons
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
Buttons Tags
<a class="btn btn-primary" href="#"role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Modal Popup
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"data-bs-target="#exampleModal">
Popup modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1"aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close"data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Woohoo, you're reading this text in a modal!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Vertically Centered Modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"data-bs-target="#exampleModalCenter">
Popup modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1"aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Vertically Centered Modal</h5>
<button type="button" class="btn-close"data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This is a vertically centered modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
Link Color
A simple primary alert with
an example
link. Give it
a click if you like.
A simple secondary alert with
an example
link. Give
it a click if you like.
A simple success alert with
an example
link. Give it
a click if you like.
A simple danger alert with
an example
link. Give it a
click if you like.
A simple warning alert with
an example
link. Give it
a click if you like.
A simple info alert with
an example
link. Give it a
click if you like.
A simple light alert with
an example
link. Give it a
click if you like.
A simple dark alert with
an example
link. Give it a
click if you like.
<div class="alert alert-primary" role="alert">
A simple primary alert with<a href="#" class="alert-link">an example link.</a>Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with<a href="#" class="alert-link">an example link.</a>Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with<a href="#" class="alert-link">an example link.</a>Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with<a href="#" class="alert-link">an example link.</a>Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with<a href="#" class="alert-link">an example link.</a>Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with<a href="#" class="alert-link">an example link.</a>Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with<a href="#" class="alert-link">an example link.</a>Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with<a href="#" class="alert-link">an example link.</a>Give it a click if you like.
</div>
Progress Bars
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" 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:50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width:75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width:100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Backgrounds
<div class="progress">
<div class="progress-bar bg-success"role="progressbar"style="width:25%" aria-valuenow="25"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-primary"role="progressbar" style="width:75%"aria-valuenow="75" aria-valuemin="0"aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning"role="progressbar" style="width:85%"aria-valuenow="85" aria-valuemin="0"aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger"role="progressbar" style="width:100%"aria-valuenow="100" aria-valuemin="0"aria-valuemax="100"></div>
</div>
Striped
<div class="progress">
<div class="progress-bar progress-bar-striped"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:50%"aria-valuenow="50" aria-valuemin="0"aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info"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-warning"role="progressbar" style="width:85%"aria-valuenow="85" aria-valuemin="0"aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger"role="progressbar" style="width:100%"aria-valuenow="100" aria-valuemin="0"aria-valuemax="100"></div>
</div>
Input Group
@
@example.com
https://example.com/users/
$
.00
With textarea
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control"placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control"placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control"id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control"aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="Withtextarea"></textarea>
</div>
Input Form
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<div id="emailHelp" class="form-text">
We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Media Object
Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed.<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="mt-0">Media heading</h5>
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
Nesting
Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed.Media heading
This is some content from a media component. You can replace this with any content and adjust it as needed.<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="mt-0">Media heading</h5>
This is some content from a media component. You can replace this with any content and adjust it as needed.
<div class="d-flex mt-5">
<div class="flex-shrink-0">
<img src="..."alt="...">
</div>
<div class="flex-grow-1 ms-3">
<h5 class="mt-0">Media heading</h5>
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
</div>
</div>