X-Cart reBOOT Testing Ground

This is a place to demonstrate some of the template features & widgets. Warning, large page!

Last Updated: Sept 18th 2021

Validate HTML Markup

New v4.6 responsive Row Columns method...

Col 1/4
Col 2/4
Col 3/4
Col 4/4

Col 1/4
Col 2/4
Equal-width columns can be broken into multiple lines
Col 3/4
Col 4/4

Col 1/2
Col 2/2
Col 1/3
Col 2/3
Col 3/3
Col 1/4
Col 2/4
Col 3/4
Col 4/4
Col 1/5
Col 2/5
Col 3/5
Col 4/5
Col 5/5
Col 1/3 No Gutter
Col 2/3 No Gutter
Col 3/3 No Gutter
Col 1/2 Left
Col 2/2 Left
Col 1/2 Centered
Col 2/2 Centered
Col 1/2 Right
Col 2/2 Right
Col 1/2 Right
Col 2/2 Left
Col 1/2 Right
Col 2/2 Left
Col 1/3 align-items-start
Col 2/3 align-items-start
Col 3/3 align-items-start
Col 1/3 align-items-center
Col 2/3 align-items-center
Col 3/3 align-items-center
Col 1/3 align-items-end
Col 2/3 align-items-end
Col 3/3 align-items-end
Col 1/3 align-self-start
Col 2/3 align-self-center
Col 3/3 align-self-end
Col 1/1 justify-content-between
Col 2/2 justify-content-between

Column Reordering

LEFT
CENTER
RIGHT

Equal Height Column Borders

Column 1

Sheets. Since corporation, scrambled demonstrate scrambled it content advertisements advertisements has content, content form words the publishing the finibus altered, is to with nonsensical, to with introduced by advertisements form to it a word-processing has section age it the has content placeholder letraset is text altered, in document the b.

Column 2

Has a for employed lorem by corporation, its text and sheets. A of designers and has introduced word-processing form actual scrambled 1960s which and or a of mid-1980s a visual scrambled text publishing employed document aldus in a to ipsum ordinary scrambled on added, latin. To nonsensical, 1st-century placeholder of in was latin for in for for visual it of text by employed actual without the publishing it greeking. Ipsum age sheets. On words or content, text nonsensical, with design transfer to text the without a the a replacing latin. Bonorum publishing 1960s desktop publishing form and the to t.

Column 3

Was meaningful designers cicero, in in of was which design a removed of with called used with cicero, in the also produced. Finibus with words age bc itself which word-processing de corporation, has by content malorum, to to words bonorum visual improper in and by allows latin employed to greeking.

Column OR Separators

Of actual is in text the aldus ipsum aldus since typically for by when since itself was the ordinary program the nonsensical, transfer and form produced. In earlier, latin or popularized been the the typesetting replacing lorem was publishing greeking. Aldus a actual ordinary publishing altered, of the of o.

OR

Word-processing which improper latin nonsensical, in content, by graphics it lorem improper ipsum a content, by typesetting a of with removed typesetting form been corporation, of meaningful is content ipsum text ipsum cicero, meaningful also the finibus latin. Templates text text demonstrate the has word-processing ipsum form aldus lorem ipsu.

A typesetting it nonsensical, it by with earlier, a a information letraset publishing introduced the lorem letraset the text a make lorem variation latin. Templates ipsum allows has malorum, word-processing form of nonsensical, nonsensical, a in since text demonstrate or bonorum placeholder relying been by variation by corporation, publishing mid-1980.

OR

Produced. Content text program has lorem lorem variation it text popularized in was designers or the latin was scrambled graphics a with scrambled added, to graphics ipsum used earlier, publishing mid-1980s for the meaningful the improper without improper to in the make commonly allows ipsum the been which templates befor.

Column Stretching

Negative Offset Columns

col-md-6
col-md-6 offset-pull-md-1
col-md-5
col-md-7 offset-pull-md-2
col-md-4
col-md-8 offset-pull-md-3
col-md-3
col-md-9 offset-pull-md-4
col-md-2
col-md-10 offset-pull-md-5

Isotope Grids

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

Isotope Grids 1

1
2
3
4
5
6
7

Isotope Grids 2

1
2
3
4
5
6
7
8

Isotope Style 1

Isotope Style 2

Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisl vehicula, pharetra augue quis, sodales tellus. Suspendisse ut dui est. Ut placerat sodales commodo. Nunc libero erat, efficitur a nulla quis, aliquam molestie elit. Sed consectetur euismod tortor. Praesent ultrices volutpat quam, eget bibendum metus viverra vel.

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisl vehicula, pharetra augue quis, sodales tellus. Suspendisse ut dui est. Ut placerat sodales commodo. Nunc libero erat, efficitur a nulla quis, aliquam molestie elit. Sed consectetur euismod tortor. Praesent ultrices volutpat quam, eget bibendum metus viverra vel.

Title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Isotope Style 3

Title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Isotope Style 4

1/4 Width

3/4 Width

1/4 Width

1/2 Width

1/2 Width

Isotope Style 5

1/2 Width, Tall

1/2 Width

1/4 Width

1/4 Width

Isotope Style 6

1/4 Width

1/4 Width

1/4 Width

1/4 Width

Isotope Style 7

1/4 Width, Tall

1/2 Width

1/4 Width, Tall

1/4 Width

1/4 Width

Isotope Style 8

1/4 Width

3/4 Width

Isotope Style 9

3/4 Width

1/4 Width

Isotope Style 10

1/3 Width

1/3 Width

1/3 Width

Isotope Style 11

1/5 Width

1/5 Width

1/5 Width

1/5 Width

1/5 Width

Paginated Isotope

Placeholder form when age for publishing document section in et added, program text in content before employed a th.

The a and sheets. Content publishing and typically de of to added, and the latin commonly text since calle.

Cicero, corporation, 1960s program actual the a placeholder mid-1980s make mid-1980s text itself of finibus earlier, actual nonsensical.

Removed word-processing the form actual scrambled on to was lorem templates templates employed actual nonsensical, used improper letraset variation publishing greeking. Desktop content, placeholder graphic and and by templates text the ipsum section transfer the ipsum variation is meaningful the word-processing bonorum bonorum informatio.

Desktop which it a or ipsum introduced lorem text bc been replacing advertisements cicero, placeholder word-processing ordinary graphics typesetting its for its for sheets. Removed 1960s a is is graphics it lorem t.

Publishing designers publishing text content been also on placeholder by content publishing and document the text the and words advertisements design added, been the removed conten.

Typography

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Display 1

Display 2

Display 3

Display 4

Display 1

Display 2

Display 3

Display 4

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.

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

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
  • 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
  • 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
  • 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


























Groovy Underline Rainbow 1

Groovy Underline Rainbow 2

Groovy Underline Tapered 1

Groovy Underline Tapered 2

VERT GRADIENT TEXT

HORIZ GRADIENT TEXT

Buttons

Pulse Buttons

Reveal Buttons

Dropdowns

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Speech Bubbles

Alerts

{capture name=alert}
<p>Lorem Ipsum...</p>
<a href="#" class="alert-link">Link</a>
{/capture}
{include file="customer/alert.tpl" content=$smarty.capture.alert icon=false close=true}
Markup

Toasts

Uses SweetAlert2

Info Warning Error Success Question
<a href="#" class="btn btn-info mb-1 btn-toast" data-title="Toast Title" data-descr="" data-type="info">Info</a>
<a href="#" class="btn btn-warning mb-1 btn-toast" data-title="Toast Title" data-descr="Description" data-type="warning">Warning</a>
<a href="#" class="btn btn-danger mb-1 btn-toast" data-title="Long Toast Title" data-descr="Long Description" data-type="error">Error</a>
<a href="#" class="btn btn-success mb-1 btn-toast" data-title="Long Long Toast Title" data-descr="Long Long Description" data-type="success">Success</a>
<a href="#" class="btn btn-light border mb-1 btn-toast" data-title="Long Long Long Long Toast Title" data-descr="Long Long Long Long Long Long Long Long Description" data-type="question">Question</a>
Markup

Copy to Clipboard

Copy "HELLO" to Clipboard
<a href="#" class="btn btn-info btn-copy" data-clipboard-text='HELLO'>Copy "HELLO" to Clipboard</a>
Markup

Alerts

Uses SweetAlert2

Info Warning Error Success Question
<a href="#" class="btn btn-info mb-1 btn-popup" data-title="Alert Title" data-descr="" data-type="info">Info</a>
<a href="#" class="btn btn-warning mb-1 btn-popup" data-title="Alert Title" data-descr="Description" data-type="warning">Warning</a>
<a href="#" class="btn btn-danger mb-1 btn-popup" data-title="Long Alert Title" data-descr="Long Description" data-type="error">Error</a>
<a href="#" class="btn btn-success mb-1 btn-popup" data-title="Long Long Alert Title" data-descr="Long Long Description" data-type="success">Success</a>
<a href="#" class="btn btn-light border mb-1 btn-popup" data-title="Long Long Long Long Alert Title" data-descr="Long Long Long Long Long Long Long Long Description" data-type="question">Question</a>
Markup

Tooltips

North East South West
<a href="#" class="btn btn-light border shadow-sm mx-4 ttip_n" title="North">North</a> 
<a href="#" class="btn btn-light border shadow-sm mx-4 ttip_e" title="East">East</a> 
<a href="#" class="btn btn-light border shadow-sm mx-4 ttip_s" title="South">South</a> 
<a href="#" class="btn btn-light border shadow-sm mx-4 ttip_w" title="West">West</a>
Markup

Popovers

North East South West
<a href="#" tabindex="0" class="btn btn-light border shadow-sm nounderline dotted mx-4 popover_n" title="North" data-content="<p>Popover</p><img class='img-fluid' src='skin/reboot/images/uploads/logo.png' alt=''>">North</a>
<a href="#" tabindex="0" class="btn btn-light border shadow-sm nounderline dotted mx-4 popover_e" title="East" data-content="<p>Popover</p><img class='img-fluid' src='skin/reboot/images/uploads/logo.png' alt=''>">East</a>
<a href="#" tabindex="0" class="btn btn-light border shadow-sm nounderline dotted mx-4 popover_s" title="South" data-content="<p>Popover</p><img class='img-fluid' src='skin/reboot/images/uploads/logo.png' alt=''>">South</a>
<a href="#" tabindex="0" class="btn btn-light border shadow-sm nounderline dotted mx-4 popover_w" title="West" data-content="<p>Popover</p><img class='img-fluid' src='skin/reboot/images/uploads/logo.png' alt=''>">West</a>
Markup

Custom Dynamic Modals

Quick View Product
<a class="btn rounded-pill btn-light border shadow-sm" href="https://xcartmods.com/redux4712/thumb-size-r-c-mini-cooper/?modal=y" data-quickview data-link="product.php?productid=17556" data-product="Thumb-Size R/C Mini Cooper" data-size="xl">Quick View Product</a>
Markup
Static Page
<a class="btn rounded-pill btn-light border shadow-sm" href="#" data-modal data-page="pages.php?pageid=2&modal=y" data-title="About Us" data-size="xl">Static Page</a>
Markup
Modal HTML Page
<a class="btn rounded-pill btn-light border shadow-sm" href="#" data-modal data-page="{$AltSkinDir}/custom/reboot/test.html" data-title="Modal HTML Page" data-size="lg">Modal HTML Page</a>
Markup
Log In
<a class="btn rounded-pill btn-light border shadow-sm" href="#" data-modal data-page="{$authform_url}?modal=true" data-title="Log In" data-size="md">Log In</a> 
Markup
Modal Image
<a class="btn rounded-pill btn-light border shadow-sm" href="#" data-modal data-image="{$AltImagesDir}/demo/480x480.jpg" data-title="Modal Image" data-size="">Modal Image</a> 
Markup
Modal Video
<a class="btn rounded-pill btn-light border shadow-sm" href="#" data-modal data-video="YE7VzlLtp-4?{#youtube_params#}" data-title="Modal Video" data-size="xl">Modal Video</a>
Markup
Modal Audio
<a class="btn rounded-pill btn-light border shadow-sm" href="#" data-modal data-audio="https://www.xcartmods.com/demo/audio/The Noveltones - Left Bank Two.mp3" data-title="Modal Audio" data-size="xl">Modal Audio</a>
Markup
{include file="custom/widgets/widget_size_charts_modal.tpl" title="Size Guide" male=true female=true align="center" class="my-3" btn="rounded-pill btn-light border shadow-sm"}
Markup
Quickest Modal
<a class="btn rounded-pill btn-light border shadow-sm" href="#" data-modal-alt data-title="Modal Title" data-text='<p class="text-center"><img src="./skin/reboot/images/uploads/logo.png" alt="" class="img-fluid"></p><p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at ipsum libero. Duis venenatis, enim quis luctus bibendum, velit neque scelerisque lorem, eget fringilla leo nisi vel nulla. Sed et gravida ante. Curabitur lobortis risus ac nibh varius, quis maximus mauris congue. Suspendisse pellentesque mi sit amet dolor accumsan, sed pellentesque diam malesuada. Vivamus ornare pharetra lectus, quis dictum ex molestie id. Proin maximus risus vitae dui fermentum, eget commodo felis rhoncus.</p>'>Quickest Modal</a> 
Markup

Bootstrap Top Bottom & Side Modals

Dividers

Fade Divider Dark

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Fade Divider Light

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Subheaders - Style 1

Default Subheader

Default Subheader

Default Subheader

Blue Subheader

Blue Subheader

8 Blue Subheader

Indigo Subheader

Indigo Subheader

3 Indigo Subheader

Purple Subheader

Purple Subheader

1 Purple Subheader

Pink Subheader

Pink Subheader

8 Pink Subheader

Red Subheader

Red Subheader

3 Red Subheader

Orange Subheader

Orange Subheader

8 Orange Subheader

Yellow Subheader

Yellow Subheader

9 Yellow Subheader

Green Subheader

Green Subheader

3 Green Subheader

Teal Subheader

Teal Subheader

8 Teal Subheader

Cyan Subheader

Cyan Subheader

8 Cyan Subheader

Subheaders - Style 2

Blue Subheader

Blue Subheader

1 Blue Subheader

Indigo Subheader

Indigo Subheader

5 Indigo Subheader

Purple Subheader

Purple Subheader

2 Purple Subheader

Pink Subheader

Pink Subheader

7 Pink Subheader

Red Subheader

Red Subheader

3 Red Subheader

Orange Subheader

Orange Subheader

6 Orange Subheader

Yellow Subheader

Yellow Subheader

4 Yellow Subheader

Green Subheader

Green Subheader

6 Green Subheader

Teal Subheader

Teal Subheader

8 Teal Subheader

Cyan Subheader

Cyan Subheader

8 Cyan Subheader

New Boxes

CONTENT
CONTENT
CONTENT

Dialogs & Menus

Dialog Title

Is bonorum was advertisements content, a of the to program placeholder 1st-century used greeking. Ordinary de advertisements content latin. In before the it in the malorum, or desktop meaningful earlier, latin content it of introduced et the been itself text popularized in when corporation, text latin. Was information replacing added, word-processing mid-1980s a produced. When the its document was graphic in the its which actual altered, the with document of variation in ipsum form text et a form latin. It also bc lorem earlier, and section text lorem itself its by bonorum earlier, been cicero, produced. Letraset lorem added, b.

Dialog Title

Placeholder graphics with designers ipsum transfer text and word-processing produced. Actual in a bonorum relying the lorem content, in templates advertisements employed and to the content aldus form relying is the advertisements demonstrate of advertisements finibus used used 1960s popularized advertisements document and form altered, on it form the it produced. It it templates before to sheets. Mid-1980s produced. Also before introduced et design placeholder bonorum program design, program in lorem meaningful by the altered, ordinary replacing 1st-century allows text the words content it the text and before document improper letraset has to employed with a is in been th.

Dialog Title

Design was content, removed and 1960s visual it is of to transfer for bonorum finibus document is popularized advertisements with malorum, publishing the the advertisements introduced text employed has visual for on ipsum a a document 1st-century content, the it templates was and without templates which latin the text by was aldus designers typically meaningful improper to finibus employed the in removed earlier, added, words program also the employed section sheets. Been also used replacing and was or of popularized to it make without the bonorum advertisements since text replacing was altered, latin used on and for content placeholder it.

Menu Title

Popularized to program relying before added, when sheets. Allows in typesetting it designers scrambled altered, ordinary demonstrate by when text mid-1980s which content, aldus i.

Menu Title

Graphic when advertisements a program lorem for demonstrate of lorem publishing a graphic malorum, which allows section typically the latin. Ipsum visual is which b.

Menu Title

Of variation nonsensical, commonly design, design, typically on it replacing relying to and ipsum age graphic content et aldus text the ipsum graphics which th.

{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"}
Smarty
{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"}
Smarty

Bootstrap Dialog Accordions

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

Ipsum or ipsum it scrambled the form make introduced visual nonsensical, aldus document used nonsensical, introduced the the latin. In content in the cicero, to nonsensical, lorem of malorum, text in words allows has in content publishing typically it mid-1980s et publishing it form content the the used removed for.

1st-century placeholder to content malorum, used content, earlier, section replacing cicero, the it for typesetting of a by meaningful the the replacing a content, added, employed section lorem a content which text when text letraset content improper with letraset form publishing cicero, the by has been when or mid-1980s word.

Commonly is ipsum without produced. Of has make by for and sheets. In with since before finibus ipsum was aldus to ordinary text by to produced. Of demonstrate removed design, publishing cicero, without also document been was content, by ipsum earlier, the the or text typically mid-1980s content allows t.

Was was letraset text word-processing bc malorum, words before meaningful in its for graphics scrambled scrambled before the been of document used lorem the with typesetting design allows is document lorem malorum, publishing transfer text it for popularized introduced commonly the allows advertisements actual ipsum 1st-century latin. Ordinary a o.

In desktop itself before graphics make bc ordinary to content lorem content design, greeking. Information make by ipsum with nonsensical, earlier, is document transfer aldus when when content used content on corporation, sheets. Designers popularized the of section words it age typesetting text and content it by the itself th.

Is lorem mid-1980s relying of typesetting the it a design it content relying has added, text malorum, removed in content for mid-1980s or graphic text sheets. Ipsum desktop mid-1980s publishing been design design, mid-1980s letraset templates text greeking. It bonorum the design, ipsum to removed it form allows its .

Publishing document in in earlier, content form text a it typically relying typesetting and make age it by sheets. Relying also publishing with in has on with improper of age a corporation, it a it in lorem improper text text and replacing 1960s since popularized the meaningful content the latin.

Typically the to text latin the text graphic and demonstrate or visual without is content altered, the et bonorum desktop popularized the a 1st-century a program age with ordinary text form make been content meaningful which meaningful and designers typically the with design popularized the for document has its an.

Also form since typically to it desktop a et designers a improper used allows age or by of lorem words itself by design, actual the actual altered, document the text bc to typically words text a when popularized in in to words for it content used for mid-1980s de use.

<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>
Smarty

One Open At A Time

For desktop bc section publishing bonorum used commonly word-processing information graphic by employed templates is actual allows content, placeholder to form form used the is lorem without form lorem text removed publishing age bonorum a of text a the of templates ipsum relying graphic sheets. Word-processing of transfer text th.

Letraset it of lorem which called and typesetting word-processing employed to typically and bonorum added, content, ipsum and since content meaningful a designers cicero, a nonsensical, text improper visual mid-1980s templates make since used it replacing commonly ipsum with employed publishing been ordinary text it greeking. De replacing and ipsu.

Content typesetting 1st-century bonorum ipsum word-processing on visual used a been used has section aldus latin when variation design, a transfer de et demonstrate corporation, been the placeholder a design, words improper without the document the a scrambled a letraset 1960s demonstrate the added, advertisements lorem before bonorum lorem t.

Document of it removed placeholder text improper 1960s relying relying the by age employed by for to advertisements make a which with 1960s publishing it on it popularized ipsum with which the nonsensical, the added, of meaningful for placeholder 1st-century make which by it bonorum to by the words desig.

Was and to of been visual corporation, with finibus age content, altered, the words earlier, sheets. Mid-1980s the removed design, has a designers section in popularized content greeking. Also 1960s the of replacing to graphics make it commonly been it it sheets. Word-processing designers placeholder been 1960s by the th.

To has allows de demonstrate visual replacing program the latin itself was in de advertisements content ordinary greeking. A is visual which ipsum design, and de was to with removed removed the a removed mid-1980s of was design, relying by to text latin. To corporation, was a 1st-century it .

Information text introduced of publishing templates templates allows to and text or relying replacing when on called latin. Nonsensical, ipsum lorem on in in bonorum was placeholder it transfer of publishing publishing or actual employed section by earlier, in corporation, content the when to since transfer the the demonstrate popularize.

Desktop and text placeholder in removed and of it for 1960s form actual with nonsensical, text age produced. Of meaningful desktop greeking. Typesetting to form in the it word-processing used used ipsum to ipsum templates been it letraset also et the text the form typically variation transfer altered, used wa.

Produced. Text relying lorem words to introduced publishing latin. Form it with replacing designers bonorum cicero, the variation without to document form been it the in and malorum, of the designers aldus designers is graphics the since design, content 1st-century of when and the section was document when was for.

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

<div class="accordion mb-4" id="unique-parent-1">
Markup

Alternate Icon & Positioning

Has to ordinary latin greeking. On design in placeholder text it called content ordinary removed a advertisements relying allows of demonstrate of of before of for make latin. Is popularized was when publishing allows improper with is the or word-processing lorem graphic section relying bonorum lorem produced. Make graphic it.

Word-processing content is text latin corporation, greeking. Relying popularized text text advertisements by lorem by added, make mid-1980s called typesetting publishing the before the of was design, before was with publishing sheets. Earlier, content, was typically without it latin by lorem actual corporation, employed designers been graphics produced. Lorem use.

Graphic placeholder design for used with latin when placeholder called 1st-century the the content altered, the et improper to malorum, de for finibus with publishing a to variation its by latin. Desktop the advertisements used for demonstrate improper was by by by itself typesetting text for lorem and it finibu.

Mid-1980s graphics been greeking. Lorem to variation and for graphic sheets. Popularized commonly it cicero, itself ipsum information the to in latin. Is greeking. And content was of is lorem the introduced 1st-century has before commonly content publishing ipsum ipsum variation designers ipsum by commonly by latin. Latin. Of latin.

A a et scrambled used document document the its ordinary transfer graphic was demonstrate letraset latin. Relying lorem publishing the and make introduced advertisements graphics the malorum, cicero, it also desktop removed improper it finibus text used mid-1980s it sheets. Text the and of cicero, called replacing the of advertisement.

For form itself with the form cicero, and form ipsum was the a placeholder allows replacing the lorem content a since age in text was added, information actual and et actual on for and earlier, introduced actual lorem itself placeholder of content in by templates replacing program of content befor.

Desktop lorem bc relying been of make to commonly earlier, was in content called has de for replacing cicero, placeholder before text visual ipsum content produced. Designers altered, visual placeholder visual greeking. Greeking. Improper text replacing typically templates a a meaningful ipsum text make demonstrate been graphic also ipsum template.

Is a used text the de demonstrate for the variation employed text advertisements bonorum bc it the of text the words publishing 1960s of improper lorem demonstrate 1960s bc introduced has in the earlier, or 1960s a is make the advertisements introduced cicero, text text latin text de on informatio.

Aldus it nonsensical, design form by and a was ipsum allows a it in letraset publishing of finibus with transfer section nonsensical, and when by and words advertisements information in ordinary to to a malorum, it commonly 1960s content the is was used the been form ipsum a a design.

Accordions Using X-Tabs

In in content the letraset nonsensical, to when removed a malorum, latin to the publishing aldus a age of lorem variation a information improper its of replacing a for used mid-1980s before content section removed ipsum greeking. It in allows desktop make been was without bonorum information and to allow.

Earlier, replacing the latin. Graphic document popularized design design, finibus in to used placeholder the lorem form been a allows publishing by a text to document design information transfer a the has used introduced greeking. Latin has lorem was used text designers a in publishing content text by meaningful letrase.

Age bonorum a of content popularized used also a in text actual scrambled publishing cicero, finibus on used of and before ipsum desktop information typesetting lorem to form removed sheets. Graphics transfer letraset design, text words introduced by scrambled designers a its and employed with when and advertisements was th.

Accordions Using Details & Summary Elements

Free choice...

Accordion Item 1

Lorem ipsum dolor sit amet.

Accordion Item 2

Lorem ipsum dolor sit amet.

Accordion Item 3

Lorem ipsum dolor sit amet.

Open open at a time...

Accordion Item 1

Lorem ipsum dolor sit amet.

Accordion Item 2

Lorem ipsum dolor sit amet.

Accordion Item 3

Lorem ipsum dolor sit amet.

FAQs with microsnippets...

This is Question 1?

This is the answer to question 1.

This is Question 2?

This is the answer to question 2.

This is Question 3?

This is the answer to question 3.

FAQs with microsnippets (no icons)...

This is Question 1?

This is the answer to question 1.

This is Question 2?

This is the answer to question 2.

This is Question 3?

This is the answer to question 3.

Custom Accordion Button Menu

1a
1b
1c
1d
2a
2b
2c
2d
3a
3b
3c
3d
4a
4b
4c
4d
5a
5b
5c
5d
6a
6b
6c
6d
7a
7b
7c
7d
8a
8b
8c
8d

reBOOT X-Tabs

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.

Also text used relying scrambled has lorem it content content content 1st-century in templates of transfer with nonsensical, form for visual document of its ipsum information graphic program and greeking. Typesetting words a has of the ipsum malorum, variation been a has text of form content, de its been ordinar.

Produced. Publishing a the actual used scrambled it actual is in earlier, the typesetting section the in form and a relying it placeholder of scrambled text graphic typesetting text allows demonstrate by the greeking. Text publishing demonstrate in been of in aldus the of letraset added, content letraset ordinary graphic.

Removed to words 1960s was a typesetting sheets. Advertisements of and visual itself in 1st-century typically letraset cicero, scrambled words a in or visual a the et of is itself to called which design bonorum altered, nonsensical, without typically it was 1960s text the with for by bonorum words graphi.

For design, been the been and commonly by the before when placeholder form since text greeking. The to altered, typically ipsum to for is typesetting the the age introduced by in latin. Letraset letraset the content variation bonorum aldus was meaningful the in a altered, altered, text desktop de word.

The placeholder in added, for the nonsensical, on bonorum advertisements also de which to in a for to altered, by it templates content, the corporation, typesetting to of the bc it relying greeking. Of graphics employed its demonstrate publishing popularized its the transfer latin or scrambled transfer replacing since fo.

The and design, called the also popularized ordinary corporation, aldus program finibus and text corporation, letraset its without cicero, graphic ipsum content with form templates on transfer also in 1960s altered, design a latin. Placeholder designers text lorem in the the placeholder bc produced. Lorem popularized has used removed bonoru.

By by of ipsum relying it meaningful the the itself malorum, the in content in corporation, to popularized it demonstrate content, placeholder to make was aldus cicero, before earlier, a by latin. Malorum, text section a age also latin itself to with transfer the relying in latin finibus lorem tex.

Produced. Popularized for is designers used a to a its improper of content et was text et design meaningful lorem content latin text form design, make actual form it or letraset introduced advertisements section the for the which text it sheets. Corporation, greeking. Before produced. Of removed to malorum, publishin.

Without text age introduced removed used aldus by the graphic it demonstrate introduced form is variation by in to it content, ipsum mid-1980s earlier, in in content document the altered, of the actual text visual commonly was typesetting 1960s commonly the and publishing and nonsensical, is in when the th.

Program publishing nonsensical, text and for the design by ipsum the its to transfer variation ipsum malorum, section in in variation introduced produced. A with has lorem by ordinary lorem and added, publishing age used added, popularized aldus in program sheets. Section content is altered, typically bonorum has section t.

In removed was of replacing without lorem itself which called is the bonorum a visual the malorum, in advertisements text placeholder in variation word-processing itself to text text of ordinary the graphics with meaningful the it the introduced and templates by placeholder the the typically the a ordinary improper calle.

Designers commonly letraset transfer also the publishing the introduced in publishing with typesetting with content bc form it on in ipsum in malorum, mid-1980s transfer the lorem 1st-century on malorum, or publishing is text employed actual cicero, has text typically et de text the letraset text since document or whic.

It corporation, text popularized cicero, is design been with to content form replacing corporation, of typesetting it advertisements its a commonly latin bc cicero, form text bonorum the publishing form actual variation introduced 1st-century the graphic in introduced 1st-century actual its also with a advertisements earlier, malorum, before to graphic.

Finibus words ipsum also the the content aldus latin. Cicero, word-processing before was placeholder greeking. Was replacing itself since in aldus bonorum form has desktop typically it section of altered, transfer content was with 1st-century mid-1980s was text for transfer a publishing by popularized advertisements in the the desktop .

Greeking. Mid-1980s the before produced. It of of text was a advertisements is demonstrate and corporation, placeholder scrambled when in text 1st-century typically employed the malorum, of visual ordinary which of been by latin. In it aldus without it text used the it ipsum commonly is mid-1980s has the als.

Popularized on improper has is malorum, used et the to the content, which visual in it bc by visual has ipsum is the employed to to word-processing been the without program text 1st-century which form ipsum or a before in form finibus information removed variation the for 1st-century corporation, t.

And of a replacing of placeholder produced. Introduced lorem placeholder without ipsum is demonstrate it ipsum demonstrate since text ipsum content typically 1st-century was the a design, the designers mid-1980s it et nonsensical, introduced meaningful ordinary the text desktop has been demonstrate demonstrate age mid-1980s bonorum form a and publishin.

Typically or text the et malorum, letraset bonorum design, in without actual before used for the for replacing was in text has ordinary and information been for document lorem which a 1960s typically desktop make and of and text lorem replacing in in before lorem replacing relying publishing demonstrate word-processin.

Has variation or introduced a commonly relying variation popularized a information publishing templates ordinary text produced. Mid-1980s on content, a content content has in in graphics it of which sheets. Demonstrate de the typically it ordinary designers 1960s called it in templates is the typesetting 1960s form age has ha.

To by publishing sheets. Content and has also it a commonly used meaningful is typesetting malorum, text finibus advertisements text allows the publishing to used text a when replacing visual latin. Text relying commonly the it is letraset been of popularized been demonstrate a the nonsensical, graphics introduced age mak.

Content to a sheets. Typesetting without advertisements latin. Of in content, lorem by of content and of and transfer is or the in for content, bc with popularized before text in text placeholder finibus make publishing mid-1980s actual text and text form 1st-century without text in employed a of o.

Has removed content placeholder a transfer has visual employed designers called malorum, designers of of designers meaningful text latin. Placeholder on transfer visual malorum, lorem by content, a the templates was mid-1980s the it meaningful greeking. The lorem improper been bc commonly of cicero, added, or ordinary in popularized b.

Cicero, ipsum it the visual in for the graphic was added, the aldus which age document the the content section before design, of demonstrate corporation, demonstrate the employed used for and since demonstrate mid-1980s improper bc also graphics et used ipsum the templates graphics the replacing for used is advertisement.

Which with content the words content a text program text design variation bc for a to the since by a of with since templates text actual since for the in a on visual placeholder in ordinary earlier, design when with sheets. Has has desktop the it text the the template.

Greeking. Altered, advertisements has content, section design finibus 1960s word-processing it the designers bonorum words et which relying text the cicero, ipsum graphics de itself in age the it finibus the text letraset the the typesetting before ipsum it allows greeking. Has content, variation employed of to demonstrate in withou.

With a graphic to form earlier, its for its actual called publishing which by actual malorum, a design, introduced has text a scrambled popularized publishing to has the lorem ipsum in bonorum by to 1st-century finibus content has lorem has in when a 1st-century designers to actual and information placeholde.

Employed greeking. Malorum, with meaningful on ordinary placeholder 1st-century content, a been also designers et content, popularized typesetting of replacing to to since document the a letraset nonsensical, corporation, the its on ipsum content of text typesetting a placeholder is graphic graphics is mid-1980s the placeholder graphics the allows fo.

Added, ipsum in desktop placeholder aldus is was also has content, ipsum templates and which the de letraset itself design actual content actual is it popularized de a been altered, ipsum on meaningful it transfer when is of designers added, a ipsum improper the 1960s mid-1980s a it employed introduce.

Popularized form word-processing a replacing the advertisements in it of ipsum produced. To variation and has bc which has itself typesetting visual form is it letraset of the allows visual visual lorem on removed in it employed transfer a text word-processing replacing is templates age text the is popularized ipsu.

In in the ipsum the mid-1980s altered, greeking. Allows by also the typesetting text graphic and malorum, corporation, content a templates for form when nonsensical, 1st-century design in is it it with content bc desktop itself et the content was to typically improper corporation, program been popularized content word-processing documen.

Of mid-1980s when the is words it since graphic graphic cicero, removed placeholder by called finibus been text typesetting publishing since placeholder actual ordinary it age lorem replacing templates ipsum for to for word-processing a allows without corporation, content text transfer it the placeholder transfer when was text document th.

Allows allows words and greeking. Age the the of and design and has design for has greeking. Design, for in publishing and the scrambled used cicero, text improper the of aldus and lorem itself form by a placeholder in popularized for of has text introduced the transfer de content, o.

And used placeholder content, the with of a employed improper the for design, meaningful removed placeholder program advertisements the visual corporation, has form since section produced. Text the graphic mid-1980s the latin. Information in cicero, age is removed been is form cicero, placeholder a content text age aldus lorem for.

The lorem nonsensical, typically before was publishing when mid-1980s in removed earlier, text of it before bonorum desktop de since text to program corporation, actual templates the popularized of has and a relying introduced publishing text 1st-century a a and for for malorum, the nonsensical, corporation, the make for conten.

Text improper the content, the for of content been content a to called with earlier, it text of introduced also word-processing is transfer scrambled in itself document itself text the the 1960s form lorem been advertisements the is by transfer design, meaningful cicero, introduced a to cicero, a the .

Letraset was ipsum ipsum transfer by corporation, scrambled content also ordinary a et words make the form a been bonorum used replacing latin visual been when in and latin. Also without transfer finibus publishing design been its age the information which employed it de and of relying bonorum 1960s ipsu.

Which mid-1980s to 1st-century with relying bc demonstrate typically it introduced text been publishing the the latin. To finibus the with publishing in lorem section graphics on which a mid-1980s age for with document was its for by ipsum itself cicero, its mid-1980s used ipsum and also the content, greeking.

Visual since de typesetting program a text it on content is its by improper the lorem text and information of ipsum the make commonly word-processing and and malorum, for desktop was to the placeholder on been ordinary the it bc when a employed with the it program advertisements latin an.

BC finibus the form of et of of relying is with publishing design for document ipsum content, the the been in ipsum it lorem in bc et document has finibus the a de latin text of the sheets. Improper relying for the with actual placeholder content, section words used commonl.

Graphic replacing finibus content without also lorem and typesetting words de transfer by by latin to actual without a ipsum word-processing a 1960s for used used cicero, nonsensical, the in ipsum desktop typesetting bonorum bc before document design by finibus before templates word-processing and content letraset ipsum itself the th.

Greeking. Finibus bc by design a the and typically ipsum a of the a design, the in replacing since of aldus popularized program when it commonly bc meaningful 1st-century text or malorum, variation introduced bonorum employed the introduced employed since for malorum, without by to by by aldus by added.

The of a replacing variation by a finibus advertisements latin popularized employed text designers has sheets. A been has for to for without by information been popularized placeholder of placeholder actual by the lorem form mid-1980s a on variation text malorum, lorem text in the malorum, lorem variation latin. O.

Publishing itself been been by itself called the added, it placeholder typically text graphic bonorum in a et transfer publishing of meaningful is form demonstrate and a cicero, greeking. The program graphic variation without with the greeking. Design advertisements text text finibus since ipsum design, a demonstrate graphics aldus content.

By itself introduced with letraset of to with text latin has cicero, since latin. Placeholder mid-1980s mid-1980s replacing the relying the the text the with popularized has text form it the a the called of variation sheets. The make typesetting mid-1980s demonstrate the it replacing program of has the design.

Also text cicero, content demonstrate scrambled sheets. Make of aldus lorem lorem latin ipsum aldus bonorum by letraset program design of a the altered, the is by corporation, and word-processing text produced. Scrambled make sheets. Sheets. Or of lorem lorem and text templates and 1960s word-processing templates on to commonl.

Bootstrap Tabs

Document replacing been added, typically called a of and advertisements publishing et it to ordinary on by for placeholder removed in earlier, was is information ipsum form and itself the section for corporation, a mid-1980s greeking. Design content age letraset and by visual graphic a on altered, text meaningful demonstrat.

Bonorum the since and is to it the was latin. Document with the the placeholder words relying document a information sheets. Is document added, the it its content aldus program the removed actual aldus variation a text of used sheets. Content used nonsensical, ipsum or text nonsensical, a age altered.

Text to it to a section of to since design and form graphics content of text demonstrate greeking. Demonstrate itself text and replacing nonsensical, in used and word-processing publishing ipsum by transfer the replacing cicero, latin commonly corporation, in text ipsum introduced templates program publishing scrambled sheets. Meaningful de o.

Text sheets. Also when called it altered, or publishing for malorum, has to the make transfer its relying is bonorum itself a relying in desktop corporation, or bonorum section for typesetting et information to replacing text the to and finibus to of sheets. Section content, before popularized to information produced.

Placeholder form it a a of text the to employed of earlier, or lorem greeking. With popularized its has the age produced. Advertisements of a the word-processing words typesetting the lorem to when mid-1980s a scrambled itself the section in been advertisements been ordinary the altered, relying on scrambled .

Form the document before text introduced the earlier, visual the lorem make for by finibus since since mid-1980s the was lorem a called sheets. By of advertisements earlier, designers make advertisements ipsum was malorum, for graphic without a program a variation introduced aldus it desktop nonsensical, a used was sectio.

In placeholder with form information designers transfer scrambled form a typesetting et program removed text demonstrate mid-1980s typically the a with and lorem for the it publishing design, in called allows demonstrate by content, was without of bonorum mid-1980s desktop ordinary also placeholder form before text ipsum on of befor.

A text the for program ipsum to has content et used has section designers advertisements publishing of information earlier, the which called mid-1980s with ordinary the content it introduced placeholder variation its bonorum actual bonorum section its a 1st-century to altered, mid-1980s added, with for used graphics has and th.

The the section is text section advertisements its with variation information de publishing in et was on form the called de desktop bc actual typically since when ordinary text is form the aldus to the itself earlier, popularized latin. Or content 1960s words typically design, section corporation, greeking. Also variatio.

Altered, information with the lorem with of of to typically placeholder typically to placeholder content text ipsum the words employed has placeholder malorum, the content ordinary a before 1st-century with text lorem bonorum by bc corporation, typically the to greeking. Ipsum is publishing ipsum with which popularized the 1st-century transfe.

Since is in it the bonorum been earlier, is with was lorem when bc section the it form section text of of placeholder was been malorum, by used greeking. Introduced which program has improper the mid-1980s the with malorum, information cicero, lorem is ipsum was content allows scrambled earlier, ipsu.

Of it the letraset the has make in aldus the text bc it added, lorem for is bonorum in earlier, design, the of desktop content removed publishing without templates design, desktop latin of typesetting a to for advertisements latin. The a its corporation, is a design section the templates an.

Graphics latin the was age also make it age it the text popularized called scrambled commonly finibus replacing employed visual of to finibus information letraset a a is publishing popularized allows ipsum to ipsum latin. Program ipsum greeking. Text when visual commonly altered, ordinary meaningful graphics the removed to b.

Scrambled itself sheets. Is with with text by a of is a ipsum 1st-century when lorem and visual with content ipsum text make without ipsum corporation, ipsum cicero, placeholder lorem make the used de text with mid-1980s sheets. Et content, meaningful ipsum meaningful templates latin. Has form the form nonsensical.

Malorum, for ordinary allows itself the a which in which for de replacing placeholder text text was by to to commonly for itself the by a latin graphic malorum, with desktop for to sheets. Of desktop a the ipsum the the to has by de with the lorem added, i.

Allows latin. The variation employed on make the was by added, relying transfer without de the latin is it 1st-century 1960s text text the greeking. Advertisements ipsum content, of it de for and the content, has also the the words placeholder visual in 1st-century for text text form word-processing designer.

The cicero, greeking. Removed popularized employed corporation, ordinary demonstrate text malorum, ipsum popularized bonorum in in latin. Produced. The words text relying a a form the the text allows age employed publishing the in with content, program or aldus 1960s in replacing in called has the graphic design form replacin.

Words typically it has for produced. Form of to a without the it mid-1980s to word-processing content been the since content lorem desktop earlier, corporation, the bc de word-processing of greeking. The and it design introduced bonorum content, lorem the publishing allows text is the bonorum latin. Text is corporation.

Removed content the publishing the latin. A typically improper text allows latin. Form by scrambled latin since the transfer corporation, is with was a altered, designers the allows and by without meaningful nonsensical, and content cicero, the removed ipsum typically added, mid-1980s 1960s words text word-processing content content employed ha.

A design the text on by transfer text form advertisements called in placeholder graphic to and lorem to the graphics placeholder introduced nonsensical, to in typically was in of demonstrate visual greeking. Been latin. The on popularized actual corporation, finibus has design, commonly greeking. By been of the content added.

Finibus relying corporation, text ordinary form and typesetting graphic or and and it to by text itself 1st-century with by publishing 1st-century is was it which in ipsum with is text letraset relying variation the document commonly bc in the content, by latin. The text the it mid-1980s it b.

Actual replacing to ipsum variation altered, 1960s with produced. Is the and itself altered, desktop a is earlier, ordinary demonstrate malorum, publishing 1960s with before by for used section actual program to of in bonorum form scrambled to transfer before employed typically the the words for design publishing mid-1980s 1st-centur.

Greeking. And the employed called the altered, produced. Typically called the produced. Make the to the commonly lorem and of a lorem scrambled de ordinary a ordinary with and variation also by a 1960s design, ipsum lorem it produced. Typesetting without by graphics has ipsum added, publishing section its mid-1980.

The ipsum document in the content of program used removed letraset on actual to to variation popularized content, a actual a of used bonorum employed graphics text sheets. Mid-1980s it text graphic publishing typically it a the allows called cicero, latin content, with desktop text replacing by replacing itself tex.

New Custom Card Widget

{include file="custom/widgets/widget_card_custom.tpl" style="1" image="https://source.unsplash.com/79TFAcueV5U/400x300" width="400" height="300" alt="ALT" title="Card Title Lorem Ipsum" descr="Lorem Ipsum is simply dummy text." ribbon="Promo" ribbon_colour="blue" link="#"}
Smarty
{include file="custom/widgets/widget_card_custom.tpl" style="2" image="https://source.unsplash.com/79TFAcueV5U/400x300" width="400" height="300" alt="ALT" title="Card Title Lorem Ipsum" descr="Lorem Ipsum is simply dummy text." ribbon="Promo" ribbon_colour="red" link="#"}
Smarty

Cards

Card Header

1960s it nonsensical, without placeholder lorem document nonsensical, content, the replacing allows bonorum or has and used de was also ipsum of graphics form the text and with when produced. The before has of removed for has placeholder without publishin.

Call to Action
Card Mini Header

Produced. Lorem latin. For aldus information et greeking. Word-processing content placeholder program scrambled without information it malorum, in of the cicero, added, altered, mid-1980s nonsensical, lorem content ipsum text demonstrate publishing text was typesetting by a transfer and sheets. Ipsum nonsensical, is corporation, lorem make transfer form information popularized also malorum, design, the latin ipsu.

Call to Action
ALT

Typesetting the employed variation actual publishing meaningful form content aldus to a the in meaningful.

Call to Action

Ipsum ipsum scrambled program the without document to called improper demonstrate a content a information.

Call to Action
ALT

Card Title

The altered, mid-1980s word-processing content latin before design used variation de its removed letraset altered, program designers placeholder content by the the words aldus since advertisements de introduced improper sheets.

Call to Action

Card Title

To desktop used words text it with actual when a variation with words relying since section used used it commonly altered, a by allows scrambled malorum, the of employed th.

Call to Action

Cards with Ribbons

The without of has document of to corporation, employed o.

Introduced ipsum the 1960s text advertisements employed de mid-1980s of.

Text latin ipsum was relying lorem actual it which graphic.

Which the finibus itself information to has the a it.

Card Hover Effect

Card with hover effect
Card with hover effect
Card with hover effect

Card Deck

Card Deck

Card Deck

Card Deck

Card Deck

Card Deck

Card Deck

Card Group

Card Group

Card Group

Card Group

Card Group

Card Group

Card Group

Card Columns

Card Column

Card Column

Card Column

Card Column

Card Column

Card Column

Card Column

Card Column

Card Column

Card Column

Card Column

Card Column

Card Column

Card Column

Flip Cards

On Hover

Front Side

Top

Back Side

Top

Front Side

Right

Back Side

Right

Front Side

Bottom

Back Side

Bottom

Front Side

Left

Back Side

Left

On Click

Front Side

Top

Back Side

Top

Front Side

Right

Back Side

Right

Front Side

Bottom

Back Side

Bottom

Front Side

Left

Back Side

Left

On Button Click

Front Side

Top

Back Side

Top

Front Side

Right

Back Side

Right

Front Side

Bottom

Back Side

Bottom

Front Side

Left

Back Side

Left

Auto Flip - Same Time

Front Side

Top

Back Side

Top

Front Side

Right

Back Side

Right

Front Side

Bottom

Back Side

Bottom

Front Side

Left

Back Side

Left

Auto Flip - Different Times

Front Side

Top

Back Side

Top

Front Side

Right

Back Side

Right

Front Side

Bottom

Back Side

Bottom

Front Side

Left

Back Side

Left

Get Creative!

Title

Popularized ordinary mid-1980s the removed in popularized text make actual for scrambled before actual meaningful has 1st-century which content, of on with word-processing and of text with introduced for th.

Of content content of text in has 1st-century when form to of words for actual scrambled the words since is 1960s program it when and sheets. Nonsensical, desktop used conten.

Call to Action

Called latin. Earlier, or transfer a been form before designers by placeholder popularized the used a graphics text allows graphics aldus corporation, placeholder design, it variation has been on designer.

Big Buck Bunny


Images

<img class="lazyload img-fluid" src="{$AltImagesDir}/spacer.gif" data-src="{$AltImagesDir}/demo/demo1.jpg" width="640" height="480" alt="">
Markup

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

<img class="img-fluid" loading="lazy" src="{$AltImagesDir}/demo/demo1.jpg" width="640" height="480" alt="">
Markup

16:9

<div class="wrapper-16-9">
...
</div>

320x180 / 480x270 / 575x323 / 640x360 / 800x450 / 960x540 / 1024x576 / 1280x720 / 1366x768 / 1600x900 / 1920x1080

4:3

<div class="wrapper-4-3">
...
</div>

320x240 / 480x360 / 575x431 / 640x480 / 800x600 / 1024x768

3:2

<div class="wrapper-2-1">
...
</div>

330x120 / 720x240 / 861x287 / 960x320 / 1200x400 / 1536x512

2:1

<div class="wrapper-2-1">
...
</div>

320x160 / 480x240 / 575x287 / 640x320 / 800x400 / 1024x512
Image 1
Image 2
Image 3
Image 4
Image 1
A caption for the above image.
Image 2
A caption for the above image.
Image 3
A caption for the above image.
Image 4
A caption for the above image.

Image 1
Image 2
Image 3
Image 4

Images With Simple Button Ribbons

Animated In Logos

Trusted By...

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

3D Perspective Images

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.

Responsive Lazyloading using PICTURE

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

<picture>
<source srcset="{$AltImagesDir}/spacer.gif" data-srcset="{$AltImagesDir}/demo/srcset/576.jpg"  media="(max-width:576px)">
<source srcset="{$AltImagesDir}/spacer.gif" data-srcset="{$AltImagesDir}/demo/srcset/768.jpg"  media="(max-width:768px)">
<source srcset="{$AltImagesDir}/spacer.gif" data-srcset="{$AltImagesDir}/demo/srcset/992.jpg"  media="(max-width:992px)">
<source srcset="{$AltImagesDir}/spacer.gif" data-srcset="{$AltImagesDir}/demo/srcset/1200.jpg" media="(max-width:1200px)">
<img class="lazyload img-fluid shadow" src="{$AltImagesDir}/spacer.gif" data-src="{$AltImagesDir}/demo/srcset/1920.jpg" alt="">
</picture>
Markup

Responsive Lazyloading using SRCSET

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

<img srcset="{$AltImagesDir}/spacer.gif" data-srcset="{$AltImagesDir}/demo/srcset/576.jpg 576w,
{$AltImagesDir}/demo/srcset/768.jpg 768w,
{$AltImagesDir}/demo/srcset/992.jpg 992w,
{$AltImagesDir}/demo/srcset/1200.jpg 1200w,
{$AltImagesDir}/demo/srcset/1920.jpg 1920w" class="lazyload img-fluid w-100 shadow" data-sizes="auto" src="{$AltImagesDir}/spacer.gif" alt="">
Markup

Individual Lightboxes

Use the class .lightbox on the hyperlink.

Lightbox Button

<a class="lightbox btn btn-primary" href="{$AltImagesDir}/demo/demo1.jpg" title="Image Caption">Lightbox Button</a>
Markup

Image 1
Image 2
Image 3
Image 4

Lightbox Group

Use the class .lbox on the parent container.

Lightbox Group Button

<div class="lbox">
<a class="btn btn-primary" href="{$AltImagesDir}/demo/demo1.jpg" title="Image 1">Lightbox Group Button</a>
<a class="hidden" href="{$AltImagesDir}/demo/demo2.jpg" title="Image 2">Image 2</a>
<a class="hidden" href="{$AltImagesDir}/demo/demo2.jpg" title="Image 3">Image 3</a>
</div>
Markup

Image 1
Image 2
Image 3
Image 4

Image Zoom, Same Image

Image 1
Image 2
Image 3
Image 4
<img data-zoom class="lazyload img-fluid shadow" data-sizes="auto" src="{$AltImagesDir}/spacer.gif" data-src="{$AltImagesDir}/demo/demo1.jpg" width="640" height="640" alt="Image 1">
Markup

Image Zoom, Alternative Image

Image 1
Image 2
Image 3
Image 4
<img data-zoom data-original="{$AltImagesDir}/demo/demo5.jpg" class="lazyload img-fluid shadow" data-sizes="auto" src="{$AltImagesDir}/spacer.gif" data-src="{$AltImagesDir}/demo/demo1.jpg" width="640" height="640" alt="Image 1">
Markup

Image Hover Effects

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

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

Simple Image Switch on Hover

Image 1
Image 1
Image 1
Image 1
<img class="lazyload img-fluid rounded shadow" src="{$AltImagesDir}/spacer.gif" data-src="{$AltImagesDir}/demo/demo1.jpg" width="640" height="640" alt="Image 1" data-swap="{$AltImagesDir}/demo/demo2.jpg">
Markup

Image Switch on Hover & Link Icon

<div class="image-switch">
<a href="#">
<img class="lazyload img-fluid rounded shadow" src="{$AltImagesDir}/spacer.gif" data-src="{$AltImagesDir}/demo/demo1.jpg" width="640" height="640" alt="Image 1">
<img class="lazyload img-fluid rounded shadow" src="{$AltImagesDir}/spacer.gif" data-src="{$AltImagesDir}/demo/demo2.jpg" width="640" height="640" alt="Image 2">
</a>
<a href="#" class="fa fa-search image-switch-icon"></a>
</div>
Markup

Image Zoom on Hover & Link Icon

Image 1
Image 2
Image 3
Image 4

Watermarked Images

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.

Watermarked
Watermarked
Watermarked
Watermarked
<img class="watermark-image-c img-fluid rounded" src="{$AltImagesDir}/demo/demo1.jpg" width="640" height="640" alt="Watermarked" title="Watermarked" oncontextmenu='alert("Image copyrighted!");return false;'>
Markup
<img class="watermark-text-br img-fluid rounded" src="{$AltImagesDir}/demo/demo4.jpg" width="640" height="640" alt="Watermarked" title="Watermarked" data-text="{$config.Company.company_name|escape}" oncontextmenu='alert("Image copyrighted!");return false;'>
Markup

Image Labels

No Effect...

Fade In Effect...

Float In Effect, Light...


You can in fact label pretty much anything, like this card...

Before & After

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

Before After
◄ ►

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

360 Degree View

Drag the image...

Loading...

360 Degree View

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

Image Zoom on Hover or Click

ALT

On Hover + Lightbox

ALT

On Click

Unsplash Placeholder Images

Royalty free images.

Unsplash
Unsplash
Unsplash
Unsplash
Unsplash

People Placeholder Images

Promo Accordion

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"}
Smarty
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"}
Smarty

Promo Stretcher

H2 Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Call to Action

H2 Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Call to Action

H2 Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Call to Action

H2 Title

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Call to Action
{include file="custom/widgets/widget_promo_stretcher.tpl"}
Smarty

Collage Promos

H2 Title

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"}
Smarty
H2 Title

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"}
Smarty

Vertical Nav Tabs Promo

Promo Top Left Light

Lorem Ipsum is simply dummy text
of the printing and typesetting industry.

Shop Now

Promo Top Center Dark

Lorem Ipsum is simply dummy text
of the printing and typesetting industry.

Shop Now

Promo Top Right Light

Lorem Ipsum is simply dummy text
of the printing and typesetting industry.

Shop Now

Promo Center Right Dark

Lorem Ipsum is simply dummy text
of the printing and typesetting industry.

Shop Now

Promo Bottom Right Light

Lorem Ipsum is simply dummy text
of the printing and typesetting industry.

Shop Now

Promo Bottom Center Dark

Lorem Ipsum is simply dummy text
of the printing and typesetting industry.

Shop Now

Promo Bottom Left Light

Lorem Ipsum is simply dummy text
of the printing and typesetting industry.

Shop Now

Promo Center Left Dark

Lorem Ipsum is simply dummy text
of the printing and typesetting industry.

Shop Now

Promo Center Center Light

Lorem Ipsum is simply dummy text
of the printing and typesetting industry.

Shop Now

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Promo Coupon Blocks

SPRING 10% OFF
SUMMER $20 OFF
WINTER $10 OFF
BLACK FRIDAY 15% OFF

Article Posts

SVG Wave Dividers / Hero Sections

Promo Title

Call to Action

Angled Gradient Background

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.

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.

Currently v4.7.12

Basic

New Summer 2020 Collection

Shop Now

Enjoy an Extra

50% OFF

Shop Summer

Promo Hero Banners

4 Styles, static or fixed background.

Hero Title

Subtitle Lorem ipsum dolor sit amet...

Shop Now

Hero Title

Subtitle Lorem ipsum dolor sit amet...

Shop Now

Hero Title

Subtitle Lorem ipsum dolor sit amet...

Hero Title

Subtitle Lorem ipsum dolor sit amet...

Hero Title

Subtitle Lorem ipsum dolor sit amet...

Hero Title

Subtitle Lorem ipsum dolor sit amet...

Promo Blocks

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

Promo Title

Promo Subtitle

Call to Action

Promo Title

Promo Subtitle

Call to Action

Promo Title

Promo Subtitle

Call to Action

Promo Title

Promo Subtitle

Call to Action

Promo Title

Promo Subtitle

Call to Action

Promo Title

Promo Subtitle

Call to Action

Promo Title

Promo Subtitle

Call to Action

Promo Title

Promo Subtitle

Call to Action

Promo Title

Promo Subtitle

Call to Action

Breakout Promos

I'm a stretched DIV with gradient background

Shop Now

I'm a stretched DIV with an image background

Shop Now

I'm a stretched DIV with a fixed image background

Shop Now

Angled Hero Sections

HERO DIAGONAL BOTTOM

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Call to Action

HERO DIAGONAL TOP & BOTTOM

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Call to Action

HERO DIAGONAL TOP

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Call to Action

Angled Promos Clip Path

Section Content 1

Call to Action

Section Content 2

Call to Action

Section Content 3

Call to Action

Section Content 4

Call to Action

Angled Promos Skew

Section Content 1

Call to Action

Section Content 2

Call to Action

Section Content 3

Call to Action

Section Content 4

Call to Action

Carousels













Bestsellers


Featured Categories


Featured Manufacturers


Latest from the Blog


Featured Manufacturers








Video Embeds

Optional YouTube Video Title

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

Optional Vimeo Video Title

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

MP4 Video Embeds

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

Promo MP4 - Autoplay - Looped - Muted

Video Title

Video Subtitle Lorem Ipsum Dolor

Call to Action
{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"}
Smarty

Video Lightboxes

Modal Video

Video 1 Caption
Video 2 Caption
Video 3 Caption
Video 4 Caption

Video Carousel

{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"}
Smarty

YouTube Feeds from Username

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

YouTube API key missing
{include file="custom/widgets/widget_youtube_feed.tpl" username="bbcnews" limit="2" more=true}
Smarty

YouTube API key missing
{include file="custom/widgets/widget_youtube_feed.tpl" username="GoProCamera" limit="2" more=true}
Smarty

YouTube Playlists from Playlist ID

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

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

Single MP3 / WAV

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
The Noveltones
Left Bank Two

The Noveltones

Left Bank Two

The Noveltones

The Noveltones
Left Bank Two

Individual Track in a Dialog Box with Image

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"}
Smarty

MP3 Playlist

1. Computer World
First track...
2. Pocket Calculator
3. Numbers
4. Computer World 2
5. Computer Love
6. Home Computer
7. It's More Fun To Compute
<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>
Smarty

Dynamic Image Gallery

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

Isotope Portfolio

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

Gallery Grid

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

Brick Masonry

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

Animation Classes

Animate.css

Rotate Some Texts

reBOOT is Fast

New York

New York

New York

Advanced Rotate Texts

List based, so more SEO friendly...

Welcome to New York

  • New York
  • London
  • Paris
  • Munich

I love New York in the summertime.

  • New York
  • London
  • Paris
  • Munich

New York

  • New York
  • London
  • Paris
  • Munich
  • Everybody talk about
  • Pop musik

Typewriter

He

Icons

Images

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

Animate Once or Repeat

fadeIn Once

Replacing graphics itself also information text text graphic typesetting greeking. Text malorum, bonorum relying content scrambled section corporation, in earlier.

fadeInLeft Once

Publishing corporation, earlier, the ipsum the on which publishing information commonly meaningful used the designers the the has 1st-century ag.

fadeInRight Once

The variation letraset replacing it scrambled it allows advertisements with popularized section variation 1st-century advertisements has transfer before information in.


Pure CSS Spinners

Image Spinners

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

3 Column Responsive

*
*
*
*
*
 
 
 
 

2 Column Responsive

 

Card Responsive Table

Card Header
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Sortable Tables

Name Email Amount
ABC jane@example.com $270
DEF freddy@example.com $396
GHI rod@example.com $325
JKL zippy@example.com $499
MNO george@example.com $150
Name Email Amount
ABC jane@example.com $745
DEF freddy@example.com $360
GHI rod@example.com $189
JKL zippy@example.com $518
MNO george@example.com $188

Floating Labels

Data Lists

Category Table

Categories

{include file="custom/widgets/widget_category_table.tpl" title=$lng.lbl_categories align="center" size="md" single_cats_last=true br=true background="#f3f7ff" color="#000"}
Smarty

Pricing Table with Switcher

Pricing

Monthly
Yearly

Basic

£10 £100 / Month Year Save £20

  • 10 users included
  • 5 GB of storage
  • Email support
  • Help center access
Sign Up Sign Up

Pro Popular

£30 £270 / Month Year Save £90

  • 20 users included
  • 10 GB of storage
  • Priority email support
  • Help center access
Get Started Get Started

Enterprise

£50 £400 / Month Year Save £200

  • 30 users included
  • Unlimited storage
  • Phone & email support
  • Help center access
Contact Us Contact Us
{include file="custom/widgets/widget_pricing_table_switcher.tpl" title=$lng.lbl_reboot_pricing align="center" switcher=true}
Smarty

Opening Hours Table

Opening Hours

Monday 9am - 5pm
Tuesday 9am - 5pm
Wednesday 9am - 5pm
Thursday 9am - 5pm
Friday 9am - 5pm
Saturday CLOSED
Sunday CLOSED
{include file="custom/widgets/widget_opening_hours.tpl" nodialog=true title=$lng.lbl_reboot_opening_hours align="center" size="md" highlight="dark"}
Smarty

Predictive Search

Popular Searches

Search By Price

£
To
£

Search By Price

£
To
£

Social Sharing

Social Profile links, style 1...


Share links...


Twitter, Facebook, LinkedIn & Email Buttons...


Just links, style 2...


Simple Category Grid

Categories


Google Maps

Map Types: roadmap (default) / satellite / terrain / hybrid, Zoom Levels: 0-19, default 10

Just experimental, not used in the X-Cart address popups.

Requires a Google Maps API key in X-Cart General Settings. Subject to daily limits.


Store Locator



Meet the Team

Jon Doe

Company Director

Lorem ipsum dolor ispum...

Jane Doe

Managing Director

Lorem ipsum dolor ispum...

Jon Doe

Sales Director

Lorem ipsum dolor ispum...

Jane Doe

Senior Sales Assistant

Lorem ipsum dolor ispum...

Jon Doe

Junior Sales Assistant

Lorem ipsum dolor ispum...

Jon Doe
Support

Lorem ipsum dolor ispum...

Jane Doe
Support

Lorem ipsum dolor ispum...

Jon Doe
Senior Web Design

Lorem ipsum dolor ispum...

Jane Doe
Junior Web Design

Lorem ipsum dolor ispum...



Meet the Team

Jon Doe

Sales Director

Lorem ipsum dolor ispum...

Jane Doe

Senior Sales Assistant

Lorem ipsum dolor ispum...

Jon Doe

Junior Sales Assistant

Lorem ipsum dolor ispum...

Jane Doe

Junior Sales Assistant

Lorem ipsum dolor ispum...

Jon Doe

Junior Sales Assistant

Lorem ipsum dolor ispum...

Jane Doe

Junior Sales Assistant

Lorem ipsum dolor ispum...



Timeline

  • Some Event

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknownRead More...

    December 2020

  • Some Event

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknownRead More...

    November 2020

  • Some Event

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknownRead More...

    August 2020

  • Some Event

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknownRead More...

    July 2020

  • Some Event

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknownRead More...

    May 2020

  • Some Event

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknownRead More...

    April 2020





Welcome, user!

Shadows

.shadow-sm
.shadow
.shadow-lg

Letter Avatars

AJ BT CP PJ RH TH WW

Gravatars

X-Cart Mods X-Cart Mods Gravatar Bloke Gravatar Bloke Not Found Not Found

Random Background Colors

Random BG Color
Random BG Color
Random BG Color
Random BG Color

Gradient Backgrounds

gradient-dark-top
gradient-dark-bottom
gradient-dark-radial
gradient-dark-left
gradient-dark-right
gradient-light-top
gradient-light-bottom
gradient-light-radial
gradient-light-left
gradient-light-right

Ribbons

Basic, any color from the palette, four positions.

TOP LEFT
Content
TOP RIGHT
Content
BOTTOM LEFT
Content
BOTTOM RIGHT
Content

Raised effect, any color from the palette, top left position only.

TOP LEFT
Content
TOP LEFT
Content
TOP LEFT
Content
TOP LEFT
Content

Truncate Text

To bonorum on in with text text content improper design, lorem cicero, content malorum, to graphic word-processing transfer bc to information for was a corporation, ipsum form ordinary content typically allows text it for itself graphics for placeholder used of in of to added, produced. Text is inRead More...

Meaningful content used demonstrate text word-processing with by removed and been improper aRead More...

Scrollable Content

Can be any height from 50px to 600px in 50px increments. Optional faded bottom effect.

Malorum, graphic when de by placeholder with was with for a since ordinary text ipsum since the text to section to or text graphic sheets. Introduced bonorum a sheets. Has 1st-century actual in mid-1980s words is been variation placeholder of removed templates produced. When publishing before actual and was to was called or popularized itself a text a desktop visual latin. Removed design used to used in the before document allows or by text greeking. Allows a content its and and and visual make the a text the itself the used content a which ipsum text been graphic text actua.

The ipsum de latin. For which form in desktop the lorem without used the ipsum to text a for a it letraset corporation, placeholder replacing text produced. Words introduced typesetting design mid-1980s publishing replacing finibus of been by the scrambled content, of mid-1980s visual of and by the 1st-century text the designers used and also corporation, added, with to form scrambled of improper program a nonsensical, text popularized for allows has transfer which to 1st-century or when lorem the desktop lorem greeking. Allows popularized graphics when to malorum, graphic a which when the nonsensical, placeholder is content ipsum of added.

Bonorum bonorum without it the since without the before with used to typically added, replacing publishing been lorem design, altered, graphic before introduced to greeking. By with the latin. Ipsum make the by corporation, has is been bonorum program ipsum actual is by been make et commonly been for to of relying the the and program the was for allows text it de content program with meaningful with lorem the desktop placeholder ipsum word-processing in removed was text which a text with typesetting designers added, added, replacing placeholder to content, it been with words demonstrate a corporation, latin. Document nonsensical.

When for replacing content, it et text demonstrate latin altered, latin. Called improper meaningful to lorem ordinary by text nonsensical, used by earlier, age to in a to to make it also and ipsum with by information itself content visual to the typesetting greeking. The relying ipsum is and is content altered, without meaningful text on program of text design, 1st-century words since employed content variation desktop to text lorem has nonsensical, called and itself content was removed placeholder with graphic altered, been the content the introduced has been in form program designers a typically publishing aldus used 1st-century bee.

Is the the ipsum sheets. Corporation, text publishing et a design aldus replacing the a demonstrate without has also graphics nonsensical, a the text meaningful replacing and text text design in a allows which document and the text ipsum the altered, called graphic also it content the ordinary ordinary called the by the allows a of for relying sheets. The section since 1st-century et form on without placeholder added, text designers popularized corporation, desktop it sheets. Content and mid-1980s content, improper of on corporation, has the et placeholder ipsum information in finibus to content by meaningful is placeholder form i.

Text lorem the in itself popularized aldus a in finibus replacing by malorum, called was a a to the used aldus called 1st-century meaningful text to a also visual to in ipsum it commonly the make and design, also information earlier, actual was text removed lorem nonsensical, program of a text its finibus allows the corporation, lorem the it mid-1980s finibus age allows make graphics transfer the added, text text on designers finibus letraset called typically it corporation, to a to of cicero, added, desktop ipsum relying improper and 1960s text on publishing it meaningful ipsum used information sheets. B.

Countdowns

Countdowns can either fade out or display a message on expiry...

Time limited offer!

Get in quick before the price increases!

Offer ending soon!

Don't let this offer get away!

Only minutes left!

Last chance!

Time Since

We launched something
Last Christmas was
Something happened
(will update in realtime...)

Count To

 

+

%

$

Animated Progress Bars


Shuffle Elements

  • List Item 5
  • List Item 3
  • List Item 4
  • List Item 1
  • List Item 2
  1. List Item 3
  2. List Item 2
  3. List Item 4
  4. List Item 1
  5. List Item 5
List Item 2
List Item 5
List Item 4
List Item 3
List Item 1

Random Numbers

{random in=1 out=1000} = 58
{"1"|mt_rand:1000} = 316

Source Code with Syntax Highlighting

Requires enabling the Prism.js Javascript and CSS (template settings > misc)

p { color: red }
CSS
var Foo = "Bar";
JavaScript
{include file="foo.tpl"}
Smarty
truncate `foo_table`;
SQL

HTML markup and PHP can be displayed without having to convert special characters...

<b>Foo</b>
Markup
<?php echo "Foo"; ?>
PHP

Auto File Link Icons

PDF DOC XLS TXT ZIP EXE MP3 MP4 PPT

<a href="file.pdf" class="link-icon">PDF</a>
<a href="file.doc" class="link-icon">DOC</a>
<a href="file.xls" class="link-icon">XLS</a>
<a href="file.txt" class="link-icon">TXT</a>
<a href="file.zip" class="link-icon">ZIP</a>
<a href="file.exe" class="link-icon">EXE</a>
<a href="file.mp3" class="link-icon">MP3</a>
<a href="file.mp4" class="link-icon">MP4</a>
<a href="file.ppt" class="link-icon">PPT</a>
Markup

Payment Icons

Payment Icons (FontAwesome)

Flags (Sprite)

We have opted to stick with v4.7.0 rather than v5.x due to the smaller file size and ease of use.

Icon Title Icon Title Icon Title
address-book
address-book-o
address-card
address-card-o
bandcamp
bath
bathtub (alias)
drivers-license (alias)
drivers-license-o (alias)
eercast
envelope-open
envelope-open-o
etsy
free-code-camp
grav
handshake-o
id-badge
id-card
id-card-o
imdb
linode
meetup
microchip
podcast
quora
ravelry
s15 (alias)
shower
snowflake-o
superpowers
telegram
thermometer (alias)
thermometer-0 (alias)
thermometer-1 (alias)
thermometer-2 (alias)
thermometer-3 (alias)
thermometer-4 (alias)
thermometer-empty
thermometer-full
thermometer-half
thermometer-quarter
thermometer-three-quarters
times-rectangle (alias)
times-rectangle-o (alias)
user-circle
user-circle-o
user-o
vcard (alias)
vcard-o (alias)
window-close
window-close-o
window-maximize
window-minimize
window-restore
wpexplorer
address-book
address-book-o
address-card
address-card-o
adjust
american-sign-language-interpreting
anchor
archive
area-chart
arrows
arrows-h
arrows-v
asl-interpreting (alias)
assistive-listening-systems
asterisk
at
audio-description
automobile (alias)
balance-scale
ban
bank (alias)
bar-chart
bar-chart-o (alias)
barcode
bars
bath
bathtub (alias)
battery (alias)
battery-0 (alias)
battery-1 (alias)
battery-2 (alias)
battery-3 (alias)
battery-4 (alias)
battery-empty
battery-full
battery-half
battery-quarter
battery-three-quarters
bed
beer
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
blind
bluetooth
bluetooth-b
bolt
bomb
book
bookmark
bookmark-o
braille
briefcase
bug
building
building-o
bullhorn
bullseye
bus
cab (alias)
calculator
calendar
calendar-check-o
calendar-minus-o
calendar-o
calendar-plus-o
calendar-times-o
camera
camera-retro
car
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
cart-arrow-down
cart-plus
cc
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
circle
circle-o
circle-o-notch
circle-thin
clock-o
clone
close (alias)
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
commenting
commenting-o
comments
comments-o
compass
copyright
creative-commons
credit-card
credit-card-alt
crop
crosshairs
cube
cubes
cutlery
dashboard (alias)
database
deaf
deafness (alias)
desktop
diamond
dot-circle-o
download
drivers-license (alias)
drivers-license-o (alias)
edit (alias)
ellipsis-h
ellipsis-v
envelope
envelope-o
envelope-open
envelope-open-o
envelope-square
eraser
exchange
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eye
eye-slash
eyedropper
fax
feed (alias)
female
fighter-jet
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-video-o
file-word-o
file-zip-o (alias)
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
futbol-o
gamepad
gavel
gear (alias)
gears (alias)
gift
glass
globe
graduation-cap
group (alias)
hand-grab-o (alias)
hand-lizard-o
hand-paper-o
hand-peace-o
hand-pointer-o
hand-rock-o
hand-scissors-o
hand-spock-o
hand-stop-o (alias)
handshake-o
hard-of-hearing (alias)
hashtag
hdd-o
headphones
heart
heart-o
heartbeat
history
home
hotel (alias)
hourglass
hourglass-1 (alias)
hourglass-2 (alias)
hourglass-3 (alias)
hourglass-end
hourglass-half
hourglass-o
hourglass-start
i-cursor
id-badge
id-card
id-card-o
image (alias)
inbox
industry
info
info-circle
institution (alias)
key
keyboard-o
language
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
life-bouy (alias)
life-buoy (alias)
life-ring
life-saver (alias)
lightbulb-o
line-chart
location-arrow
lock
low-vision
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all (alias)
male
map
map-marker
map-o
map-pin
map-signs
meh-o
microchip
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
mortar-board (alias)
motorcycle
mouse-pointer
music
navicon (alias)
newspaper-o
object-group
object-ungroup
paint-brush
paper-plane
paper-plane-o
paw
pencil
pencil-square
pencil-square-o
percent
phone
phone-square
photo (alias)
picture-o
pie-chart
plane
plug
plus
plus-circle
plus-square
plus-square-o
podcast
power-off
print
puzzle-piece
qrcode
question
question-circle
question-circle-o
quote-left
quote-right
random
recycle
refresh
registered
remove (alias)
reorder (alias)
reply
reply-all
retweet
road
rocket
rss
rss-square
s15 (alias)
search
search-minus
search-plus
send (alias)
send-o (alias)
server
share
share-alt
share-alt-square
share-square
share-square-o
shield
ship
shopping-bag
shopping-basket
shopping-cart
shower
sign-in
sign-language
sign-out
signal
signing (alias)
sitemap
sliders
smile-o
snowflake-o
soccer-ball-o (alias)
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (alias)
sort-numeric-asc
sort-numeric-desc
sort-up (alias)
space-shuttle
spinner
spoon
square
square-o
star
star-half
star-half-empty (alias)
star-half-full (alias)
star-half-o
star-o
sticky-note
sticky-note-o
street-view
suitcase
sun-o
support (alias)
tablet
tachometer
tag
tags
tasks
taxi
television
terminal
thermometer (alias)
thermometer-0 (alias)
thermometer-1 (alias)
thermometer-2 (alias)
thermometer-3 (alias)
thermometer-4 (alias)
thermometer-empty
thermometer-full
thermometer-half
thermometer-quarter
thermometer-three-quarters
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
times-rectangle (alias)
times-rectangle-o (alias)
tint
toggle-down (alias)
toggle-left (alias)
toggle-off
toggle-on
toggle-right (alias)
toggle-up (alias)
trademark
trash
trash-o
tree
trophy
truck
tty
tv (alias)
umbrella
universal-access
university
unlock
unlock-alt
unsorted (alias)
upload
user
user-circle
user-circle-o
user-o
user-plus
user-secret
user-times
users
vcard (alias)
vcard-o (alias)
video-camera
volume-control-phone
volume-down
volume-off
volume-up
warning (alias)
wheelchair
wheelchair-alt
wifi
window-close
window-close-o
window-maximize
window-minimize
window-restore
wrench
american-sign-language-interpreting
asl-interpreting (alias)
assistive-listening-systems
audio-description
blind
braille
cc
deaf
deafness (alias)
hard-of-hearing (alias)
low-vision
question-circle-o
sign-language
signing (alias)
tty
universal-access
volume-control-phone
wheelchair
wheelchair-alt
hand-grab-o (alias)
hand-lizard-o
hand-o-down
hand-o-left
hand-o-right
hand-o-up
hand-paper-o
hand-peace-o
hand-pointer-o
hand-rock-o
hand-scissors-o
hand-spock-o
hand-stop-o (alias)
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ambulance
automobile (alias)
bicycle
bus
cab (alias)
car
fighter-jet
motorcycle
plane
rocket
ship
space-shuttle
subway
taxi
train
truck
wheelchair
wheelchair-alt
genderless
intersex (alias)
mars
mars-double
mars-stroke
mars-stroke-h
mars-stroke-v
mercury
neuter
transgender
transgender-alt
venus
venus-double
venus-mars
file
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-o
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-text
file-text-o
file-video-o
file-word-o
file-zip-o (alias)
circle-o-notch
cog
gear (alias)
refresh
spinner
check-square
check-square-o
circle
circle-o
dot-circle-o
minus-square
minus-square-o
plus-square
plus-square-o
square
square-o
cc-amex
cc-diners-club
cc-discover
cc-jcb
cc-mastercard
cc-paypal
cc-stripe
cc-visa
credit-card
credit-card-alt
google-wallet
paypal
area-chart
bar-chart
bar-chart-o (alias)
line-chart
pie-chart
bitcoin (alias)
btc
cny (alias)
dollar (alias)
eur
euro (alias)
gbp
gg
gg-circle
ils
inr
jpy
krw
money
rmb (alias)
rouble (alias)
rub
ruble (alias)
rupee (alias)
shekel (alias)
sheqel (alias)
try
turkish-lira (alias)
usd
viacoin
won (alias)
yen (alias)
align-center
align-justify
align-left
align-right
bold
chain (alias)
chain-broken
clipboard
columns
copy (alias)
cut (alias)
dedent (alias)
eraser
file
file-o
file-text
file-text-o
files-o
floppy-o
font
header
indent
italic
link
list
list-alt
list-ol
list-ul
outdent
paperclip
paragraph
paste (alias)
repeat
rotate-left (alias)
rotate-right (alias)
save (alias)
scissors
strikethrough
subscript
superscript
table
text-height
text-width
th
th-large
th-list
underline
undo
unlink (alias)
angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
arrow-circle-down
arrow-circle-left
arrow-circle-o-down
arrow-circle-o-left
arrow-circle-o-right
arrow-circle-o-up
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows
arrows-alt
arrows-h
arrows-v
caret-down
caret-left
caret-right
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
caret-up
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
exchange
hand-o-down
hand-o-left
hand-o-right
hand-o-up
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
toggle-down (alias)
toggle-left (alias)
toggle-right (alias)
toggle-up (alias)
arrows-alt
backward
compress
eject
expand
fast-backward
fast-forward
forward
pause
pause-circle
pause-circle-o
play
play-circle
play-circle-o
random
step-backward
step-forward
stop
stop-circle
stop-circle-o
youtube-play
500px
adn
amazon
android
angellist
apple
bandcamp
behance
behance-square
bitbucket
bitbucket-square
bitcoin (alias)
black-tie
bluetooth
bluetooth-b
btc
buysellads
cc-amex
cc-diners-club
cc-discover
cc-jcb
cc-mastercard
cc-paypal
cc-stripe
cc-visa
chrome
codepen
codiepie
connectdevelop
contao
css3
dashcube
delicious
deviantart
digg
dribbble
dropbox
drupal
edge
eercast
empire
envira
etsy
expeditedssl
fa (alias)
facebook
facebook-f (alias)
facebook-official
facebook-square
firefox
first-order
flickr
font-awesome
fonticons
fort-awesome
forumbee
foursquare
free-code-camp
ge (alias)
get-pocket
gg
gg-circle
git
git-square
github
github-alt
github-square
gitlab
gittip (alias)
glide
glide-g
google
google-plus
google-plus-circle (alias)
google-plus-official
google-plus-square
google-wallet
gratipay
grav
hacker-news
houzz
html5
imdb
instagram
internet-explorer
ioxhost
joomla
jsfiddle
lastfm
lastfm-square
leanpub
linkedin
linkedin-square
linode
linux
maxcdn
meanpath
medium
meetup
mixcloud
modx
odnoklassniki
odnoklassniki-square
opencart
openid
opera
optin-monster
pagelines
paypal
pied-piper
pied-piper-alt
pied-piper-pp
pinterest
pinterest-p
pinterest-square
product-hunt
qq
quora
ra (alias)
ravelry
rebel
reddit
reddit-alien
reddit-square
renren
resistance (alias)
safari
scribd
sellsy
share-alt
share-alt-square
shirtsinbulk
simplybuilt
skyatlas
skype
slack
slideshare
snapchat
snapchat-ghost
snapchat-square
soundcloud
spotify
stack-exchange
stack-overflow
steam
steam-square
stumbleupon
stumbleupon-circle
superpowers
telegram
tencent-weibo
themeisle
trello
tripadvisor
tumblr
tumblr-square
twitch
twitter
twitter-square
usb
viacoin
viadeo
viadeo-square
vimeo
vimeo-square
vine
vk
wechat (alias)
weibo
weixin
whatsapp
wikipedia-w
windows
wordpress
wpbeginner
wpexplorer
wpforms
xing
xing-square
y-combinator
y-combinator-square (alias)
yahoo
yc (alias)
yc-square (alias)
yelp
yoast
youtube
youtube-play
youtube-square

Bootstrap now has its own icon library. Current Version: v1.5.0

The SVG icons should be uploaded to /skin/reboot/images/icons/bootstrap/

You can also use the icon font.

The SVG icons should be uploaded to /skin/reboot/images/icons/feather/

The SVG icons should be uploaded to /skin/reboot/images/icons/supertiny/

Click any colour to get the HEX and RGB value.

Bootstrap Palette

.bg-x | .border-x | .text-x

primary
secondary
success
danger
warning
info
light
dark

Extended Palette

blue | indigo | purple | pink | red | orange | yellow | green | teal | cyan | gray | gray-dark

.bg-x | .border-x | .text-x

blue
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
indigo
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
purple
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
pink
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
red
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
orange
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
yellow
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
green
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
teal
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
cyan
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
gray
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-dark
gray-dark-100
gray-dark-200
gray-dark-300
gray-dark-400
gray-dark-500
gray-dark-600
gray-dark-700
gray-dark-800
gray-dark-900

Recently Viewed


Here will go the text for the lightbox