Ui Components

Welcome to Appexy!

Alerts

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

Default Aleart

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!

Outline Aleart

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

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?

Badge

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

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 Light Dark

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 .bg-{color}-subtle modifier class to make badges soft

Primary Secondary Success Danger Warning Info Dark

Breadcrumb

Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.

Buttons

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

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.

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

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

Buttons with icon - variations

Card

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

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

Carousel

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

Carousel with Captions

You can add captions to your slides with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional Bootstrap utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

Dropdowns

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

Dropdown menu position variations

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

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

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.

Modals

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

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

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

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

Progress

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

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.

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

Pagination

Examples for showing pagination to indicate a series of related content exists across multiple pages

You can use icon instead of showing text label for previous and next actions

Just add class modifier .pagination-rounded to .pagination in order to have rounded page action link

Spinners

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

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

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.

Tooltips

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