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

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?

Why do we use it?

Where does it come from?

Example

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?

Badges

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

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.

PrimarySecondarySuccessDangerWarningInfoOrangeLightDark

Example

Primary

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

PillBadge-mdBadge-lg

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

PrimarySecondarySuccessDangerWarningInfoOrangeDark

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

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
Textareatext are content goes here...
Default Select
File UploadChoose file
Default Select Multiple
Input with icon
Input with hint textUSD

Set heights using classes like .form-control-lgand .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

Nav Tabs

Takes the basic nav and adds the .nav-tabsclass 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
... 
... 
...

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-centeredto .modal-dialogto 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-scrollableto .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-stripedto any .progress-barto 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.

Example

Alerts
Accordions
Badges
Breadcrumb
Buttons
Cards
Carousel
Dropdowns
Form Elements
Nav Tabs
Modals
Progress
Pagination
Spinners
Offcanvas
Popovers
Tooltips

Getting Started

Style Guide

Components

Sections

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