Getting Started
Style Guide
Components
Sections
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Info
You should select the desired categories while creating listing
Success
Your booking is confirmed by Mr. Shreyan
Ohh no!
Please check the input you have specified
Warning!
The number of tickets you have selected might not get confirmed
Info
You might want to book return flight to save 25% on overall booking amount
Example
<span class="pln"> </span><div role="alert" class="alert text-danger bg-white border alert-dismissible"><div class="d-flex align-items-start"><span class="badge badge-soft-danger align-self-center me-3"><span class="pln">Ohh no!</span></span><div class="w-100"><span class="pln">Please check the input you have specified</span></div></div><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div><span class="pln">
</span>
This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
Example
<span class="pln"> </span><div role="alert" class="alert alert-primary alert-dismissible"><span class="pln">This is a primary alert—check it out!</span><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div><span class="pln">
</span>
Accordions
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
What is Lorem Ipsum?
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
single-origin coffee nulla assumenda shoreditch et. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth
nesciunt you probably haven't heard of them accusamus labore
sustainable VHS.
Why do we use it?
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
moon officia aute, non cupidatat skateboard dolor brunch. Food truck
quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw
denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
Where does it come from?
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
moon officia aute, non cupidatat skateboard dolor brunch. Food truck
quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw
denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
Example
<span class="pln"> </span><div class="accordion custom-accordionwitharrow mt-3" id="accordionExample"><span class="pln"> </span><div class="card mb-1 shadow-none border"><span class="pln"> </span><a href="" class="text-dark" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="pln"> </span><div class="card-header" id="headingOne"><span class="pln"> </span><h5 class="my-1"><span class="pln">What is Lorem Ipsum? </span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down icon-xs accordion-arrow"><polyline points="6 9 12 15 18 9"></polyline></svg><span class="pln"> </span></h5><span class="pln"> </span></div><span class="pln"> </span></a><span class="pln"> </span><div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"><span class="pln"> </span><div class="card-body text-muted pt-1"><span class="pln"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="card mb-1 shadow-none border"><span class="pln"> </span><a href="" class="text-dark collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="pln"> </span><div class="card-header" id="headingTwo"><span class="pln"> </span><h5 class="my-1"><span class="pln">Why do we use it? </span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down icon-xs accordion-arrow"><polyline points="6 9 12 15 18 9"></polyline></svg><span class="pln"> </span></h5><span class="pln"> </span></div><span class="pln"> </span></a><span class="pln"> </span><div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"><span class="pln"> </span><div class="card-body text-muted pt-1"><span class="pln">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="card mb-0 shadow-none border"><span class="pln"> </span><a href="" class="text-dark collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class="pln"> </span><div class="card-header" id="headingThree"><span class="pln"> </span><h5 class="my-1"><span class="pln">Where does it come from? </span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down icon-xs accordion-arrow"><polyline points="6 9 12 15 18 9"></polyline></svg><span class="pln"> </span></h5><span class="pln"> </span></div><span class="pln"> </span></a><span class="pln"> </span><div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"><span class="pln"> </span><div class="card-body text-muted pt-1"><span class="pln">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln">
</span>
Badges
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example
<span class="pln"> </span><h4><span class="pln">Example heading </span><span class="badge bg-secondary"><span class="pln">New</span></span></h4><span class="pln">
</span>
Badges can be used as part of links or buttons to provide a counter.
Add any of the below mentioned modifier classes to change the appearance of a badge.
Primary Secondary Success Danger Warning Info Orange Light DarkExample
<span class="pln"> </span><span class="badge bg-primary"><span class="pln">Primary</span></span><span class="pln">
</span>
Use the .rounded-pill modifier class to make badges more
rounded (with a larger border-radius and additional horizontal padding).
Use the .badge-soft-* modifier class to make badges soft
Example
<span class="pln"> </span><span class="badge badge-soft-primary"><span class="pln">Primary</span></span><span class="pln">
</span>
Breadcrumb
Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
Example
<span class="pln"> </span><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home icon-xs"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></a></li><li class="breadcrumb-item"><a href="#"><span class="pln">Library</span></a></li><li class="breadcrumb-item active" aria-current="page"><span class="pln">Data</span></li></ol></nav><span class="pln">
</span>
Buttons
Use the button classes on an <a>,
<button>, or <input> element.
Example
<span class="pln"> </span><button type="button" class="btn btn-primary"><span class="pln">Primary</span></button><span class="pln">
</span>
In need of a button, but not the hefty background colors they bring? Replace the
default modifier classes with the .btn-outline-* ones to remove all
background images and colors on any button.
Example
<span class="pln"> </span><button type="button" class="btn btn-outline-primary"><span class="pln">Primary</span></button><span class="pln">
</span>
Replace the default modifier classes with the .btn-soft-*
ones to have a softer background color on any button.
Example
<span class="pln"> </span><button type="button" class="btn btn-soft-primary"><span class="pln">Primary</span></button><span class="pln">
</span>
Add a class .btn-rounded with the default modifier classes to have rounded edges.
Example
<span class="pln"> </span><button type="button" class="btn btn-rounded btn-primary"><span class="pln">Primary</span></button><span class="pln">
</span>
Fancy larger or smaller buttons? Add .btn-lg or
.btn-sm for additional sizes.
Example
<span class="pln"> </span><button type="button" class="btn btn-primary btn-lg"><span class="pln">Button Large</span></button><span class="pln">
</span>
Buttons with icon - variations
Example
<span class="pln"> </span><button type="button" class="me-2 btn btn-primary"><span class="pln">Button with icon on right</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play icon-xs ms-1"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg></button><span class="pln">
</span>
Cards
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options. Check out Bootstrap's Doc for more examples.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonExample
<div class="card"><span class="pln">
</span><img class="card-img-top img-fluid" src="/assets/images/photos/1.jpg" alt="Card image cap"><span class="pln">
</span><div class="card-body"><span class="pln">
</span><h5 class="card-title"><span class="pln">Card title</span></h5><span class="pln">
</span><p class="card-text text-muted"><span class="pln">Some quick example text to build on the card title and make up the bulk of the card's content.</span></p><span class="pln">
</span><a href="javascript:void(0);" class="btn btn-primary"><span class="pln">Button</span></a><span class="pln">
</span></div><span class="pln">
</span></div><span class="pln">
</span>
Card title
This is a wider card with supporting text lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text lead-in to additional content.
Last updated 3 mins ago
Example
<div class="card"><span class="pln">
</span><div class="row g-0 align-items-center"><span class="pln">
</span><div class="col-md-5"><span class="pln">
</span><img src="/assets/images/photos/1.jpg" class="card-img" alt="..."><span class="pln">
</span></div><span class="pln">
</span><div class="col-md-7"><span class="pln">
</span><div class="card-body"><span class="pln">
</span><h5 class="card-title mb-0"><span class="pln">Card title</span></h5><span class="pln">
</span><p class="card-text text-muted"><span class="pln">This is a wider card with supporting text lead-in to additional content.</span></p><span class="pln">
</span><p class="card-text"><small class="text-muted"><span class="pln">Last updated 3 mins ago</span></small></p><span class="pln">
</span></div><span class="pln">
</span></div><span class="pln">
</span></div><span class="pln">
</span></div><span class="pln">
</span>
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Example
<span class="pln"> </span><div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"><span class="pln"> </span><ol class="carousel-indicators"><span class="pln"> </span><li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li><span class="pln"> </span><li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"><span class="pln"> </span></li><span class="pln"> </span><li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"><span class="pln"> </span></li><span class="pln"> </span></ol><span class="pln"> </span><div class="carousel-inner"><span class="pln"> </span><div class="carousel-item active"><span class="pln"> </span><img src="../assets/images/photos/2.jpg" class="d-block w-100" alt="..."><span class="pln"> </span></div><span class="pln"> </span><div class="carousel-item"><span class="pln"> </span><img src="../assets/images/photos/3.jpg" class="d-block w-100" alt="..."><span class="pln"> </span></div><span class="pln"> </span><div class="carousel-item"><span class="pln"> </span><img src="../assets/images/photos/1.jpg" class="d-block w-100" alt="..."><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev"><span class="pln"> </span><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="pln"> </span><span class="visually-hidden"><span class="pln">Previous</span></span><span class="pln"> </span></a><span class="pln"> </span><a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next"><span class="pln"> </span><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="pln"> </span><span class="visually-hidden"><span class="pln">Next</span></span><span class="pln"> </span></a><span class="pln"> </span></div><span class="pln">
</span>
Add captions to your slides easily with the .carousel-caption
element within any .carousel-item. They can be
easily hidden on smaller viewports, as shown below, with optional
display utilities.
We hide them initially with .d-none
and bring them back on medium-sized devices with .d-md-block.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Example
<span class="pln"> </span><div id="carouselExampleCaptions" class="carousel slide doc-carousel" data-bs-ride="carousel"><span class="pln"> </span><ol class="carousel-indicators"><span class="pln"> </span><li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"><span class="pln"> </span></li><span class="pln"> </span><li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li><span class="pln"> </span><li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li><span class="pln"> </span></ol><span class="pln"> </span><div class="carousel-inner"><span class="pln"> </span><div class="carousel-item active"><span class="pln"> </span><img src="../assets/images/photos/1.jpg" class="d-block w-100" alt="..."><span class="pln"> </span><div class="carousel-caption d-none d-md-block"><span class="pln"> </span><h5 class="text-white"><span class="pln">First slide label</span></h5><span class="pln"> </span><p><span class="pln">Nulla vitae elit libero, a pharetra augue mollis interdum.</span></p><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="carousel-item"><span class="pln"> </span><img src="../assets/images/photos/2.jpg" class="d-block w-100" alt="..."><span class="pln"> </span><div class="carousel-caption d-none d-md-block"><span class="pln"> </span><h5 class="text-white"><span class="pln">Second slide label</span></h5><span class="pln"> </span><p><span class="pln">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></p><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="carousel-item"><span class="pln"> </span><img src="../assets/images/photos/3.jpg" class="d-block w-100" alt="..."><span class="pln"> </span><div class="carousel-caption d-none d-md-block"><span class="pln"> </span><h5 class="text-white"><span class="pln">Third slide label</span></h5><span class="pln"> </span><p><span class="pln">Praesent commodo cursus magna, vel scelerisque nisl consectetur.</span></p><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"><span class="pln"> </span><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="pln"> </span><span class="visually-hidden>Previous</span> </a> <a class=" carousel-control-next"="" href="#carouselExampleCaptions" role="button" data-bs-slide="next"><span class="pln"> </span><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="pln"> </span><span class="visually-hidden"><span class="pln">Next</span></span><span class="pln"> </span></span></a><span class="pln"> </span></div><span class="pln">
</span>
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Example
<span class="pln"> </span><div class="btn-group me-1"><span class="pln"> </span><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="pln">Dropdown </span><i class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></i></button><span class="pln"> </span><div class="dropdown-menu"><span class="pln"> </span><a class="dropdown-item" href="#"><span class="pln">Action</span></a><span class="pln"> </span><a class="dropdown-item" href="#"><span class="pln">Another action</span></a><span class="pln"> </span><a class="dropdown-item" href="#"><span class="pln">Something else here</span></a><span class="pln"> </span><div class="dropdown-divider"></div><span class="pln"> </span><a class="dropdown-item" href="#"><span class="pln">Separated link</span></a><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln">
</span>
Dropdown menu position variations
Example
<span class="pln"> </span><div class="btn-group me-1"><span class="pln"> </span><button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="pln"> Right Align </span><i class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></i><span class="pln"> </span></button><span class="pln"> </span><div class="dropdown-menu dropdown-menu-right"><span class="pln"> </span><a class="dropdown-item" href="#"><span class="pln">Action</span></a><span class="pln"> </span><a class="dropdown-item" href="#"><span class="pln">Another action</span></a><span class="pln"> </span><a class="dropdown-item" href="#"><span class="pln">Something else here</span></a><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln">
</span>
You can put a form or simple text within a dropdown menu or set the different position
Example
<span class="pln"> </span><div class="btn-group dropdown me-1"><span class="pln"> </span><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="pln">Dropdown menu Forms </span><i class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></i><span class="pln"> </span></button><span class="pln"> </span><form class="dropdown-menu dropdown-lg p-3"><span class="pln"> </span><div class="mb-3"><span class="pln"> </span><label for="exampleDropdownFormEmail2" class="form-label"><span class="pln">Email address</span></label><span class="pln"> </span><input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]"><span class="pln"> </span></div><span class="pln"> </span><div class="mb-3"><span class="pln"> </span><label for="exampleDropdownFormPassword2" class="form-label"><span class="pln">Password</span></label><span class="pln"> </span><input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password"><span class="pln"> </span></div><span class="pln"> </span><div class="mb-3"><span class="pln"> </span><div class="form-check"><span class="pln"> </span><input type="checkbox" class="form-check-input" id="dropdownCheck"><span class="pln"> </span><label class="form-check-label" for="dropdownCheck"><span class="pln">Remember me </span></label><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><button type="submit" class="btn btn-primary"><span class="pln">Sign in</span></button><span class="pln"> </span></form><span class="pln"> </span></div><span class="pln"> </span>
Form Elements
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
USD
Example
<span class="pln"> </span><div class="row"><span class="pln"> </span><div class="col-sm-6"><span class="pln"> </span><div class="mb-3"><span class="pln"> </span><label class="form-label" for="default-1"><span class="pln">Text Input</span></label><span class="pln"> </span><input type="text" class="form-control" id="default-1" placeholder="A text input"><span class="pln"> </span></div><span class="pln"> </span><div class="mb-3"><span class="pln"> </span><label class="form-label" for="default-5"><span class="pln">Password Input</span></label><span class="pln"> </span><input type="password" class="form-control" id="default-5" placeholder="A password input" value="12345678"><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="col-sm-6"><span class="pln"> </span><div class="mb-3"><label class="form-label" for="default-textarea"><span class="pln">Textarea</span></label><span class="pln"> </span><textarea class="form-control" id="default-textarea" rows="5"><span class="pln">text are content goes here...</span></textarea><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="col-sm-6"><span class="pln"> </span><div class="mb-3"><span class="pln"> </span><label class="form-label" for="default-3"><span class="pln">Default Select</span></label><span class="pln"> </span><select class="form-control" id="default-3"><span class="pln"> </span><option value="default_option"><span class="pln">Default Option</span></option><span class="pln"> </span><option value="option_select_name"><span class="pln">Option select name</span></option><span class="pln"> </span><option value="option_select_name"><span class="pln">Option select name</span></option><span class="pln"> </span></select><span class="pln"> </span></div><span class="pln"> </span><div class="mb-3"><span class="pln"> </span><label class="form-label" for="default-2"><span class="pln">File Upload</span></label><span class="pln"> </span><div class="custom-file"><span class="pln"> </span><input type="file" multiple="" class="custom-file-input" id="customFile"><span class="pln"> </span><label class="custom-file-label" for="customFile"><span class="pln">Choose file</span></label><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="col-sm-6"><span class="pln"> </span><label class="form-label" for="default-4"><span class="pln">Default Select Multiple</span></label><span class="pln"> </span><select class="form-select" id="default-4" multiple=""><span class="pln"> </span><option value="option_select0"><span class="pln">Default Option</span></option><span class="pln"> </span><option value="option_select1"><span class="pln">Option select name</span></option><span class="pln"> </span><option value="option_select2"><span class="pln">Option select name</span></option><span class="pln"> </span><option value="option_select2"><span class="pln">Option select name</span></option><span class="pln"> </span><option value="option_select2"><span class="pln">Option select name</span></option><span class="pln"> </span></select><span class="pln"> </span></div><span class="pln"> </span><div class="col-sm-6"><span class="pln"> </span><div class="mb-3"><span class="pln"> </span><label class="form-label" for="default-7"><span class="pln">Input with icon</span></label><span class="pln"> </span><div class="form-control-with-hint"><span class="pln"> </span><input type="text" class="form-control" id="default-7" placeholder="Input placeholder"><span class="pln"> </span><span class="form-control-feedback"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search icon-xs"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></span><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="col-sm-6"><span class="pln"> </span><div class="mb-3"><span class="pln"> </span><label class="form-label" for="default-8"><span class="pln">Input with hint text</span></label><span class="pln"> </span><div class="form-control-with-hint"><span class="pln"> </span><input type="text" class="form-control" id="default-8" placeholder="Input placeholder"><span class="pln"> </span><span class="form-control-feedback"><span class="pln">USD</span></span><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln">
</span>
Set heights using classes like .form-control-lg and
.form-control-sm.
Custom controls including Checkboxes, Radios, Select, Range, etc.
Example
<span class="pln"> </span><div class="row"><span class="pln"> </span><div class="col"><span class="pln"> </span><div class="form-control form-check"><span class="pln"> </span><input type="checkbox" id="customcheck1" name="customRadioInline1" class="form-check-input"><span class="pln"> </span><label class="form-check-label" for="customcheck1"><span class="pln">Check this custom checkbox</span></label><span class="pln"> </span></div><span class="pln"> </span><div class="form-control form-check"><span class="pln"> </span><input type="checkbox" id="customcheck2" name="customRadioInline1" class="form-check-input"><span class="pln"> </span><label class="form-check-label" for="customcheck2"><span class="pln">Check this custom checkbox 2</span></label><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="col"><span class="pln"> </span><div class="form-check"><span class="pln"> </span><input type="radio" id="customRadioInline1" name="customRadioInline1" class="form-check-input"><span class="pln"> </span><label class="form-check-label" for="customRadioInline1"><span class="pln">Toggle this custom radio</span></label><span class="pln"> </span></div><span class="pln"> </span><div class="form-check"><span class="pln"> </span><input type="radio" id="customRadioInline2" name="customRadioInline1" class="form-check-input"><span class="pln"> </span><label class="form-check-label" for="customRadioInline2"><span class="pln">Or toggle this other custom radio</span></label><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span><div class="row mt-3 align-items-center"><span class="pln"> </span><div class="col"><span class="pln"> </span><select class="form-select" id="form-select"><span class="pln"> </span><option selected=""><span class="pln">Open this select menu</span></option><span class="pln"> </span><option value="1"><span class="pln">One</span></option><span class="pln"> </span><option value="2"><span class="pln">Two</span></option><span class="pln"> </span><option value="3"><span class="pln">Three</span></option><span class="pln"> </span></select><span class="pln"> </span></div><span class="pln"> </span><div class="col"><span class="pln"> </span><input type="range" class="custom-range" id="customRange1"><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln">
</span>
Modals
A modal plugin allows to add dialogs to your site for lightboxes, user notifications, or completely custom content, etc.
Example
<span class="pln"> </span><div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><span class="pln"> </span><div class="modal-dialog"><span class="pln"> </span><div class="modal-content"><span class="pln"> </span><div class="modal-header"><span class="pln"> </span><h4 class="modal-title" id="myModalLabel"><span class="pln">Add more storage</span></h4><span class="pln"> </span><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span class="pln"> </span></button><span class="pln"> </span></div><span class="pln"> </span><div class="modal-body"><span class="pln"> </span><h5><span class="pln">You are out of storage space.</span></h5><span class="pln"> </span><p><span class="pln">To upload more data, please add additional storage space.</span></p><span class="pln"> </span><form class="form-inline"><span class="pln"> </span><label class="my-1 me-2" for="selectSize"><span class="pln">Select Size: </span></label><span class="pln"> </span><select class="form-select my-1 me-sm-2 w-50" id="selectSize"><span class="pln"> </span><option selected=""><span class="pln">Choose...</span></option><span class="pln"> </span><option value="1"><span class="pln">1 GB</span></option><span class="pln"> </span><option value="10"><span class="pln">10 GB</span></option><span class="pln"> </span><option value="50"><span class="pln">50 GB</span></option><span class="pln"> </span><option value="100"><span class="pln">100 GB</span></option><span class="pln"> </span><option value="500"><span class="pln">500 GB</span></option><span class="pln"> </span><option value="1000"><span class="pln">1 TB</span></option><span class="pln"> </span></select><span class="pln"> </span></form><span class="pln"> </span></div><span class="pln"> </span><div class="modal-footer"><span class="pln"> </span><button type="button" class="btn btn-white" data-bs-dismiss="modal"><span class="pln">Cancel</span></button><span class="pln"> </span><button type="button" class="btn btn-primary"><span class="pln">Upgrade</span></button><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln">
</span>
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Example
<span class="pln"> </span><div class="modal fade" id="centermodal" tabindex="-1" role="dialog" aria-labelledby="myCenterModalLabel" aria-hidden="true"><span class="pln"> </span><div class="modal-dialog modal-dialog-centered"><span class="pln"> </span><div class="modal-content"><span class="pln"> </span><div class="modal-header"><span class="pln"> </span><h4 class="modal-title" id="myCenterModalLabel"><span class="pln">Center modal</span></h4><span class="pln"> </span><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span class="pln"> </span></button><span class="pln"> </span></div><span class="pln"> </span><div class="modal-body"><span class="pln"> </span><h5><span class="pln">Overflowing text to show scroll behavior</span></h5><span class="pln"> </span><p><span class="pln">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span></p><span class="pln"> </span><p class="mb-0"><span class="pln">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span></p><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln">
</span>
You can also create a scrollable modal that allows scroll the modal body by adding
.modal-dialog-scrollable to .modal-dialog.
Example
<span class="pln"> </span><div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"><span class="pln"> </span><div class="modal-dialog modal-dialog-scrollable" role="document"><span class="pln"> </span><div class="modal-content"><span class="pln"> </span><div class="modal-header"><span class="pln"> </span><h4 class="modal-title" id="exampleModalScrollableTitle"><span class="pln">Modal title </span></h4><span class="pln"> </span><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span class="pln"> </span></button><span class="pln"> </span></div><span class="pln"> </span><div class="modal-body"><span class="pln"> </span><p><span class="pln">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span></p><span class="pln"> </span><p><span class="pln">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span></p><span class="pln"> </span><p><span class="pln">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. </span></p><span class="pln"> </span><p><span class="pln">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span></p><span class="pln"> </span><p><span class="pln">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span></p><span class="pln"> </span><p><span class="pln">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. </span></p><span class="pln"> </span><p><span class="pln">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span></p><span class="pln"> </span><p><span class="pln">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span></p><span class="pln"> </span><p><span class="pln">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. </span></p><span class="pln"> </span><p><span class="pln">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span></p><span class="pln"> </span><p><span class="pln">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span></p><span class="pln"> </span><p><span class="pln">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. </span></p><span class="pln"> </span><p><span class="pln">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span></p><span class="pln"> </span><p><span class="pln">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span></p><span class="pln"> </span><p><span class="pln">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. </span></p><span class="pln"> </span><p><span class="pln">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span></p><span class="pln"> </span><p><span class="pln">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</span></p><span class="pln"> </span><p><span class="pln">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. </span></p><span class="pln"> </span></div><span class="pln"> </span><div class="modal-footer"><span class="pln"> </span><button type="button" class="btn btn-white" data-bs-dismiss="modal"><span class="pln">Close</span></button><span class="pln"> </span><button type="button" class="btn btn-primary"><span class="pln">Save changes</span></button><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln"> </span></div><span class="pln">
</span>
A modal can be used to show contexual messages including success, error, warning, information messages, etc.
Example
<span class="pln"> </span><div class="modal fade" id="modal-success" tabindex="-1" role="dialog" aria-labelledby="modal-successLabel" aria-hidden="true"><div class="modal-dialog modal-dialog-centered modal-sm"><div class="modal-content"><div class="modal-header border-bottom-0 pb-0"><span class="pln"> </span><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span class="pln"> </span></button></div><div class="modal-body text-center pt-0"><span class="pln"> </span><span class="icon icon-xl text-success"><span class="pln"> </span><!--?xml version="1.0" encoding="UTF-8"?--><span class="pln">
</span><svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><span class="pln">
</span><!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --><span class="pln">
</span><title><span class="pln">Stockholm-icons / Communication / Mail-attachment</span></title><span class="pln">
</span><desc><span class="pln">Created with Sketch.</span></desc><span class="pln">
</span><g id="Stockholm-icons-/-Communication-/-Mail-attachment" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><span class="pln">
</span><rect id="bound" x="0" y="0" width="24" height="24"></rect><span class="pln">
</span><path d="M14.8571499,13 C14.9499122,12.7223297 15,12.4263059 15,12.1190476 L15,6.88095238 C15,5.28984632 13.6568542,4 12,4 L11.7272727,4 C10.2210416,4 9,5.17258756 9,6.61904762 L10.0909091,6.61904762 C10.0909091,5.75117158 10.823534,5.04761905 11.7272727,5.04761905 L12,5.04761905 C13.0543618,5.04761905 13.9090909,5.86843034 13.9090909,6.88095238 L13.9090909,12.1190476 C13.9090909,12.4383379 13.8240964,12.7385644 13.6746497,13 L10.3253503,13 C10.1759036,12.7385644 10.0909091,12.4383379 10.0909091,12.1190476 L10.0909091,9.5 C10.0909091,9.06606198 10.4572216,8.71428571 10.9090909,8.71428571 C11.3609602,8.71428571 11.7272727,9.06606198 11.7272727,9.5 L11.7272727,11.3333333 L12.8181818,11.3333333 L12.8181818,9.5 C12.8181818,8.48747796 11.9634527,7.66666667 10.9090909,7.66666667 C9.85472911,7.66666667 9,8.48747796 9,9.5 L9,12.1190476 C9,12.4263059 9.0500878,12.7223297 9.14285008,13 L6,13 C5.44771525,13 5,12.5522847 5,12 L5,3 C5,2.44771525 5.44771525,2 6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,12 C19,12.5522847 18.5522847,13 18,13 L14.8571499,13 Z" id="Combined-Shape" fill="#335EEA" opacity="0.3"></path><span class="pln">
</span><path d="M9,10.3333333 L9,12.1190476 C9,13.7101537 10.3431458,15 12,15 C13.6568542,15 15,13.7101537 15,12.1190476 L15,10.3333333 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 L9,10.3333333 Z M10.0909091,11.1212121 L12,12.5 L13.9090909,11.1212121 L13.9090909,12.1190476 C13.9090909,13.1315697 13.0543618,13.952381 12,13.952381 C10.9456382,13.952381 10.0909091,13.1315697 10.0909091,12.1190476 L10.0909091,11.1212121 Z" id="Combined-Shape" fill="#335EEA"></path><span class="pln">
</span></g><span class="pln">
</span></svg><span class="pln"> </span></span><h4 class="text-success mt-0"><span class="pln">Awesome!</span></h4><p class="mx-auto text-muted"><span class="pln">We receieved your application and will process it shortly.</span></p><div class="mt-4"><span class="pln"> </span><a href="#" class="btn btn-white btn-sm" data-bs-dismiss="modal"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left icon-xxs me-1"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg><span class="pln">Back</span></a></div></div></div></div></div><span class="pln">
</span>
Progress
Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels
Example
<span class="pln"> </span><div class="progress"><span class="pln"> </span><div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span class="pln">25%</span></div><span class="pln"> </span></div><span class="pln">
</span>
Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar's background color.
Additionally you can add .progress-bar-animated to make it animated as well.
Example
<span class="pln"> </span><div class="progress"><span class="pln"> </span><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><span class="pln"> </span></div><span class="pln">
</span>
Set a height value on the .progress. The inner .progress-bar will automatically resize accordingly.
Example
<span class="pln"> </span><div class="progress" style="height: 16px;"><span class="pln"> </span><div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div><span class="pln"> </span></div><span class="pln">
</span>
Pagination
Examples for showing pagination to indicate a series of related content exists across multiple pages
Example
<span class="pln"> </span><nav aria-label="Page navigation example"><span class="pln"> </span><ul class="pagination"><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">Previous</span></a><span class="pln"> </span></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">1</span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">2</span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">3</span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">Next</span></a></li><span class="pln"> </span></ul><span class="pln"> </span></nav><span class="pln">
</span>
You can use icon instead of showing text label for previous and next actions
Example
<span class="pln"> </span><nav aria-label="Page navigation example"><span class="pln"> </span><ul class="pagination"><span class="pln"> </span><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true"><span class="pln">«</span></span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">1</span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">2</span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">3</span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true"><span class="pln">»</span></span></a></li><span class="pln"> </span></ul><span class="pln"> </span></nav><span class="pln">
</span>
Just add class modifier .pagination-rounded to .pagination in order to have rounded page action link
Example
<span class="pln"> </span><nav aria-label="Page navigation example"><span class="pln"> </span><ul class="pagination pagination-rounded"><span class="pln"> </span><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true"><span class="pln">«</span></span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">1</span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">2</span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#"><span class="pln">3</span></a></li><span class="pln"> </span><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true"><span class="pln">»</span></span></a></li><span class="pln"> </span></ul><span class="pln"> </span></nav><span class="pln">
</span>
Spinners
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Example
<span class="pln"> </span><div class="spinner-border text-primary m-2" role="status"><span class="visually-hidden"><span class="pln">Loading...</span></span></div><span class="pln">
</span>
If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Example
<span class="pln"> </span><div class="spinner-grow text-primary m-2" role="status"><span class="visually-hidden"><span class="pln">Loading...</span></span></div><span class="pln">
</span>
Offcanvas
Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the
.show class on an element with the .offcanvas class.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Example
<span class="pln"> </span><button class="btn btn-soft-primary me-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasExample"><span class="pln">Left Offcanvas</span></button><div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasExampleLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasExampleLabel"><span class="pln">Offcanvas</span></h5><button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><div><span class="pln">Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</span></div><div class="dropdown mt-3"><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"><span class="pln">Dropdown button</span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"><li><a class="dropdown-item" href="#"><span class="pln">Action</span></a></li><li><a class="dropdown-item" href="#"><span class="pln">Another action</span></a></li><li><a class="dropdown-item" href="#"><span class="pln">Something else here</span></a></li></ul></div></div></div><span class="pln">
</span>
Popovers
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
Example
<span class="pln"> </span><button type="button" tabindex="0" class="btn btn-primary me-1" data-bs-toggle="popover" data-bs-trigger="focus" title="" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover" data-bs-original-title=""><span class="pln">Dismissible popover</span></button><span class="pln">
</span>
Tooltips
Examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Example
<span class="pln"> </span><button type="button" class="btn btn-soft-primary me-1 mb-2 mb-xl-0" data-bs-container="#tooltip-container-top" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Tooltip on top"><span class="pln">Tooltip on top</span></button><span class="pln">
</span>