Jekyll One

QuickSearch

J1 Template supports a rich set of advanced Bootstrap Modals that add dialogs to your web pages for user notifications. This advanced Modals highlight important information to your visitors.

The dialogs are positioned over everything else in the document so that messages get the full user’s attention.

5-10 Minutes to read

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..

Yes, please No, thanks

Modal Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.

Yes, please No, thanks

Modal Info

admin-dashboard-bootstrap

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.

Yes, please No, thanks

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..

Yes, please No, thanks

Modal Danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.

v52gs1

Yes, please No, thanks

Modal Warning

avatar.jpg

Jane

Consultant

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Yes, please No, thanks

Modal Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.

  • Cras justo odio 1
  • Dapibus ac facilisis in 2
  • Morbi leo risus 3
  • Cras justo odio 4
  • Dapibus ac facilisis in 5
  • Morbi leo risus 6
Yes, please No, thanks

Modal Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.

  • Cras justo odio 1
  • Dapibus ac facilisis in 2
  • Morbi leo risus 3
  • Cras justo odio 4
  • Dapibus ac facilisis in 5
  • Morbi leo risus 6
Yes, please No, thanks

Modal Examples

Improve your reader’s experience with important information that be noticed. Modals are a great choice to bring the user’s attention. Using the J1 Template enhanced modal styles, emotional weight is added to the information displayed. Ranging from an info level, a simple warning to critical messages.

For more information on how to use Bootstrap’s JavaScript modal plugin, refer to: Bootstrap Docs.

Table 1. Selected extended BS modal examples
Postion Class Example

top (full-width)

info

top-right

success

top-left

info

bottom (full-width)

info

bottom-right

danger

bottom-left

warning

full-height right

success

full-height left

info

What next

Bootstrap is a helpful framework that offers a complete set of styles to create excellent responsive designs. In the sense that all can be improved, responsive tables supported by Bootstrap should get some enhancement to display on low-resolution devices or smaller window sizes better.

The theme Jekyll One supports a new design for responsive tables but based on Bootstrap. The approach used by J1 Template is based on CSS styles on top of the classic Bootstrap tags for simplicity and portability to be viewed best on all devices and browsers. Responsive tables help to read this important information on mobiles a lot - this feature is what is meant to be fully responsive!

Check out from here what Responsive Tables can do!