{{> layouts/head pageTitle="UI General Elements" }}
{{> layouts/header }} {{> layouts/sidebar activeMenu="ui-elements" activePage="general" }}

## General Elements

A comprehensive collection of basic UI components including buttons, badges, alerts, progress bars, and more.

### Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

##### Basic Buttons

##### Outline Buttons

##### Button Sizes

##### Button States

### Badges

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

##### Badges

Primary Secondary Success Danger Warning Info Light Dark

###### Rounded Badges

Primary Secondary Success Danger Warning Info

###### Badges in Buttons

### Alerts

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

##### Basic Alerts

A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!

##### Dismissible Alerts

Holy guacamole! You should check in on some of those fields below.

#### Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

### Progress Bars

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

##### Progress Bars

50%
75%
90%

###### Striped Progress Bars

###### Animated Progress Bars

### Spinners

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

##### Spinners

###### Border Spinner

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

###### Growing Spinner

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

###### Size Variations

Loading...
Loading...
Loading...
Loading...

### Tooltips & Popovers

Documentation and examples for adding custom Bootstrap tooltips and popovers.

##### Tooltips

##### Popovers

###### Four Directions

### Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

##### Pagination

###### Pagination Sizes

##### Breadcrumbs

{{> layouts/footer }}
{{> layouts/scripts }}