Nifty 50
16,538.45 -78.00 (0.49%)
BSE Sensex
57,578.76 -273.51 (0.52%)

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.

Link

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.

Primary Secondary Success Danger Warning Info Light Dark

Pill Badges Examples

Documentation and examples for badges, our small count and labeling component.

Primary Secondary Success Danger Warning Info Light Dark

Links Badges Examples

Documentation and examples for badges, our small count and labeling component.

Primary Secondary Success Danger

Links Pill Badges Examples

Documentation and examples for badges, our small count and labeling component.

Primary Secondary Success Danger

Cards

Card image cap

Card title

30 May 2020

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card 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 link

Kitchen sink

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
Card link Another link

Header - Primary

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer - 2020 Metrica

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a amet, consectetur adipiscing elit ante.

Someone famous in Source Title

List Group

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card image

Card title

30 May 2020

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 somewhere

Card title

30 May 2020

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

Carousel

Dropdowns

Variant

The best part is you can do this with any button variant, too:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Dropdown Outline

The best part is you can do this with any button variant, too:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

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.

Kathryn Money

UI & UX Designer, Japan

Image rounded

You can use .rounded to give an image a rounded.

Anthony Stover

UI & UX Designer, USA

Image circle

You can use .rounded-circle to give an image a circle.

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.

Dismissible popover

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.

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.
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.
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.

Accordion Example

Using the card component, you can extend the default collapse behavior to create an accordion.

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .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.

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.

Basic Form

Basic example to demonstrate Bootstrap’s form styles.

We'll never share your email with anyone else.

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.

@
@mannatthemes.com
https://mannatthemes.com
$ .00
@
With textarea

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

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

Compny Bill Average Bill Paid Bill Action
Micromin 4 $250 $800
Creat Project Open Project Tasks Details
ZZ Diamond 2 $180 $400
Creat Project Open Project Tasks Details
Dairy Sweet 6 $210 $500
Creat Project Open Project Tasks Details
Corner Tea 3 $80 $350
Creat Project Open Project Tasks Details

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

Transaction ID Date Price Order Status Action
#124781 25/11/2018 $321 Approved
Creat Project Open Project Tasks Details
#542136 19/11/2018 $227 Approved
Creat Project Open Project Tasks Details
#234578 11/10/2018 $442 Rejected
Creat Project Open Project Tasks Details
#951357 03/12/2018 $625 Approved
Creat Project Open Project Tasks Details

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Customer Email Contact No Action
Aaron Poulin Aaron@example.com +21 21547896
Richard Ali Richard@example.com +41 21547896
Juan Clark Juan@example.com +65 21547896
Albert Hull Albert@example.com +88 21547896

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

# Name Email 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

Nifty 50
16,538.45 -78.00 (0.49%)

Candal Chart

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
© Metrica Crafted with by Mannatthemes