Nifty Logo
Nifty
    • Pages
    • Profile
    • Search Result
    • FAQ
    • Sreen Lock
    • Maintenance
    • Invoice
    • Disabled
    • Mailbox
    • HotIndox
    • Read Message
    • Compose
    • Template

    News

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

    • 90%

      Data Backup

      This is the item description

    • Support

      This is the item description

    • Security

      This is the item description

    • Location

      This is the item description

    Gallery

    thumbs
    thumbs
    thumbs
    thumbs
    thumbs
    thumbs
    Browse Gallery

    • HDD is full

      95% Complete

    • Write a news article

      Last Update 8 hours ago
    • New

      Comment Sorting

      Last Update 8 hours ago

    • New User Registered

      4 minutes ago
    • Profile Picture

      Lucy sent you a message

      30 minutes ago
    • Profile Picture

      Jackson sent you a message

      40 minutes ago
    Show All Notifications
    • Profile
    • 9 Messages
    • New Settings
    • Lock screen
    • Logout

Alerts & Tooltips

  2. UI
  3. Alerts

Basic Example

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.

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

Dismissible Alerts

Build on any alert by adding an optional .alert-dismissible and close button.

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

Links in alerts

Use the .alert-link utility class to quickly provide matching colored links within any alert.

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

Tooltips

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

Four directions

Dismissible popover

Dismissible popover

Four directions

  • Report
  • Settings

3 Family

Profile Picture

Stephen Tran

Availabe
Profile Picture

Brittany Meyer

I think so
Profile Picture

Jack George

Last Seen 2 hours ago
Profile Picture

Donald Brown

Lorem ipsum dolor sit amet.
Profile Picture

Betty Murphy

Idle
Profile Picture

Samantha Reid

Offline

Offline Friends

Joey K. Greyson Andrea Branden Johny Juan Susan Sun

News

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh. Lorem ipsum dolor sit amet.

Last Update : Des 12, 2014

Billing & reports

Get $5.00 off your next bill by making sure your full payment reaches us before August 5, 2018.

Amount Due On

August 17, 2018

$83.09

Additional Actions

Service Information Usage Profile New Payment Options Message Center
Questions?

(415) 234-53454

We are here 24/7

  • Account Settings

  • Show my personal status

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  • Show offline contact

    Aenean commodo ligula eget dolor. Aenean massa.

  • Invisible mode

    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • Public Settings

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

Task Progress

Upgrade Progress

15%
15% Completed

Database

75%
17/23 Database
Profile Picture

Aaron Chavez

aaron.cha@themeon.net
View Profile Settings Help Logout
  • Navigation
  • Dashboard
    • Dashboard 1
    • Dashboard 2
    • Dashboard 3
  • Layouts
    • Collapsed Navigation
    • Off-Canvas Navigation
    • Slide-in Navigation
    • Revealing Navigation
    • Aside on the right side
    • Aside on the left side
    • Dark version of aside
    • Fixed Navbar
    • Fixed Footer
  • Widgets 24
  • Components
  • UI Elements
    • Buttons
    • Panels
    • Modals
    • Progress bars
    • Components
    • Typography
    • List Group
    • Tabs & Accordions
    • Alerts & Tooltips
  • Forms
    • General
    • Advanced Components
    • Validation
    • Wizard
    • File Upload
    • Text Editor
    • Markdown
  • Tables
    • Static Tables
    • Bootstrap Tables
    • Data Tables
    • Foo Tables
  • Charts
    • Morris JS
    • Flot Charts
    • Easy Pie Charts
    • Sparklines
  • Miscellaneous
    • Timeline
    • Google Maps
    • NotificationsImproved
    • Nestable List
    • CSS Animations
    • CSS Loaders
    • Spinkit
    • Tree View
    • Clipboard
    • X-Editable
  • Grid System
    • Bootstrap Grid
    • Liquid Fixed
    • Match Height
    • Masonry
  • More
  • App Views
    • File Manager
    • Users
    • Users 2
    • Profile
    • Calendar
    • Taskboard
    • Chat
    • Contact Us
  • Blog Apps
    • Blog
    • Blog List
    • Blog List 2
    • Blog Details
    • Manage Posts
    • Add Edit Post
  • Email
    • Inbox
    • View Message
    • Compose Message
    • Email Templates
  • Other Pages
    • Blank Page
    • Invoice
    • Search Results
    • FAQ
    • PricingNew
    • Error 404 alt
    • Error 500 alt
    • Error 404
    • Error 500
    • Maintenance
    • Login
    • Register
    • Password Reminder
    • Lock Screen
  • Gallery
    • Columns
    • Justified
    • Nested
    • Grid
    • Carousel
    • Slider
    • Default Theme
    • Compact Theme
    • Grid Theme
  • 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
  • Extras
  • Icons Pack
    • Ion Icons
    • Themify
    • Font Awesome
    • Flag Icon CSS
    • Weather Icons
  • PREMIUM ICONS BEST
    • Line Icons Pack
    • Solid Icons Pack
  • Helper Classes
  • Server Status
  • 15%

    CPU Usage

    15%
  • 75%

    Bandwidth

    75%
  • View Details
You have 3 pending action.
14GB of 512GB Free.

© 2018 Your Company