starlight
Navigation

Donna Seay

2 minutes ago

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

Samantha Francis

3 hours ago

My entire soul, like these sweet mornings of spring.

Robert Walker

5 hours ago

I should be incapable of drawing a single stroke at the present moment...

Larry Smith

Yesterday, 8:34pm

When, while the lovely valley teems with vapour around me, and the meridian sun strikes...

Donna Seay

Jan 23, 2:32am

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

View More Messages

Suzzeth Bungaos tagged you and 18 others in a post.

October 03, 2017 8:45am

Mellisa Brown appreciated your work The Social Network

October 02, 2017 12:44am

20+ new items added are for sale in your Sale Group

October 01, 2017 10:20pm

Julius Erving wants to connect with you on your conversation with Ronnie Mara

October 01, 2017 6:08pm

Suzzeth Bungaos tagged you and 12 others in a post.

September 27, 2017 6:45am

10+ new items added are for sale in your Sale Group

September 28, 2017 11:30pm

Mellisa Brown appreciated your work The Great Pyramid

September 26, 2017 11:01am

Julius Erving wants to connect with you on your conversation with Ronnie Mara

September 23, 2017 9:19pm

##### Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

###### Basic Alert

Use one of the four required contextual classes

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.

Source Code

    <div class="alert alert-success" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <strong class="d-block d-sm-inline-block-force">Well done!</strong> You successfully read this important alert message.
    </div><!-- alert -->

###### Alert With Icons

Using icons inside an alert box.

Well done! Successful alert message.
Heads up! This alert needs your attention.
Warning! Better check yourself.
Oh snap! Error alert message.

Source Code

    <div class="alert alert-success" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center justify-content-start">
        <i class="icon ion-ios-checkmark alert-icon tx-32 mg-t-5 mg-xs-t-0"></i>
        <span><strong>Well done!</strong> Successful alert message.</span>
      </div><!-- d-flex -->
    </div><!-- alert -->

###### Bigger Alerts

Having a bigger size to emphasize an alert

##### Well done! You successfully read this important alert message.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

##### Heads up! This alert needs your attention, but it's not super important.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

##### Warning! Better check yourself, you're not looking too good.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

##### Oh snap! Change a few things up and try submitting again.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...

Source Code

    <div class="alert alert-danger alert-bordered pd-y-20" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="d-flex align-items-center justify-content-start">
        <i class="icon ion-ios-close alert-icon tx-52 tx-danger mg-r-20"></i>
        <div>
          <h5 class="mg-b-2 tx-danger">Oh snap! Change a few things up and try submitting again.</h5>
          <p class="mg-b-0 tx-gray">Neque porro quisquam est, qui dolorem ipsum...</p>
        </div>
      </div><!-- d-flex -->
    </div><!-- alert -->