Brace CoreUI :: Unnamed Application

Alerts

Bootstrap Alerts

docs

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!

This is a light alert—check it out!

This is a dark alert—check it out!

Bootstrap Alertsuse.alert-link to provide links

This is a primary alert withan example link. Give it a click if you like.

This is a secondary alert withan example link. Give it a click if you like.

This is a success alert withan example link. Give it a click if you like.

This is a danger alert withan example link. Give it a click if you like.

This is a warning alert withan example link. Give it a click if you like.

This is a info alert withan example link. Give it a click if you like.

This is a light alert withan example link. Give it a click if you like.

This is a dark alert withan example link. Give it a click if you like.

Bootstrap Alertsadditional content

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.

Bootstrap Alertsdismissing

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

Buttons

Standard Buttons

Normal

Active State

Disabled

Outline Buttons

Use.btn-outline-* class for outline buttons.

Normal

Active State

Disabled

Ghost Buttons

Use.btn-ghost-* class for ghost buttons.

Normal

Active State

Disabled

Square Buttons

Use.btn-square class for square buttons.

Normal

Active State

Disabled

Pill Buttons

Use.btn-pill class for pill buttons.

Normal

Active State

Disabled

Sizes

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

Small add.btn-sm

Normal

Large add.btn-lg.

With Icons

Block Level Buttons

Add this class.btn-block

Block Level Buttons

Add this class.btn-block

Cards

Card title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Card footer

Card with icon

Card with switch

Card with labelSuccess

Card with label42

Card outline

Card with accent

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

Card actions

Dropdowns

docs

Menus

Basic Forms

Credit Card Form

Name

Credit Card Number

Month

Year

CVV/CVC

Company Form

Company

VAT

Street

City

Postal Code

Country

Validation states Form

Input with success

Input with error

Please provide a valid informations.

Validation was-validated

Input with success

Input required

Please provide a valid informations.

Icon/Text Groups

Buttons Groups

Dropdowns Groups

Use the grid for big devices! .col-lg-* .col-md-* .col-sm-*

Input Grid for small devices! .col-*

Example Form

Form Elements

Prepended text

Here's some help text

Appended text

.00

Here's more help text

Append and prepend

.00

Append with button

Two-button append

Bootstrap Modals

Popovers

docs

Dismissible popover

// To use popovers, add this to your js
window.addEventListener("load", () => {
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
})

Popoversdirections

Switches

3d Switch

Switch default

Switch default - pills

Switch outline

Switch outline - pills

Switch opposite

Switch opposite - pills

Switch with text

Switch with text - pills

Switch with text outline

Switch with text outline - pills

Switch with text opposite

Switch with text opposite - pills

Switch with icon

Switch with icon - pills

Switch with icon outline

Switch with icon outline - pills

Switch with icon opposite

Switch with icon opposite - pills

Sizes

Size	Example	CSS Class
Large		Add following class`.c-switch-lg`
Normal		-
Small		Add following class`.c-switch-sm`

Tabs

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tooltips

docs

Hover over the links below to see tooltips:

// To enable tooltips, call this from javascript
window.addEventListener("load", () => {
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
})

Widgets

89.9%

Widget title

Widget helper text

12.124

Widget title

Widget helper text

$98.111,00

Widget title

Widget helper text

2 TB

Widget title

Widget helper text

89.9%

Widget title

Widget helper text

12.124

Widget title

Widget helper text

$98.111,00

Widget title

Widget helper text

2 TB

Widget title

Widget helper text

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

$1.999,50

Widget title

87.500

Visitors

385

New Clients

1238

Products sold

28%

Returning Visitors

5:34:11

Avg. Time

972

Comments

87.500

Visitors

385

New Clients

1238

Products sold

28%

Returning Visitors

5:34:11

Avg. Time

Alerts

Well done!

Buttons

Cards

Dropdowns

Dropdown header

Basic Forms

Modal

Popover

Switches

Tabs

Tooltips

Widgets