Jasmine
  • 9

    You have 3 messages.

    • Profile Picture
      Andy sent you a message
      15 minutes ago
    • Profile Picture
      Lucy sent you a message
      30 minutes ago
    • Profile Picture
      Jackson sent you a message
      40 minutes ago
    • Profile Picture
      Donna sent you a message
      5 hours ago
    • Profile Picture
      Lucy sent you a message
      Yesterday
    • Profile Picture
      Jackson sent you a message
      Yesterday
    Show All Messages
  • 5

    You have 3 messages.

    • New comments waiting approval
      15 minutes ago
    • 90%
      HDD is full
      50 minutes ago
    • Write a news article
      Last Update 8 hours ago
    • New
      Comment Sorting
      Last Update 8 hours ago
    • New User Registered
      4 minutes ago
    Show All Notifications
  • English EN English
    • English EN English
    • France FR Français
    • Germany DE Deutsch
    • Italy IT Italiano
    • Spain ES Español
  • Profile Picture
    John Doe
    • Profile
    • Messages
    • Settings
    • Logout

Components

You are here:
  1. Home
  2. Components

Tooltips on Text

Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat quis nostrud exerci tation ullamcorper.

Four directions

Dismissible popover

Dismissible popover

Four directions

Bootstrap Alert

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Oh snap! Change a few things up and try submitting again.
Oh snap! Change a few things up and try submitting again.

Bootstrap Alert With Icon

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

Server Load Limited

Database server has reached its daily capicity

Server Load Limited

Database server has reached its daily capicity

Server Load Limited

Database server has reached its daily capicity

Server Load Limited

Database server has reached its daily capicity

...

MyAdmin is an Awesome Dashboard

Awesome admin template

Based on Latest Bootstrap 3.1.0

...

Well Organized

Awesome admin template

Huge UI Elements

Previous Next

MyAdmin is an Awesome Dashboard

Awesome admin template

Based on Latest Bootstrap 3.1.0

Well Organized

Awesome admin template

Huge UI Elements

Well Documentation

Awesome admin template

Very Easy to Use

MyAdmin is an Awesome Dashboard

Awesome admin template

Based on Latest Bootstrap 3.1.0

Well Organized

Awesome admin template

Huge UI Elements

Well Documentation

Awesome admin template

Very Easy to Use

Labels & Badges

Class Labels Badges
Default Default 6
Danger Danger 4
Warning Warning 7
Success Success 8
Info Info 2
Primary Primary 5
Dark Dark 12
Mint Mint 12
Pink Pink 12
Purple Purple 12

Pagination

Sizing

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

Pager (Default & Aligned links)

  • Previous
  • Next
  • Previous
  • Next

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

  • Previous
  • Next

Basic Progress Bar

Add .progress to create a simple effect. Not available in IE8.

15% Complete (success)
30% Complete (success)
45% Complete (success)
60% Complete
75% Complete (warning)
90% Complete (danger)

Striped Progress Bar

Add .progress-striped to create a striped effect. Not available in IE8.

15% Complete (success)
30% Complete (success)
45% Complete (success)
60% Complete
75% Complete (warning)
90% Complete (danger)

Animated Progress Bar

Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.

15% Complete (success)
30% Complete (success)
45% Complete (success)
60% Complete
75% Complete (warning)
90% Complete (danger)

Progress Bar

Add .progress-striped to create a striped effect. Not available in IE8.

15% Complete
30% Complete
45% Complete
60% Complete
75% Complete
90% Complete

Animated Progress Bar

Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Progress Bar

Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.

35%
20%
10%
25%
10%
25%
20%
50%
5%
55%
10%
5%
15%
35%
10%
40%
5%
15%

Breadcrumb

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data
  1. Home
  2. Library
  3. Library 2
  4. Data

Thumbnails

...
...
...
...

Custom content

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.

Button Button

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.

Button Button

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.

Button Button

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Media object

64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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.
64x64
64x64

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.
64x64

Media alignment

64x64

Top aligned media

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

64x64

Middle aligned media

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

64x64

Bottom aligned media

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media object

64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

List group

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

List group with Badges

  • 14 Cras justo odio
  • 6Dapibus ac facilisis in
  • 12 Morbi leo risus
  • 8Porta ac consectetur ac
  • 5Vestibulum at eros

List group with Linked items

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

Custom content

List group item heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.

List group item heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.

List group item heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed molestie venenatis convallis.

Disabled items

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

Contextual classes

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

    Responsive embed

    • Navigation
    • Dashboard
    • Email
      • Inbox
      • View Message
      • Compose Message
    • Components
    • Layouts
      • Blank Page
      • Boxed Version
      • Collapsed Sidebar
      • Push Menu
      • Slide Menu
      • Horizontal Menu
      • Boxed Horizontal
    • UI Elements
      • CSS3 Animation
      • Button
      • Checkbox & Radio
      • Tab
      • Accordions
      • Draggable Panel
      • Fontawesome
      • Grids
      • Icons
      • Typography
      • Nested Lists
      • Panel
      • Timeline
      • Xeditable
      • Components
    • Pages
      • Directory
      • FAQ
      • User Profile
      • Gallery New
      • Invoice
      • 404 Error
      • 500 Error
      • Login
      • Register
      • Password Reminder
      • Lock Screen
    • Tables
      • Datatable Table
      • Footable Table
      • Static Table New
    • Forms
      • Form Layout
      • Form Switchery
      • Form Components
      • Form Validation
      • Form Wizard
    • Charts
      • Flot Chart
      • Morris Chart
    • Extra
    • Calendar
    • Widgets New
    • Maps New
      • Google Maps
      • Vector Maps
    • Menu Level
      • Second Level Item
      • Second Level Item
      • Second Level Item
      • Third Level
        • Third Level Item
        • Third Level Item
        • Third Level Item
        • Third Level Item
      • Third Level
        • Third Level Item
        • Third Level Item
        • Third Level Item
        • Third Level Item
        • Third Level Item
    • Server Status
    • 15%

      CPU Usage

      15%
    • 75%

      Bandwidth

      75%

    Online Members (7)

    John Knight
    Available
    Jose Knight
    Available
    Roy Banks
    Available
    Steven Jordan
    Available
    Scott Owens
    Available
    Melissa Hunt
    Available

    Busy Members (4)

    John Knight
    Available
    Jose Knight
    Available
    Roy Banks
    Available
    Steven Jordan
    Available

    Offline Members (4)

    John Knight
    Available
    Jose Knight
    Available
    Roy Banks
    Available
    Steven Jordan
    Available
    • Account Settings

    • Show my personal status

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Show offline contact

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Invisible mode

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    • Public Settings

    • Online status
    • Show offline contact
    • Show my device icon

    Task Progress

    Upgrade Progress

    15%
    15% Completed

    Database

    75%
    17/23 Database
    • SEO Proggres

    • Online Tutorial

    Currently v2.2

    © 2015 Your Company