Jekyll One

Roundtrip

advanced bootstrap modals

Advanced Bootstrap Modals are based on the free package of Material Design for Bootstrap on version 4.3.2. This version can be found following this link: Enhanced Bootstrap Modals. A more current version is available from here: Modal examples & templates. Bootstrap modals are used to add dialogues to your web pages for user notifications. To highlight important information to your visitors. Modals are positioned over everything else in the document so that messages get the user’s attention.

To improve your visitor’s experience on important information that shouldn’t be missed. Modals are a great choice to bring the user’s attention. Using the J1 Template BS enhanced predefined modal styles, some 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

info

top-right

success

top-left

info

bottom

info

bottom-right

danger

bottom-left

warning

full-height right

success

full-height left

info

What next

Bootstrap is a helpful framework that offers in the current V5 version a complete set of styles to create excellent responsive designs. In the sense of all can be improved, the responsive tables support of BS needs some enhancement to display tables on low-resolution devices or smaller (browser-) window sizes.

The first version for improved responsive tables that scale better is available for the J1 Template. Check out from here what the BS Table Extensions can do!

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