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

                                            Ohh no!Please check the input you have specified

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

                                            This is a primary alert—check it out!

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?

Where does it come from?

Example

What is Lorem Ipsum?

Why do we use it?

Where does it come from?

Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

Example

                                            Example heading New

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 Dark

Example

                                            Primary

Use the .rounded-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).

Pill Badge-md Badge-lg

Use the .badge-soft-* modifier class to make badges soft

Primary Secondary Success Danger Warning Info Orange Dark

Example

                                            Primary

Buttons

Use the button classes on an <a>, <button>, or <input> element.

Example

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

Replace the default modifier classes with the .btn-soft-* ones to have a softer background color on any button.

Example

Add a class .btn-rounded with the default modifier classes to have rounded edges.

Example

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

Example

Buttons with icon - variations

Example

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.

Button

Example


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

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


    
        
            
        
        
            
                Card title
                This is a wider card with supporting text lead-in to additional content.
                Last updated 3 mins ago

Nav Tabs

Takes the basic nav and adds the .nav-tabs class to generate a tabbed interface.

Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Example

                                               Home 
   Profile 
   Messages 
   ... 
  ... 
  ...

Example

                                               Home 
   Profile 
   Messages 
   ... 
  ... 
  ...

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Example

                                              
  
  
 
    
   
   
 
   Previous    Next

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

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

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Example

                                               Action Another action Something else here 
 Separated link

Dropdown menu position variations

Example

                                               Action Another action Something else here

You can put a form or simple text within a dropdown menu or set the different position

Example

                                                Email address  
  Password  
    Remember me

Form Elements

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Text Input

Password Input

Textarea

Default Select

File Upload

Choose file

Default Select Multiple

Input with icon

Input with hint text

USD

Example

                                               Text Input  
  Password Input  
 
  Textarea text are content goes here... 
 
   Default Select  
  File Upload   Choose file 
 
 
  Default Select Multiple  
   Input with icon    
 
 
   Input with hint text   USD

Set heights using classes like .form-control-lg and .form-control-sm.

Custom controls including Checkboxes, Radios, Select, Range, etc.

Check this custom checkbox

Check this custom checkbox 2

Toggle this custom radio

Or toggle this other custom radio

Example

                                                Check this custom checkbox 
   Check this custom checkbox 2 
 
    Toggle this custom radio 
   Or toggle this other custom radio

Modals

A modal plugin allows to add dialogs to your site for lightboxes, user notifications, or completely custom content, etc.

Example

                                                Add more storage
  
  You are out of storage space.
 To upload more data, please add additional storage space.
  Select Size:

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Example

                                                Center modal
  
  Overflowing text to show scroll behavior
 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.
 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

Example

Modal title

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.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
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.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
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.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
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.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
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.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.
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.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
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.

A modal can be used to show contexual messages including success, error, warning, information messages, etc.

Example

                                             
  
 Awesome!
We receieved your application and will process it shortly.
 Back

Progress

Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels

25%

Example

25%

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

Set a height value on the .progress. The inner .progress-bar will automatically resize accordingly.

Example

Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Example

                                            Loading...

If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!

Example

                                            Loading...

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.

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

Example

                                            Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Action
Another action
Something else here

Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Example

Tooltips

Examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Colors

Primary

Secondary

Success

Error

Warning

Info

Background

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-soft-primary

.bg-soft-secondary

.bg-soft-success

.bg-soft-danger

.bg-soft-warning

.bg-soft-info

Text Colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

Alerts

Example

Example

Accordions

What is Lorem Ipsum?

Why do we use it?

Where does it come from?

Example

What is Lorem Ipsum?

Why do we use it?

Where does it come from?

Badges

Example heading New