Module Themes
Menu Options
Menu Styles
Headers
Layouts
Footers
Breadcrumbs
Granular Styling
Accessibility
Google Translator
RTL
Fast-Track design & development with enterprise functionality in just a few clicks
Customize the font, size, foreground and background colors of each individual component including header, menu (root items, sub menus, active menus, headings, mobile menu, vertical menu, mega menu), body, headings, paragraphs, and links (visited, hover, active)
The lightboxes are driven by Magnific Popup script.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<div class="row"> <div class="col-md-3"> <h5 class="text-semibold text-uppercase mt-lg">Default</h5> <a class="lightbox" href="/portals/22/img/projects/project.jpg" data-plugin-options="{'type':'image'}"> <img class="img-fluid" src="/portals/22/img/projects/project.jpg" alt="Project Image" /> <span class="btn-text-indent">Lightbox</span> </a> </div> <div class="col-md-3"> <h5 class="text-semibold text-uppercase mt-lg">Default with Border</h5> <a class="img-thumbnail lightbox d-block" href="/portals/22/img/projects/project.jpg" data-plugin-options="{'type':'image'}"> <img class="img-fluid" src="/portals/22/img/projects/project.jpg" alt="Project Image" /> <span class="btn-text-indent">Lightbox</span> </a> </div> <div class="col-md-3"> <h5 class="text-semibold text-uppercase mt-lg">With Icon</h5> <a class="img-thumbnail lightbox d-block" href="/portals/22/img/projects/project-4.jpg" data-plugin-options="{'type':'image'}"> <img class="img-fluid" src="/portals/22/img/projects/project-4.jpg" alt="Project Image" /> <span class="zoom"><em class="fas fa-search"></em></span> <span class="btn-text-indent">Lightbox</span> </a> </div> <div class="col-md-3"> <h5 class="text-semibold text-uppercase mt-lg">Hover Effect</h5> <a class="img-thumbnail img-thumbnail-hover-icon lightbox d-block" href="/portals/22/img/projects/project-4.jpg" data-plugin-options="{'type':'image'}"> <img class="img-fluid" src="/portals/22/img/projects/project-4.jpg" alt="Project Image" /> <span class="btn-text-indent">Lightbox</span> </a> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<div class="lightbox mb-lg" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}"> <a class="img-thumbnail d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project.jpg" title="Project 1"> <img class="img-fluid" src="/portals/22/img/projects/project.jpg" width="110" height="110" alt="Project" /> <span class="btn-text-indent">Lightbox</span> </a> <a class="img-thumbnail d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-1.jpg" title="Project 2"> <img class="img-fluid" src="/portals/22/img/projects/project-1.jpg" width="110" height="110" alt="Project" /> <span class="btn-text-indent">Lightbox</span> </a> <a class="img-thumbnail d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-2.jpg" title="Project 3"> <img class="img-fluid" src="/portals/22/img/projects/project-2.jpg" width="110" height="110" alt="Project" /> <span class="btn-text-indent">Lightbox</span> </a> </div>
<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}"> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-4.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-4.jpg" alt="Project Image" width="110" height="110" /> <span class="btn-text-indent">Lightbox</span> </a> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-5.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-5.jpg" alt="Project Image" width="110" height="110" /> <span class="btn-text-indent">Lightbox</span> </a> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-6.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-6.jpg" alt="Project Image" width="110" height="110" /> <span class="btn-text-indent">Lightbox</span> </a> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}"> <div class="owl-carousel stage-margin" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 40}"> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-1.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-1.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-2.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-2.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-3.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-3.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-4.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-4.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-5.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-5.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-6.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-6.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project-7.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project-7.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> <div> <a class="img-thumbnail img-thumbnail-hover-icon d-inline-block mb-xs mr-xs" href="/portals/22/img/projects/project.jpg"> <img class="img-fluid" src="/portals/22/img/projects/project.jpg" alt="Project Image" /> <span class="btn-text-indent">Zoom Image</span> </a> </div> </div> </div>
Animations are added with simple CSS transitions, you can make them look however you wish.
Open with fade-zoom animation Open with fade-slide animation
This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.
1 2 3 4 5
<a class="mt-xs mb-xs mr-xs popup-with-zoom-anim btn btn-primary" href="#small-dialog">Open with fade-zoom animation</a> <a class="mt-xs mb-xs popup-with-move-anim btn btn-primary" href="#small-dialog">Open with fade-slide animation</a> <div class="dialog dialog-sm zoom-anim-dialog mfp-hide" id="small-dialog"> <h1>Dialog example</h1> <p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p> </div>
In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.
1 2 3 4 5 6 7 8 9 10
<div class="row"> <div class="col-md-4"><a class="mt-xs mb-xs mr-xs popup-youtube btn btn-primary" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube Video</a></div> <div class="col-md-4"><a class="mt-xs mb-xs mr-xs popup-vimeo btn btn-primary" href="https://vimeo.com/45830194">Open Vimeo Video</a></div> <div class="col-md-4"><a class="mt-xs mb-xs popup-gmaps btn btn-primary" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a></div> </div> <div class="row"> <div class="col-md-4"><a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube Video</a></div> <div class="col-md-4"><a class="popup-vimeo" href="https://vimeo.com/45830194">Open Vimeo Video</a></div> <div class="col-md-4"><a class="popup-gmaps" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a></div> </div>
Open Form
Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<a class="popup-with-form btn btn-primary" href="#demo-form">Open Form</a> <div id="demo-form" class="white-popup-block mfp-hide form-horizontal"> <div class="row"> <div class="col-sm-12"> <h4>Basic Form</h4> <p class="mb-lg">Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.</p> </div> </div> <div class="form-group mt-lg"> <div class="row"> <div class="col-sm-12"> <label for="name" class="control-label">Name</label> <input type="text" id="name" name="name" class="form-control" placeholder="Type your name..." /> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-12"> <label for="email" class="control-label">Email</label> <input type="email" id="email" name="email" class="form-control" placeholder="Type your email..." /> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-12"> <label for="url" class="control-label">URL</label> <input type="url" id="url" name="url" class="form-control" placeholder="Type an URL..." /> </div> </div> </div> <div class="form-group"> <div class="row"> <div class="col-sm-12"> <label for="textarea" class="control-label">Comment</label> <textarea rows="5" id="textarea" name="textarea" class="form-control" placeholder="Type your comment..."></textarea> </div> </div> </div> <div class="row mb-lg"> <div class="col-sm-12"> <button class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-primary">Reset</button> </div> </div> </div>