Box Component

The box component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text. It comes in many different styles that we will explore below.

Default Box Markup

Default Box Example

Label
The body of the box

Box Variants

You can change the style of the box by adding any of the contextual classes.

Default Box Example

The body of the box

Primary Box Example

The body of the box

Info Box Example

The body of the box

Warning Box Example

The body of the box

Success Box Example

The body of the box

Danger Box Example

The body of the box

Solid Box

Solid Boxes are alternative ways to display boxes. They can be created by simply adding the box-solid class to the box component. You may also use contextual classes with you solid boxes.

Default Solid Box

The body of the box

Primary Solid Box

The body of the box

Info Solid Box

The body of the box

Warning Solid Box

The body of the box

Success Solid Box

The body of the box

Danger Solid Box

The body of the box

Box Tools

Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use of multiple AdminLTE components within the header of the box.

AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons are placed in the box-tools which is placed in the box-header.

Loading States

Loading state

The body of the box

Loading state (.box-solid)

The body of the box

To simulate a loading state, simply place this code before the .box closing tag.

PREMIUM TEMPLATE
MaterialPro

MaterialPro ─ $35

Material Bootstrap 4 Admin Template

Preview Buy Now

12+ purchases