LiteAdminmenu
notificationsNotifications
Trim the grass
John Doe
today
Clean the kitchen
John Doe
today
A larger notification that would take more space and should break the line.
That's an even larger description, that would take a lot of lines and should still look nice in any screen size.
yesterday
Trim the grass
John Doe
today
Clean the kitchen
John Doe
today
A larger notification that would take more space and should break the line.
That's an even larger description, that would take a lot of lines and should still look nice in any screen size.
yesterday
Trim the grass
John Doe
today
Clean the kitchen
John Doe
today
A larger notification that would take more space and should break the line.
That's an even larger description, that would take a lot of lines and should still look nice in any screen size.
yesterday

account_circle
John Doe


AccountLog out

aspect_ratioModal

Basics

Modals are basically pop-ups. They can have lots of scrollable content or even a single sentence. They can hold complex layouts or just text.

This is the basic markup:

<a href="#modal" class="btn-info">Open Modal</a>

<div class="modal" id="modal">

  <div class="modal-body">A nice modal content.</div>

</div>

Header and footer

Modals can have also header and/or footer:

<a href="#modal" class="btn-info">Open Modal</a>

<div class="modal" id="modal">

  <div class="modal-header">Modal header</div>

  <div class="modal-body">A nice modal content.</div>

  <div class="modal-footer">Modal footer</div>

</div>

Sizes

Modals can have 4 sizes. Add the class modal-lg, modal-md, modal-sm or modal-xs to your modal div.

Try it:


LargeMediumSmallExtra Small

Colors

You can theme your modals to represent the type of message you are communicating. Add the class modal-success, modal-info, modal-primary, modal-warning or modal-danger to the modal div.

Try it:


SucessInfoPrimaryWarningDanger

Full example

Use this full example code as reference:

<a href="#modal" class="btn-info">Open Modal</a>

<div class="modal modal-sm modal-info" id="modal">

  <div class="modal-header">My nice modal</div>

  <div class="modal-body">Incredible modal content.</div>

  <div class="modal-footer">That was the modal</div>

</div>