[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Buttons

Button styles for actions in forms, dialogs, and more with a handful of variations, sizes, states, and more.

###### Basic Buttons

Twelve predefined button styles, each serving its own semantic purpose.

Source Code

    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-primary active">Active</button>
    <button class="btn btn-primary disabled">Disabled</button>

Class Reference

Class | Values
--- | ---
`class="btn btn-[value]"` | primary | success | warning | danger | info | teal | indigo | purple | pink | light | dark

###### Outline Buttons

Twelve predefined outline button styles, each serving its own semantic purpose.

Class Reference

Class | Values
--- | ---
`class="btn btn-outline-[value]"` | primary | success | warning | danger | info | teal | indigo | purple | pink | dark

###### Rounded Buttons

A very rounded corner for both basic and outline buttons.

Class Reference

Class | Values
--- | ---
`class="btn btn-oblong btn-[value]"` | primary | success | warning | danger | info | teal | indigo | purple | pink | light | dark
`class="btn btn-oblong btn-outline-[value]"`

###### Buttons With Icons

A button variant for basic and outline buttons with additional icons.

Source Code

    <button class="btn btn-primary"><i class="fa fa-send mg-r-10"></i> Send Message</button>

Send Message
Send Message
Add To Cart
Add To Cart
Download
Download
Compose
Compose

Source Code

    <a href="" class="btn btn-primary btn-with-icon">
      <div class="ht-40 justify-content-between">
        <span class="pd-x-15">Send Message</span>
        <span class="icon wd-40"><i class="fa fa-send"></i></span>
      </div>
    </a>
    <!-- reverse -->
    <a href="" class="btn btn-primary btn-with-icon">
      <div class="ht-40">
        <span class="icon wd-40"><i class="fa fa-send"></i></span>
        <span class="pd-x-15">Send Message</span>
      </div>
    </a>

Class Reference

Class | Value / Description
--- | ---
`class="btn btn-[value] btn-with-icon"` | primary | success | warning | danger | info | teal | indigo | purple | pink | light | dark
`class="ht-40"` | Set an element of having a height of 40px.
`class="wd-40"` | Set an element of having a width of 40px.
`class="pd-x-15"` | Set a padding of 15px for both left and right.

NOTE: To know more about helper classes for height, check out the Utilities menu of this template.

###### Icon Only Buttons

A button variant for using only icons.

Source Code

    <a href="#" class="btn btn-primary btn-icon">
      <div><i class="fa fa-send"></i></div>
    </a>

Class Reference

Class | Description
--- | ---
`btn-icon` | A class for button that only an icon is allowed, that means no text.

###### Adjusting The Thickness of Outline Button

Increasing the width of an outline button by adding only a single class coming from border utilities. Only applicable to outline buttons only.

Source Code

    <button class="btn btn-outline-primary bd-2">Explore</button>

Class Reference

Class | Size
--- | ---
`bd-[size]` | 1 | 2 | 3 | 4 | 5

###### Adding More Utility Classes to Button

Enhancing the button by adding some utility classes available and allowed for buttons.

Source Code

    <button class="btn btn-primary pd-x-30 pd-y-15 tx-uppercase tx-bold tx-spacing-6 tx-12">Take a Tour</button>

    <button class="btn btn-outline-primary btn-oblong bd-2 pd-x-30 pd-y-15 tx-uppercase tx-bold tx-spacing-6 tx-12">
      Take a Tour
    </button>

Class Reference

Class | Size
--- | ---
`pd-x-30` | Set the padding for both left and right to 30px. Check more padding in Padding utilities.
`pd-y-15` | Set the padding for both top and bottom to 15px. Check more padding in Padding utilities.
`tx-uppercase` | Transform the text into uppercase. Check more case in Typography utilities.
`tx-bold` | Set the text font weight into bold. Check more weight in Typography utilities.
`tx-spacing-6` | Set the letter spacing of a text. Check more spacing in Typography utilities.

###### Button Groups

Group a series of buttons together on a single line with the button group.

Source Code

    <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" class="btn btn-secondary pd-x-25 active">General Settings</button>
      <button type="button" class="btn btn-secondary pd-x-25">Privacy Settings</button>
      <button type="button" class="btn btn-secondary pd-x-25">Account Settings</button>
    </div>