Messages
So modals are awesome, but i like more.
Let's message, try and click the button here and add a message.
<p>
<a class="btn btn-primary" href="#message-default" data-toggle="modal">Trigger message</a>
</p>
<div class="message" id="message-default">
<div class="message-dialog">
<div class="container">
<a class="close" href="#" data-dismiss="modal">
×
</a>
<h1>Message title</h1>
<p>
Message body ...
</p>
<a class="btn btn-info" href="#" data-dismiss="modal">Close</a>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<div class="row">
<div class="col-12 pt-3">
<a href="https://github.com/disjfa/glynn-admin/tree/master/site/pages/messages/messages.html" class="btn btn-outline-primary">
<i class="fab fa-github"></i>
edit on github
</a>
</div>
</div>Colors
A message is like a bootstrap model, but you can just use it like you want. Just add an id to the message and target it using a link.
<p>
<a class="btn btn-primary" href="#message-primary" data-toggle="modal">Trigger primary</a>
</p>
<div class="message" id="message-primary">
<div class="message-dialog bg-primary text-white">
<div class="container">
<a class="close" href="#" data-dismiss="modal">×</a>
<h1>Hey</h1>
<p>
You just clicked a primary message...
</p>
<p>
Just note that the primary buttons will not work on this.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad atque debitis delectus dolorem dolorum ducimus eius fugit harum laboriosam laudantium magni minus, odit, perferendis praesentium quaerat velit voluptatem. Amet, ipsum.
</p>
<a class="btn btn-info" href="#" data-dismiss="modal">Close</a>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<div class="row">
<div class="col-12 pt-3">
<a href="https://github.com/disjfa/glynn-admin/tree/master/site/pages/messages/messages.html" class="btn btn-outline-primary">
<i class="fab fa-github"></i>
edit on github
</a>
</div>
</div>