New v4.6 responsive Row Columns method...

Isotope allows you to create cascading, masonry (or Pinterest) style layouts, in conjunction with the Bootstrap grid.

Promo Title 1

Promo Title 2

Promo Title 3

Promo Title 4

Promo Title 5

Fancy display heading With faded secondary text

Lead Paragraph, vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

attr

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur tellus sit amet mollis luctus.Praesent accumsan ante quis ex pulvinar molestie. Nam et rhoncus arcu. Curabitur massa est, venenatis ac felis vel, luctus aliquam neque. Phasellus maximus mollis mi consectetur ultrices. Aenean ante massa, maximus a bibendum vel, suscipit eu nulla. Aliquam eleifend, ex id condimentum volutpat, magna mauris pharetra augue, accumsan malesuada orci velit eu lorem. Morbi rutrum fermentum accumsan.

Proin pellentesque ultrices erat quis sagittis. Mauris consectetur volutpat arcu a egestas. Pellentesque laoreet purus non feugiat placerat. In nec justo ut eros pellentesque convallis. Duis vitae suscipit urna, nec iaculis nisi. Proin sed tortor vitae ex porta ornare sed in augue. Pellentesque augue arcu, venenatis ac odio et, viverra mollis quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur tellus sit amet mollis luctus.Praesent accumsan ante quis ex pulvinar molestie. Nam et rhoncus arcu. Curabitur massa est, venenatis ac felis vel, luctus aliquam neque. Phasellus maximus mollis mi consectetur ultrices. Aenean ante massa, maximus a bibendum vel, suscipit eu nulla. Aliquam eleifend, ex id condimentum volutpat, magna mauris pharetra augue, accumsan malesuada orci velit eu lorem. Morbi rutrum fermentum accumsan.

Proin pellentesque ultrices erat quis sagittis. Mauris consectetur volutpat arcu a egestas. Pellentesque laoreet purus non feugiat placerat. In nec justo ut eros pellentesque convallis. Duis vitae suscipit urna, nec iaculis nisi. Proin sed tortor vitae ex porta ornare sed in augue. Pellentesque augue arcu, venenatis ac odio et, viverra mollis quam.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

• Lorem ipsum dolor
• Lorem ipsum dolor
• Lorem ipsum dolor
• Lorem ipsum dolor

• Lorem ipsum dolor
• Lorem ipsum dolor
• Lorem ipsum dolor
• Lorem ipsum dolor

• Lorem ipsum dolor
• Lorem ipsum dolor
• Lorem ipsum dolor
• Lorem ipsum dolor

• Lorem ipsum dolor
• Lorem ipsum dolor
• Lorem ipsum dolor
• Lorem ipsum dolor

1. Lorem ipsum dolor
2. Lorem ipsum dolor
3. Lorem ipsum dolor

Uses SweetAlert2

Uses SweetAlert2

{capture name=dialog}
Content
{/capture}
{include file="customer/dialog.tpl" title="Dialog Title" content=$smarty.capture.dialog heading="2" title_padding="3" content_padding="3" border="primary" bg="primary" text="light" icon="star"}

{capture name=menu}
Content
{/capture}
{include file="customer/menu_dialog.tpl" title="Menu Title" content=$smarty.capture.menu content_padding="2" heading="2" title_padding="3" content_padding="3" border="primary" bg="primary" text="light" icon="star"}

Dialogs can easily transform into accordions with a little extra code.

<div class="accordion mb-4">

{capture name=dialog}
Accordion 1
{/capture}
{include file="customer/dialog.tpl" title="Title" content=$smarty.capture.dialog collapse="test-da-1" closed=false icon="star"}

{capture name=dialog}
Accordion 2
{/capture}
{include file="customer/dialog.tpl" title="Title" content=$smarty.capture.dialog collapse="test-da-2" closed=true icon="star"}

{capture name=dialog}
Accordion 3
{/capture}
{include file="customer/dialog.tpl" title="Title" content=$smarty.capture.dialog collapse="test-da-3" closed=true icon="star"}

</div>

For one accordion open at a time, you use the code above and simply add a unique ID to the parent DIV...

Our homebrew responsive X-Tabs are the easiest to implement, which convert to accordions on small devices. Another good feature is that you can link directly to a tab using it's named anchor.

• Home
• Profile
• Contact

• Home
• Profile
• Contact

• Home
• Profile
• Contact

• Home
• Profile
• Contact

• Home
• Profile
• Contact

• Home
• Profile
• Contact

Or if you prefer, you can simply use loading="lazy" on images and iframes, which is becoming more cross-browser friendly as of 2020.

NEW

LOW STOCK

ON SALE

EXCLUSIVE

Trusted By...

{include file="custom/widgets/widget_trusted_by.tpl" title="Trusted By..." animation="zoomIn" repeat=true delay="0" duration="1"}

3D Perspective Right

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..

3D Perspective Left

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

PICTURE is the easiest method for responsive lazyloaded images. Resize the browser and you'll see the image change...

SRCSET is the alternative method, usually used for images with the same aspect ratio...

Use the class .lightbox on the hyperlink.

Lightbox Button

Use the class .lbox on the parent container.

Lightbox Group Button Image 2 Image 3

60 hover effects available, courtesy of https://www.imagehover.io

imghvr-fade | imghvr-push-up | imghvr-push-down | imghvr-push-left | imghvr-push-right | imghvr-slide-up | imghvr-slide-down | imghvr-slide-left | imghvr-slide-right | imghvr-reveal-up | imghvr-reveal-down | imghvr-reveal-left | imghvr-reveal-right | imghvr-hinge-up | imghvr-hinge-down | imghvr-hinge-left | imghvr-hinge-right | imghvr-flip-horiz | imghvr-flip-vert | imghvr-flip-diag-1 | imghvr-flip-diag-2 | imghvr-shutter-out-horiz | imghvr-shutter-out-vert | imghvr-shutter-out-diag-1 | imghvr-shutter-out-diag-2 | imghvr-shutter-in-horiz | imghvr-shutter-in-vert | imghvr-shutter-in-out-horiz | imghvr-shutter-in-out-vert | imghvr-shutter-in-out-diag-1 | imghvr-shutter-in-out-diag-2 | imghvr-fold-up | imghvr-fold-down | imghvr-fold-left | imghvr-fold-right | imghvr-zoom-in | imghvr-zoom-out | imghvr-zoom-out-up | imghvr-zoom-out-down | imghvr-zoom-out-left | imghvr-zoom-out-right | imghvr-zoom-out-flip-horiz | imghvr-zoom-out-flip-vert | imghvr-blur | imghvr-switch-up | imghvr-switch-down | imghvr-switch-left | imghvr-switch-right | imghvr-pivot-in-top-left | imghvr-pivot-in-top-right | imghvr-pivot-in-bottom-left | imghvr-pivot-in-bottom-right | imghvr-pivot-out-top-left | imghvr-pivot-out-top-right | imghvr-pivot-out-bottom-left | imghvr-pivot-out-bottom-right | imghvr-fall-away-horiz | imghvr-fall-away-vert | imghvr-fall-away-cc | imghvr-fall-away-ccc

Image or textual watermarking. Various positions are possible also. Watermarking is done on-the-fly, as such images cannot be lazyloaded.

This feature offers basic image protection. Obviously it's best to watermark your images to begin with, using your photo editing software.

No Effect...

Fade In Effect...

Float In Effect, Light...

Drag the handle to show before & after images...

{include file="custom/widgets/widget_before_after.tpl" before="before.jpg" after="after.jpg" width="640" height="480" before_alt="Before" after_alt="After"}

Drag the image...

Loading...

{include file="custom/widgets/widget_360.tpl" folder="mini" image="mini" ext="jpg" count="36"}

On Hover + Lightbox

On Click

Royalty free images.

Accordion 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Call to Action

Accordion 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Call to Action

Accordion 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Call to Action

{include file="custom/widgets/widget_promo_accordion.tpl" id="acc_promo_1" bg="success"}

Accordion 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Call to Action

Accordion 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Call to Action

Accordion 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Call to Action

{include file="custom/widgets/widget_promo_accordion.tpl" id="acc_promo_2" flip=true bg="danger" anim1="fadeInDown" anim2="fadeOutDown"}

{include file="custom/widgets/widget_promo_stretcher.tpl"}

H2 Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Call to Action

{include file="custom/promos/promo_collage.tpl" right=false bg="light" color="dark" border="" image="./skin/reboot/images/demo/768x432.jpg" title="H2 Title" text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text." link="#" cta="Call to Action" btn="success rounded-pill"}

H2 Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.

Call to Action

{include file="custom/promos/promo_collage.tpl" right=true bg="dark" color="light" border="dark" image="./skin/reboot/images/demo/768x432.jpg" title="H2 Title" text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text." link="#" cta="Call to Action" btn="success rounded-pill"}

Build fast, responsive sites with reBOOT

Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring a responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Get Started Download

Currently v4.7.12

Build fast, responsive sites with reBOOT

Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring a responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Get Started Download

Currently v4.7.12

4 Styles, static or fixed background.

Light / dark captions, half / full / auto width & height captions.

{include file="custom/youtube.tpl" id="YE7VzlLtp-4" title="Optional YouTube Video Title"}

{include file="custom/vimeo.tpl" id="76979871" title="Optional Vimeo Video Title"}

{include file="custom/mp4.tpl" id="https://www.xcartmods.com/demo/video/md.mp4"}

{include file="custom/mp4.tpl" id="https://www.xcartmods.com/demo/video/big buck bunny.mp4"}

{include file="custom/mp4.tpl" id="https://xcartmods.com/demo/video/video-feature.mp4" promo=true title="Video Title" subtitle="Video Subtitle Lorem Ipsum Dolor" link="#" link_title="Call to Action" btn="btn btn-lg btn-primary rounded-pill shadow"}

Modal Video

{capture name=videos}
{include file="custom/video.tpl" id="YE7VzlLtp-4" carousel=true swipe=true title="Custom Video Title 1"}
{include file="custom/video.tpl" id="ni5hRK1ehzk" carousel=true swipe=true title="Custom Video Title 2"}
{include file="custom/video.tpl" id="YGE5euSZnbI" carousel=true swipe=true title="Custom Video Title 3"}
{include file="custom/video.tpl" id="ScMzIvxBSi4" carousel=true swipe=true title="Custom Video Title 4"}
{include file="custom/video.tpl" id="ctvlUvN6wSE" carousel=true swipe=true title="Custom Video Title 5"}
{/capture}
{include file="custom/videos.tpl" content=$smarty.capture.videos nodialog=true carousel=true mb="5"}

Requires a YouTube API key (template settings > Misc) and is subject to daily limits. No display = daily limit reached.

{include file="custom/widgets/widget_youtube_feed.tpl" username="bbcnews" limit="2" more=true}

{include file="custom/widgets/widget_youtube_feed.tpl" username="GoProCamera" limit="2" more=true}

Requires a YouTube API key (template settings > Misc) and is subject to daily limits. No display = daily limit reached.

{include file="custom/widgets/widget_youtube_playlist.tpl" playlistID="PLSSPBo7OVSZt1kg5D2Z13-sBn9TqzTbUV" playlistTitle="GoPro Fusion + VR"}

Play WAV Play MP3 Modal MP3

Play Play Play Play Play Play Play Play Play Play Play Play

The Noveltones

Left Bank Two

The Noveltones

Left Bank Two

The Noveltones

Left Bank Two

The Noveltones

Left Bank Two

Individual Track in a Dialog Box with Image

Optional description...

{include file="custom/audio.tpl" num="" mp3="https://www.xcartmods.com/demo/audio/The Noveltones - Left Bank Two.mp3" title="Individual Track in a Dialog Box with Image" descr="Optional description..." download=true dialog=true image="https://randomuser.me/api/portraits/women/{random in=10 out=99}.jpg" border="primary" bg="primary" text="light" icon="music"}

<div class="audio-playlist">
{include file="custom/audio.tpl" num="1" mp3="path/to/file_1.mp3" title="Title 1" descr="Descr 1" download=true playlist=true}
{include file="custom/audio.tpl" num="2" mp3="path/to/file_2.mp3" title="Title 2" descr="Descr 2" download=true playlist=true}
{include file="custom/audio.tpl" num="3" mp3="path/to/file_3.mp3" title="Title 3" descr="Descr 3" download=true playlist=true}
</div>

{include file="custom/widgets/widget_image_gallery.tpl" id="test-gallery-1" folder="uploads/gallery" thumb_width="200" images="8"}

{include file="custom/widgets/widget_portfolio.tpl" br=true}

{include file="custom/widgets/widget_gallery_grid.tpl" br=true}

Example caption Example caption Example caption Example caption Example caption Example caption Example caption Example caption Example caption Example caption Example caption

{include file="custom/widgets/widget_brick_masonry.tpl" br=true}

List based, so more SEO friendly...

Animate any element, including images, as they appear in the viewport.