THEME COLOR
Layout
Header
Top Dropdown
Sidebar Mode
Sidebar Style
Sidebar Menu
Sidebar Position
Footer

General Components bootstrap alerts, notes, tooltips, progress bars, labels, badges, paginations and more

Alerts

Default Alerts

Success! The page has been added.
Info! You have 198 unread messages.
Warning! Your monthly traffic is reaching limit.
Error! The daily cronjob has failed.

Dismissable Alerts

Warning! Something went wrong. Please check.

Links in alerts

WOW! Well done and everything looks OK. Please check this one as well
Inline Notifications

Error!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Do this Cancel

Success!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Do this Cancel

Info!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Do this Cancel

Warning!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Do this Cancel

Pulsate

Pulsate any page elements.

Repeating Pulsate
Repeating Pulsate
Pulsate me
Pulsate me
NOTE! Pulsate is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 9 and Internet Explorer 10 only.
Modal Dialogs

Click on below buttons to check it out.

Modal Dialog Alert Confirm
Tooltips

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. twitter handle freegan cred raw denim single-origin coffee viral.

Popovers

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel trigger me on hover terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.

List Groups

Basic

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Custom Colors(refer to ui_colors.html for more colors)

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Badges

  • Cras justo odio 3
  • Dapibus ac facilisis in 11
  • Morbi leo risus new
  • Porta ac consectetur ac 4
  • Vestibulum at eros 3

Contextual States

  • Default
  • Success
  • Info 3
  • Warning 3
  • Danger

Disabled States

  • Item 1
  • Item 2
  • Item 3 3
  • Item 4 3

Linked Contextual Items

Custom Content

Panels

Basic Panels

Panel heading without title
Panel content

Panel title

Panel content
Panel content

Contextual Panels

Primary Panel

Panel content

Primary Panel

Panel content

Success Panel

Panel content

Info Panel

Panel content

Warning Panel

Panel content

Danger Panel

Panel content

With Tables

Panel Title

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

With List Groups

Panel Title

Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio 3
  • Dapibus ac facilisis in 11
  • Morbi leo risus new
  • Porta ac consectetur ac 4
  • Vestibulum at eros 3
  • Vestibulum at eros
Notes

Success! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Info! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, mattis consectetur purus sit amet eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Danger! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet.\ Cras mattis consectetur purus sit amet fermentum.

Warning! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet. Cras mattis consectetur purus sit amet fermentum.

Progress Bars

Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Basic

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Labels & Badges

Labels & Badges Styles

Class Labels Badges Roundless Badges
Default Default 5 3
Primary Primary 4 Hot
Info Info 6 New
Success Success 1 2
Danger Danger 3 5
Warning Warning 12 3

Labels In Headings

Example heading default

Example heading success

Example heading danger

Example heading info

Example heading warning

Example heading primary
Pager With Aligned Links

Default

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

Optional Disabled State

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

With Styled Buttons & Icons

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
Dynamic Pagination(jQuery Bootpag)

Basic Pagination

Page 1 content here


Advance Pagination

Page 1 content here

Wells

I am a large well

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

I am a default well

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

I am a small well

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

Media Objects

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left or right aligned image alongside textual content.

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Thumbnails

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default

Custom Content

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Staff

  • 8
    ...

    Bob Nilson

    Project Manager
  • ...

    Nick Larson

    Art Director
  • 3
    ...

    Deon Hubert

    CTO
  • ...

    Ella Wong

    CEO

Customers

  • 2
    ...

    Lara Kunis

    CEO, Loop Inc
    Last seen 03:10 AM
  • new
    ...

    Ernie Kyllonen

    Project Manager,
    SmartBizz PTL
  • ...

    Lisa Stone

    CTO, Keort Inc
    Last seen 13:10 PM
  • 7
    ...

    Deon Portalatin

    CFO, H&D LTD
  • ...

    Irina Savikova

    CEO, Tizda Motors Inc
  • 4
    ...

    Maria Gomez

    Manager, Infomatic Inc
    Last seen 03:10 AM
Bob Nilson 20:15 When could you send me the report ?
Ella Wong 20:15 Its almost done. I will be sending it shortly
Bob Nilson 20:15 Alright. Thanks! :)
Ella Wong 20:16 You are most welcome. Sorry for the delay.
Bob Nilson 20:17 No probs. Just take your time :)
Ella Wong 20:40 Alright. I just emailed it to you.
Bob Nilson 20:17 Great! Thanks. Will check it right away.
Ella Wong 20:40 Please let me know if you have any comment.
Bob Nilson 20:17 Sure. I will check and buzz you if anything needs to be corrected.

General

System

General Settings

  • Enable Notifications
  • Allow Tracking
  • Log Errors
  • Auto Sumbit Issues
  • Enable SMS Alerts

System Settings

  • Security Level
  • Failed Email Attempts
  • Secondary SMTP Port
  • Notify On System Error
  • Notify On SMTP Error