Alerts
Alerts Examples
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Alerts Outline Examples
You can see this in action with a live demo:
Buttons
Examples
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Outline buttons
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Buttons With Different Tag
Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Disabled Buttons Examples
Make buttons look inactive by adding the disabled boolean attribute to any <button>
element.
Buttons Sizes Examples
New extra larger or smaller buttons added
.btn-xl
or .btn-sm
for additional sizes.
Check And Radio Buttons
Bootstrap’s checkbox or radio style button.
Badges
Badge Examples
Add any of the below mentioned modifier classes to change the appearance of a badge.
Pill Badges Examples
Documentation and examples for badges, our small count and labeling component.
Cards
![Card image cap](assets/images/small/card.jpg)
Card title
![](assets/images/users/user-7.jpg)
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard Body
This is the card subtitle
Some quick example text the bulk of the card's content. It is a long established fact that a reader will be distracted by the readable content.
Titles, text, and links
This is the card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkKitchen sink
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
Header - Primary
Some quick example text to build on the card title and make up the bulk of the card's content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a amet, consectetur adipiscing elit ante.
List Group
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
![Card image](assets/images/small/btc.png)
Card title
![](assets/images/users/user-7.jpg)
This is a wider card with supporting text below as a natural lead-in er card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard title
![](assets/images/users/user-7.jpg)
This is a wider card with supporting text below as a natural lead-in er card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
![Card image](assets/images/small/btc.png)
Carousel
Dropdowns
Variant
The best part is you can do this with any button variant, too:
Dropdown Outline
The best part is you can do this with any button variant, too:
Grid
Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 720px | 960px | 1140px | 1320px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# of columns | 12 | |||||
Gutter width | 1.5rem (.75rem on left and right) | |||||
Custom gutters | Yes | |||||
Nestable | Yes | |||||
Column ordering | Yes |
Images
Image thumbnails
You can use .img-thumbnail
to give an image a rounded.
![](assets/images/users/user-4.jpg)
Kathryn Money
UI & UX Designer, Japan
Image rounded
You can use .rounded
to give an image a rounded.
![](assets/images/users/user-5.jpg)
Anthony Stover
UI & UX Designer, USA
Image circle
You can use .rounded-circle
to give an image a circle.
![](assets/images/users/user-6.jpg)
Catherine Orman
UI & UX Designer, India
Lists
Basic Example
List groups are a flexible and powerful component for displaying a series of content.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Disabled
Active items
Add .active
to a .list-group-item
to indicate the current active selection.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
Modals
Optional sizes
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog
.
Size | Class | Modal max-width | Modal Demo |
---|---|---|---|
Small | .modal-sm |
300px |
|
Default | None | 500px |
|
Large | .modal-lg |
800px |
|
Extra large | .modal-xl |
1140px |
|
Default (Center Modal) | .modal-dialog-centered |
500px |
|
Default (Scroll Modal) | .modal-dialog-scrollable |
500px |
Fullscreen Modal
Another override is the option to pop up a modal that covers the user viewport,
available via modifier classes that are placed on a .modal-dialog
.
Class | Availability | Modal Demo |
---|---|---|
.modal-fullscreen |
Always | |
.modal-fullscreen-sm-down |
Below 576px |
|
.modal-fullscreen-md-down |
Below 768px |
|
.modal-fullscreen-lg-down |
Below 992px |
|
.modal-fullscreen-xl-down |
Below 1200px |
|
.modal-fullscreen-xxl-down |
Below 1400px |
Pagination
Default Example
Pagination links indicate a series of related content exists across multiple pages.
Disabled and active states
Pagination links are customizable for
different circumstances. Use .disabled
for links that appear
un-clickable and .active
to
indicate the current page.
Popover & Tooltips
Popovers Example
Add small overlay content, like those found in iOS, to any element for housing secondary information.
Bootstrap Tooltips
Hover over the links below to see tooltips:
Progress
Basic Example
Use background utility classes to change the appearance of individual progress bars.
Striped and Animated Stripes Example
Add .progress-bar-animated
to .progress-bar to animate the stripes right to left via CSS3 animations.
Tab & Accordions
Tabs
Takes the basic nav from above and adds the .nav-tabs
class to generate a tabbed interface.
Raw denim you probably haven't heard of them jean shorts Austin.
Food truck fixie locavore, accusamus mcsweeney's single-origin coffee squid.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy.
Pills
The tabs plugin also works with pills.
Raw denim you probably haven't heard of them jean shorts Austin.
Food truck fixie locavore, accusamus mcsweeney's single-origin coffee squid.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy.
Flush Example
Add .accordion-flush
to remove the default background-color
,
some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
Accordion Example
Using the card component, you can extend the default collapse behavior to create an accordion.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Form Elements
Textual inputs
Here are examples of .form-control
applied to each
textual HTML5 <input>
type
.
Basic Form
Basic example to demonstrate Bootstrap’s form styles.
Horizontal form
Be sure to use .col-form-label-sm
or .col-form-label-lg
to your <label>
s
or <legend>
s
to correctly follow the size of .form-control-lg
and
.form-control-sm
.
Custom styles
Custom stylr example.
Inline Form
Use the .col-auto
class to create horizontal layouts.
Input Size
Set heights using classes like
.form-control-lg
and
.form-control-sm
.
File browser
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
Form controls
Basic example to demonstrate Bootstrap’s form styles.
Range
CUse our custom range inputs for consistent cross-browser styling and built-in customization.
Switches
A switch has the markup of a custom checkbox but uses the .custom-switch
class to render
a toggle switch. Switches also support the disabled
attribute.
Checkboxs
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Radios
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Input groups Static
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Input groups Buttons
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Basic Tables
Table head options
Use one of two modifier classes to make
<thead>
s appear light or dark gray.
# | Name | Access | |
---|---|---|---|
1 | Mark | XYZ@Example.com | Business |
2 | Jacob | XYZ@Example.com | Personal |
3 | Larry | XYZ@Example.com | Disabled |
4 | Mark | XYZ@Example.com | Business |
5 | Jacob | XYZ@Example.com | Personal |
Icons
Line Awesome Icons
Use <i class="la la-line-awesome"></i>
.
Tabler Icons
Use <i class="ti ti-tabler"></i>
.
Charts
Candal Chart
![](assets/images/ipo/ipo-1.png)
Registered Clients
Application Successful
- Applic. No 236568546
- Amount to be Blocked $250.00
- Bid 01
- Market Lot 40 Shares
- Price $25.00
- IPO Open Date 14/09/2021
- Allotment Date 18/09/2021
- Refunds 19/09/2021
- Credit Demat Ac. 20/09/2021
- IPO Listing Date 21/09/2021
Upcoming IPOs 2021
Name | Size | Date |
---|---|---|
Apple NASDAQ | 2542cr. | 12 Nov.2021 |
Panasonic | 1302cr. | 18 Nov.2021 |