Bootstrap UI

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Toasts

Push notifications to your visitors with a toast,a lightweight and easily customizable alert message

Buttons

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

Outline buttons

Use a classes .btn-outline-**to quickly create a bordered buttons.

Soft buttons

Use a classes .btn-soft-**to quickly create buttons with soft background.

Button-Rounded

Add .btn-roundedto default button to get rounded corners.

Button Width

Create buttons with minimum width by adding add .width-xs,.width-sm,.width-mdor .width-lg.

Button Sizes

Add .btn-lg,.btn-smfor additional sizes.

Button Group

Wrap a series of buttons with .btnin .btn-group.



Dropdown linkDropdown link
Dropdown linkDropdown link

Badges

Default

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

PrimarySecondarySuccessDangerWarningInfo
Pill Badges

Use the .badge-pillmodifier class to make badges more rounded.

PrimarySecondarySuccessDangerWarningInfo
Badges Lighten

Use the .badge-soft-*for a badge lighten.

PrimarySecondarySuccessDangerWarningInfo

Cards

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content. With supporting text below as a natural lead-in to additional content.

Button
Card image cap
Card title

Some quick example text to build on the card title.

  • Dapibus ac facilisis in
Card link Another link
...
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

...
Dropdown Examples

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
Dropdown - More Examples

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

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

ActionAnother actionSomething else here
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
Nav Tabs

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.

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.

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.

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.

Nav Pills

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.

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.

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.

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.

Accordions 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.
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.
Custom Accordion
What is Anim text here?
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. 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. 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. 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.

Modals

A rendered modal with header,body,and set of actions in the footer.

Examples
Modal sizes
Other exmaples
Progressbars

Simple examples of progressbar

25%
Striped Progressbars

Uses a gradient to create a striped effect.

Contextual Progressbars

Progress bars use some of the same button and alert classes for consistent styles.

Progressbars Size

We can set a heightvalue on the .progress. The inner .progress-barwill automatically resize accordingly.

Popovers

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

Tooltips

Four options are available:top,right,bottom,and left aligned.

Spinners

Border spinner

Use the border spinners for a lightweight loading indicator.

Growing spinner

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

2019 ©Shreyu. All Rights Reserved. Crafted with by Coderthemes
Customization
Choose Variation
Default
vertical
Top Nav
horizontal
Dark Side Nav
dark sidenav
Condensed Side Nav
condensed
Fixed Width(Boxed)
boxed