Dark mode

Installation

Basic tips and quick quide that will help you build your first page.

Introduction

Get started with Reveal Template which is extended version of Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with predefined styles and a template starter page. While this is extended Bootstrap 4 template we avoid to overwrite default utilities or components. If you are already familiar with Bootstrap syntax, you're ready to go. All upgrades with advanced and premium features are explained in following documentation so please use the side menu to navigate the documentation.

Quick install

For quick start copy HTML folder with all subfolders and files for your desired project, so you can use plain HTML, CSS and JS to work around.

Stylesheets

Looking to quickly add Reveal template to your project you need to include all needed CSS files. Make sure that the main stylesheet style.css is the last one, it will apply all predefined components and color sets. Media queries for responsive preview are included!

Code

Copy<!-- Vendor stylesheets -->

<link rel="stylesheet" media="all" href="css/vendor/animate.css" />
<link rel="stylesheet" media="all" href="css/vendor/font-awesome.css" />
<link rel="stylesheet" media="all" href="css/vendor/linear-icons.css" />
<link rel="stylesheet" media="all" href="css/vendor/owl.carousel.css" />
<link rel="stylesheet" media="all" href="css/vendor/jquery.lavalamp.css" />

<!-- Template stylesheets -->

<link rel="stylesheet" media="all" href="css/style.css" />

Javascript

Also for javascript plugins you should include mandatory libraries. Many of our components require the use of JavaScript to function. Specifically, they require jQuery, and JavaScript plugins. Our bootstrap.bundle.js and bootstrap.bundle.min.js includes Popper.js. For more info about popper.js read more on this link.

Code

Copy<!-- Vendor Scripts -->

<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/bootstrap.bundle.js"></script>
<script src="js/vendor/in-view.min.js"></script>
<script src="js/vendor/jquery.lavalamp.js"></script>
<script src="js/vendor/owl.carousel.js"></script>
<script src="js/vendor/rellax.js"></script>
<script src="js/vendor/wow.js"></script>
<script src="js/vendor/tabzy.js"></script>
<script src="js/vendor/isotope.pkgd.js"></script>

<!-- Template Scripts -->

<script src="js/main.js"></script>
<script src="js/custom.js"></script>

Starter template

For building your own template we prepare the starter template code. Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

Code

Copy<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Mobile Web-app fullscreen -->

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Meta tags -->

    <meta name="description" content="Extended Bootstrap 4 Template">
    <meta name="author" content="Goran Hrustic">
    <link rel="icon" href="assets/svg/favicon.ico">

    <!-- Title -->

    <title>Reveal - Demo title</title>

    <!-- Vendor stylesheets -->

    <link rel="stylesheet" media="all" href="css/vendor/animate.css" />
    <link rel="stylesheet" media="all" href="css/vendor/font-awesome.css" />
    <link rel="stylesheet" media="all" href="css/vendor/linear-icons.css" />
    <link rel="stylesheet" media="all" href="css/vendor/owl.carousel.css" />
    <link rel="stylesheet" media="all" href="css/vendor/jquery.lavalamp.css" />

    <!-- Template stylesheets -->

    <link rel="stylesheet" media="all" href="css/style.css" />

    <!--HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries-->
    <!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->

</head>
<body>
    
    <section>
        <div class="container">
            <h1>Hello World</h1>
        </div>
    </section>

    <!-- Vendor Scripts -->

    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/bootstrap.bundle.js"></script>
    <script src="js/vendor/in-view.min.js"></script>
    <script src="js/vendor/jquery.lavalamp.js"></script>
    <script src="js/vendor/owl.carousel.js"></script>
    <script src="js/vendor/rellax.js"></script>
    <script src="js/vendor/wow.js"></script>
    <script src="js/vendor/tabzy.js"></script>
    <script src="js/vendor/isotope.pkgd.js"></script>
    
    <!-- Template Scripts -->

    <script src="js/main.js"></script>
    <script src="js/custom.js"></script>

    </body>
</html>

Working with Gulp

For professionals and frontend Jedi's who want's to speed up development we have optional step to build project with front-end tools and libraries such as Node, Gulp and Handlebars as file generator. Please check developer environment setup.

Build tools

How to get started with developer environment setup. This guide will help you get started with Reveal Template.

Developer environment setup

Reveal is builted with advanced development toolset such as Gulp, Node.js, SCSS, Handlebars.js and Panini.js which provide automate painful or time-consuming tasks in your development workflow.

File structure

For development mode HTML folder is not for editing. It will be distribution folder when you compile and build project from SOURCE code. So every time when you build the project, HTML folder will be deleted, just to be sure there is no conflicts before rendering.

Code

reveal/
|── documentation/
|── html/ 
|   |──── assets/
|   |──── css/
|   |──── js/
|   └──── templates/
└─── source/
|   |──── app/
|   |     |──── data/
|   |     |──── helpers/
|   |     |──── layout/
|   |     |──── pages/
|   |     |──── partials/
|   └──── assets/
|         |──── css/
|         |──── dividers/
|         |──── images/
|         |──── js/
|         |──── scss/
|         |──── svg/
|─── config.json
|─── gulpfile.js
└─── package.json

Node.js

In order to use our build tools you will need to download and install Node.js.

Gulp CLI

After Node is installed you can proceed with Gulp installation. To do that simply run the command below in your terminal. This will install Gulp globally.

Copynpm install gulp-cli -g

Reveal package dependencies

Open Terminal and run "npm install" to install all of Reveal dependencies. New folder node_modules will be created automaticaly.

Copynpm install

Build tools

Now you're ready to start building new pages. It will trigger all predefined tasks. All content for development is located in SOURCE folder. You can adjust templates or styles, and than just run the command to build new HTML project.

Copygulp build

Gulp tasks

For compiling SCSS styles, or render HTML pages separately use following command:

Copy<!--Copy vendor files-->
gulp copy

<!--Compile stylesheets-->
gulp sass

<!--Render HTML templates-->
gulp html

Production ready

Reveal is production ready, which means you can trigger task and bundle all resources, to speed up your website. But first open source/app/data/global.json file and set "production": true, than trigger the task and compile and render project ready for production.

Copygulp build-production

Theming

Theming & dark mode

Introduction

Theming is available only if you use build tools. It's accomplished by SCSS variables, SCSS maps, and custom CSS. There’s no more dedicated stylesheet; instead, you can enable the built-in options to add gradients, shadows, and more.

Important: For using SCSS files without building tools, you need to download Bootstrap manually and map paths in _optional.scss and _required.scss files. Please don't hesitate to ask us anything, we have great support team. For more info please visit out helpdesk.

File structure

If you’ve downloaded our source files you’ll want to manually setup something similar to that structure, keeping Reveal’s source files separate from your own.

Code

reveal/
└─── source/
    └──── assets/
          └──── scss/
                |──── components/
                |──── defaults/
                |──── utilities/
                |──── widgets/
                |──── _components.scss
                |──── _defaults.scss
                |──── _helpers.scss
                |──── _optional.scss
                |──── _required.scss
                |──── _toc.scss
                |──── _utilities.scss
                |──── _widgets.scss
                |──── _variables.scss
                └──── style.scss

Dark mode

Applying dark mode is available through data attribute data-theme="dark". To apply appereance on page set data attribude on <body> tag.

Code

Copy<body data-theme="dark">
    <!--Your page content-->
</body>

Dark mode on specific element

Dark mode can be used on all HTML elements. Be aware that combining elements with dark mode is available only on specific element, which means body tag must not have data attribute with dark mode

Code

Copy<body>
    <section>
        <!--Your content with default theme-->
    </section>
    <section data-theme="dark">
        <!--Your content with dark theme-->
    </section>
</body>

Typography

Documentation and examples for Revel typography, including global settings, headings, body text, lists, and more.

Headings

All HTML headings, <h1> through <h6>, are available.

h1. Revel heading

h2. Revel heading

h3. Revel heading

h4. Revel heading

h5. Revel heading

h6. Revel heading

Code

Copy<h1>h1. Revel heading</h1>
<h2>h2. Revel heading</h2>
<h3>h3. Revel heading</h3>
<h4>h4. Revel heading</h4>
<h5>h5. Revel heading</h5>
<h6>h6. Revel heading</h6>

Lead

Make a paragraph stand out by adding .lead.

Simple paragraph - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Lead paragraph - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Code

Copy<p class="lead">
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Prelabels

Subtitile or prelabel can be used and combined with predefined color variations.

Default state

.pre-label

Theme colors

.pre-label .pre-label-primary

.pre-label .pre-label-secondary

.pre-label .pre-label-success

.pre-label .pre-label-danger

.pre-label .pre-label-warning

.pre-label .pre-label-info

.pre-label .pre-label-dark

.pre-label .pre-label-light

Code

Copy<!--Default state-->
<p class="pre-label">.pre-label</p>

<!--Theme colors-->
<p class="pre-label pre-label-primary">.pre-label .pre-label-primary</p>
<p class="pre-label pre-label-secondary">.pre-label .pre-label-secondary</p>
<p class="pre-label pre-label-success">.pre-label .pre-label-success</p>
<p class="pre-label pre-label-danger">.pre-label .pre-label-danger</p>
<p class="pre-label pre-label-warning">.pre-label .pre-label-warning</p>
<p class="pre-label pre-label-info">.pre-label .pre-label-info</p>
<p class="pre-label pre-label-dark">.pre-label .pre-label-dark</p>
<p class="pre-label pre-label-light">.pre-label .pre-label-light</p>

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style

Display 1

Display 2

Display 3

Display 4

Code

Copy<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Inline text elements

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.

Code

Copy<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

Default

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

Naming a Source

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

Someone famous in Source Title

Code

Copy<!--Default-->
<blockquote class="blockquote">
    <p class="mb-0">Lorem ipsum dolor sit amet...</p>
</blockquote>

<!--Naming a source-->
<blockquote class="blockquote">
    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Blockquote styles

There is an few examples of advanced blockquote styles. Use desired blockquote class for identifying the source

Blockquote flat

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

Someone famous in Source Title

Code

Copy<blockquote class="blockquote-flat">
    <h2 class="mb-0">Lorem ipsum dolor sit amet...</h2>
    <footer class="blockquote-footer">
            Someone... 
            <cite title="Title">Title</cite>
    </footer>
</blockquote>

Blockquote prime

The man who comes back through the door in the wall will never be quite the same as the man who went out.

John Doe

Code

Copy<blockquote class="blockquote-prime">
    <h2 class="mb-0">The man who comes...</h2>
    <div class="text-center">
        <cite title="Source Title">John Doe</cite>
    </div>
</blockquote>

Colors

Theme colors are predefined and it can be combined with any element.

Background colors

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

.bg-primary

.bg-light-primary

.bg-secondary

.bg-light-secondary

.bg-success

.bg-light-success

.bg-danger

.bg-light-danger

.bg-warning

.bg-light-warning

.bg-info

.bg-light-info

.bg-dark

.bg-light-dark

.bg-light

.bg-light-light

.bg-white

Code

Copy<div class="box box-image bg-primary text-white">
    <div class="box-content px-1 text-center">
        <small>.bg-primary</small>
    </div>
</div>

Grays

An expansive set of gray variables and a SCSS map in scss/_variables.scss for consistent shades of gray across your project. Note that these are “cool grays”, which tend towards a subtle blue tone, rather than neutral grays.

.bg-100

.bg-200

.bg-300

.bg-400

.bg-500

.bg-600

.bg-700

.bg-800

.bg-900

All colors

All colors available in Bootstrap 4, are available as SCSS variables and a scss map in scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.

.bg-blue

.bg-indigo

.bg-purple

.bg-pink

.bg-red

.bg-orange

.bg-yellow

.bg-green

.bg-teal

.bg-cyan

Text colors

.text-primary .text-secondary .text-success .text-danger .text-warning .text-info .text-dark .paragprah

.text-muted .text-light .text-white .text-black-50 .text-white-50

Code

Copy<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-dark">.text-dark</p>
<p>.paragprah</p>
<p class="text-muted">.text-muted</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Images

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. More about images can be find on Bootstrap documentation.

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Table scheduler

Hrs	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
06:00	Boot camp Members		Crossfit	Runing Members	Cycling Outdoor	Swimming
07:00	Boot camp Members	Cycling Indoor	Runing Members only		Swimming	Crossfit
08:00	Swimming	Boot camp Members	Runing Members	Cycling Indoor	Swimming	Crossfit
09:00	Crossfit	Runing Members	Swimming	Cycling Indoor	Boot camp Members	Swimming
10:00	Boot camp Single	Swimming	Crossfit Group trainging		Cycling Indoor	Runing Members

Code

Copy<div class="table-responsive">
    <table class="table table-bordered">
        ...
    </table>
</div>

Figures

Documentation and examples for displaying related images and text with the figure component in Reveal.

Dividers

Dividers are decorative elements for styling and it uses SVG's with predefined color classes.

SVG divider colors

Wrap your element with .divider class. Mandatory .svg class will apply default properties, and it can be combined with predefined colors.

.svg-primary

.svg-secondary

.svg-success

.svg-danger

.svg-warning

.svg-info

.svg-light

.svg-white

.svg-dark

Divider flat

Flat

Code

Copy<div class="divider bg-primary">
    <svg class="svg svg-light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="100" viewBox="0 0 1920 100" preserveAspectRatio="none meet">
        <path d="M0,73.808,1920,0V101H0Z" />
    </svg>
</div>

Divider mountain

Mountain

Code

Copy<div class="divider bg-primary">
    <svg class="svg svg-light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="100" viewBox="0 0 1920 100" preserveAspectRatio="none meet">
        <path d="M0,30.074,353.848,54.829l500.921-37.86,307.251,43.685,285.408-43.685L1747.4,78.127,1920,40.267V101H0Z" />
    </svg>
</div>

Divider wave

Wave

Code

Copy<div class="divider bg-primary">
    <svg class="svg svg-light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="100" viewBox="0 0 1920 100" preserveAspectRatio="none meet">
        <path d="M0,59.148s294.145-64.071,963.981,0,963.981-26.211,963.981-26.211L1920,101H0Z" />
    </svg>
</div>

Waves

Divider waves

Code

Copy<div class="divider bg-primary">
    <svg class="svg svg-light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="100" viewBox="0 0 1920 100" preserveAspectRatio="none meet">
        <path d="M0,44.586s231.53-59.752,496.552,11.6c315.988,62.615,560.623-39.316,830.014,0C1601.781,115.889,1920,34.344,1920,34.344V101H0Z" />
    </svg>
</div>

Fancy

Divider fancy

Code

Copy<div class="divider bg-primary">
    <svg class="svg svg-light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="100" viewBox="0 0 1920 100" preserveAspectRatio="none meet">
        <path d="M0,11S168.915,69.242,406.27,70.7,685.853,57.593,850.4,37.207,1259.752,73.448,1517.323,70.7,1920,19.667,1920,19.667V101H0Z" transform="translate(0 -1)" />
        <path d="M1920,102.048s-89.6,137.879-398.308,19.053c-162.379-62.5-391.708,20.855-598.484,20.855-206.775,22.449-295.6-77.886-503.833-39.909C286.864,132.511,0,110.668,0,110.668v62.337H1920Z" transform="translate(0 -73.005)" fill-opacity=".2" />
        <path d="M0,102.147S407.045,189.7,555.574,121.265C717.953,58.549,760.893,69.884,840.982,85.957c188.351,79.39,348.351-56.61,532.351,70.057C1489,91.538,1920,110.8,1920,110.8v62.551H0Z" transform="translate(0 -73.347)" fill-opacity=".4" />
    </svg>
</div>

Color examples

With template colors, you can decorate devider and content for specific cases

Divider class .bg-success

If next element have .bg-dark SVG will have .svg-dark

.bg-dark

Divider class .bg-danger

If next element have .bg-white SVG will have .svg-white

.bg-white

Accordions

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Accordion panel

Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.

Collapsible Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

Collapsible Item #2

Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Item #3

Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.

HTML

Copy<div class="accordion" id="accordion1">
    <!--Item 1-->
    <div class="card card-panel">
        <div class="card-header py-4" id="headingOne2" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
            Collapsible Item #1
        </div>
        <div id="collapseOne1" class="collapse show" aria-labelledby="headingOne1" data-parent="#accordion1">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
    <!--Item 2-->
    <div class="card card-panel">
        <div class="card-header py-4 collapsed" id="headingTwo2" data-toggle="collapse" data-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
            Collapsible Item #2
        </div>
        <div id="collapseTwo1" class="collapse" aria-labelledby="headingTwo1" data-parent="#accordion1">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
    <!--Item 3-->
    <div class="card card-panel">
        <div class="card-header py-4 collapsed" id="headingThree1" data-toggle="collapse" data-target="#collapseThree1" aria-expanded="false" aria-controls="collapseThree1">
            Collapsible Item #3
        </div>
        <div id="collapseThree1" class="collapse" aria-labelledby="headingThree1" data-parent="#accordion1">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
</div>

Accordion box

Accordion box is extended feature. Use image or solid background style for additional options.

First tab item
Another great example

Second tab item
Another great example

Third tab item
Another great example

First tab item
Another great example

Second tab item
Another great example

Third tab item
Another great example

HTML

Copy<div class="accordion br-sm" id="accordion2">
    <!--Item 1-->
    <div class="box box-image" style="background-image:url(placeholder.jpg)">
        <div class="box-content text-white" data-toggle="collapse" data-target="#collapseOne2" aria-expanded="false" aria-controls="collapseOne2">
            <div class="row align-items-center no-gutters">
                <div class="col-auto">
                    <span class="pr-3"><i class="icon icon-star"></i></span>
                </div>
                <div class="col">
                    <strong>First tab item</strong> <br />
                    <span>Another great example</span>
                </div>
            </div>
        </div>
        <div id="collapseOne2" class="collapse" aria-labelledby="headingOne1" data-parent="#accordion2">
            <div class="box-spacer"></div>
            <div class="box-content text-right">
                <a href="#" class="btn btn-outline-light">Read more</a>
            </div>
        </div>
    </div>
    <!--Item 2-->
    <div class="box box-image" style="background-image:url(placeholder.jpg)">
        <div class="box-content text-white" data-toggle="collapse" data-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
            <div class="row align-items-center no-gutters">
                <div class="col-auto">
                    <span class="pr-3"><i class="icon icon-star"></i></span>
                </div>
                <div class="col">
                    <strong>Second tab item</strong> <br />
                    <span>Another great example</span>
                </div>
            </div>
        </div>
        <div id="collapseTwo2" class="collapse" aria-labelledby="headingTwo1" data-parent="#accordion2">
            <div class="box-spacer"></div>
            <div class="box-content text-right">
                <a href="#" class="btn btn-outline-light">Read more</a>
            </div>
        </div>
    </div>
    <!--Item 3-->
    <div class="box box-image" style="background-image:url(placeholder.jpg)">
        <div class="box-content text-white" data-toggle="collapse" data-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
            <div class="row align-items-center no-gutters">
                <div class="col-auto">
                    <span class="pr-3"><i class="icon icon-star"></i></span>
                </div>
                <div class="col">
                    <strong>Third tab item</strong> <br />
                    <span>Another great example</span>
                </div>
            </div>
        </div>
        <div id="collapseThree2" class="collapse" aria-labelledby="headingThree1" data-parent="#accordion2">
            <div class="box-spacer"></div>
            <div class="box-content text-right">
                <a href="#" class="btn btn-outline-light">Read more</a>
            </div>
        </div>
    </div>
</div>

Accordion card

First tab group

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Second tab group

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident

Third tab group

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

HTML

Copy<div class="accordion br-sm" id="accordionExample3">
    <!--Item 2-->
    <div class="card card-fill">
        <div class="card-header card-dim" data-toggle="collapse" data-target="#collapseOne3" aria-expanded="true" aria-controls="collapseOne3">
            First tab group
        </div>
        <div id="collapseOne3" class="collapse show" aria-labelledby="headingOne3" data-parent="#accordionExample3">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
    <!--Item 2-->
    <div class="card card-fill">
        <div class="card-header card-dim" data-toggle="collapse" data-target="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
            Second tab group
        </div>
        <div id="collapseTwo3" class="collapse" aria-labelledby="headingTwo3" data-parent="#accordionExample3">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
    <!--Item 2-->
    <div class="card card-fill">
        <div class="card-header card-dim" data-toggle="collapse" data-target="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3">
            Third tab group
        </div>
        <div id="collapseThree3" class="collapse" aria-labelledby="headingThree3" data-parent="#accordionExample3">
            <div class="card-body">
                ...
            </div>
        </div>
    </div>
</div>

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

First of all, you need to include all needed css files. Make sure that the main style.css is the last one, it will apply all styling visuals. Media queries for responsive preview are included!

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Code

Copy<div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
    A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
    A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
    A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
    A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
    A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
    A simple dark alert—check it out!
</div>

Banners

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Example

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Code

Copy<div class="box box-image br-sm" style="background-image:url(placeholder-wide.jpg)">
    <div class="box-content px-5 text-center text-white">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h1 class="display-4">Hello, world!</h1>
                <p class="lead mb-5">
                    This is a simple hero unit, a simple jumbotron-style component for 
                    calling extra attention to featured content or information.
                </p>
                <a href="#" class="btn btn-primary">Contact us</a>
            </div>
        </div>
    </div>
</div>

Image Parallax

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Explore now

Code

Copy<div class="box box-image box-parallax br-md" style="background-image:url(placeholder-wide.jpg)">
    <div class="box-content px-5 text-center text-white">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h1 class="display-4">Hello, world!</h1>
                <p class="lead mb-5">
                    This is a simple hero unit, a simple jumbotron-style component
                    for calling extra attention to featured content or information.
                </p>
                <a href="#" class="btn btn-outline-light">Explore now</a>
            </div>
        </div>
    </div>
</div>

Call to action

Real deal!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Go!

Code

Copy<div class="box box-image bg-primary text-white p-5 br-lg">
    <div class="row justify-content-between align-items-center text-center text-md-left">
        <div class="col-md-3">
            <h3>Real deal!</h3>
        </div>
        <div class="col-md-6">
            <p class="mb-md-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="col-md-3 text-lg-right">
            <a href="" class="btn btn-rounded btn-outline-light px-5">Go!</a>
        </div>
    </div>
</div>

Boxes

Boxes are modular elements and it can be related with cards, but with different approach and less markup. Just customise any component!

Box animations

All animations are predifined with class name and minor markup changes.

Default hover

Box image

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

Box solid

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

Code

Copy<div class="box box-image box-hover br-sm" style="background-image:url(placeholder.jpg)">
    <div class="box-content px-4 text-white">
        <h4>Box title</h4>
        <p class="mb-0">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
        </p>
    </div>
</div>

Hover drop

Box hover drop

Image example

Box hover drop

Solid color example

Code

Copy<!--Background image example-->
<div class="box box-image box-hover-drop shadow-sm" style="background-image:url(placeholder.jpg)">
    <div class="box-spacer-lg"></div>
    <div class="box-content text-white">
        <h4 class="mb-1">
            <strong class="text-uppercase">Box hover</strong> drop
        </h4>
        <p>Image example</p>
    </div>
</div>

<!--Solid color example-->
<div class="box box-hover-drop bg-danger shadow-sm">
    ...
</div>

Hover slide

Box hover slide

Image example

Box hover slide

Solid example

Code

Copy<div class="box box-image box-hover-slide shadow-sm" style="background-image:url(placeholder.jpg)">
    <div class="box-spacer-lg"></div>
    <div class="box-content p-3">
        <h5 class="mb-1">
            <strong class="text-uppercase">Box hover</strong> slide
        </h5>
        <p class="mb-0">Image example</p>
    </div>
</div>

Hover fall

Box hover fall

Fist paragraph comming

Keep calm and build code

Last paragraph animated

Box hover fall

Fist paragraph comming

Keep calm and build code

Last paragraph animated

Code

Copy<div class="box box-image box-hover-fall" style="background-image:url(placeholder.jpg)">
    <div class="box-spacer-lg"></div>
    <div class="box-content">
        <h3 class="mb-3 text-white"><strong class="text-uppercase">Box hover</strong> fall</h3>
        <p><span>Fist paragraph comming</span></p>
        <p><span>Keep calm and build code</span></p>
        <p><span>Last paragraph animated</span></p>
    </div>
</div>

Hover pull

Box hover pull

HTML

Copy<div class="box box-image box-hover-pull" style="background-image:url(placeholder.jpg)">
    <div class="box-spacer-lg"></div>
    <div class="box-content">
        <header>
            <h3>This is header</h3>
        </header>
        <footer>This is footer</footer>
    </div>
</div>

Box panel

This might be interesting
Another great example

HTML

Copy<div class="box box-image br-sm" style="background-image:url(placeholder.jpg)">
    <div class="box-content text-white">
        <div class="row align-items-center no-gutters">
            <div class="col-auto">
                <span class="pr-3"><i class="icon icon-star h4"></i></span>
            </div>
            <div class="col">
                <strong>This might be interesting</strong> <br />
                <span>Another great example</span>
            </div>
        </div>
    </div>
    <div class="box-spacer"></div>
</div>

Solid colors

.bg-primary

.bg-secondary

.bg-danger

.bg-success

Code

Copy<div class="box box-image br-xs bg-primary text-white">
    <div class="box-content px-5 text-center">
        <small>.bg-primary</small>
    </div>
</div>

Brick masonry

Brick is cascading markup grid layout. It can be combine with masonry javascript library.

Default columns example

Using .card-columns grouping, wrap element with .brick class to achieve desired look. Combine with any component such as boxes, cards, cover or any other.

HTML

Copy<div class="card-columns">
    <div class="card">
        <div class="brick br-sm">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="brick brick-next br-sm">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="brick brick-next br-sm">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="brick br-sm">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="brick br-sm">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="brick brick-next br-sm">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="brick brick-next br-sm">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="brick br-sm">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
</div>

Brick grid massonry

Brick can be applied on Bootstrap grid also. To apply massonry look, use .istp-wrap as a wrapper and .istp as main grid element. For extending component with filters options read more about isotpe filtering.

HTML

Copy<div class="row istp-wrap no-gutters">
    <div class="istp col-6 col-lg-3">
        <div class="brick">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="istp col-6 col-lg-3">
        <div class="brick brick-next">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="istp col-6 col-lg-3">
        <div class="brick">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="istp col-6 col-lg-3">
        <div class="brick brick-next">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="istp col-6 col-lg-3">
        <div class="brick brick-next">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="istp col-6 col-lg-3">
        <div class="brick">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="istp col-6 col-lg-3">
        <div class="brick brick-next">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
    <div class="istp col-6 col-lg-3">
        <div class="brick">
            <div class="brick-content">
                <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
            </div>
        </div>
    </div>
</div>

Buttons

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Buttons variations and options

Buttons have three different variations type. Main button is default, for rounded use .btn-rounded and for circle button use .btn-icon class.

Main button

Large and small

Code

Copy<button type="button" class="btn btn-primary btn-lg">Primary large</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary btn-sm">Primary small</button>

Rounded button

Large and small

Code

Copy<button type="button" class="btn btn-primary btn-rounded btn-lg">Rounded large</button>
<button type="button" class="btn btn-primary btn-rounded">Rounded</button>
<button type="button" class="btn btn-outline-primary btn-rounded btn-sm">Rounded small</button>

Circle button

Large and small

Code

Copy<button type="button" class="btn btn-primary btn-icon btn-lg"><i class="icon icon-star"></i></button>
<button type="button" class="btn btn-primary btn-icon"><i class="icon icon-star"></i></button>
<button type="button" class="btn btn-outline-primary btn-icon btn-sm"><i class="icon icon-arrow-right"></i></button>

Buttons colors

Reveal template includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Code

Copy<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-white">White</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-gray">Gray</button>
<button type="button" class="btn btn-link">Link</button>

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Code

Copy<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-white">White</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-gray">Gray</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-link">Link</button>

Social buttons

Social buttons collection with color scheme are available through extended classes. It can be combined with all features such as scaling, resizing and other variants.

Code

Copy<button type="button" class="btn btn-adn">.btn-adn</button>
<button type="button" class="btn btn-bitbucket">.btn-bitbucket</button>
<button type="button" class="btn btn-dropbox">.btn-dropbox</button>
<button type="button" class="btn btn-facebook">.btn-facebook</button>
<button type="button" class="btn btn-flickr">.btn-flickr</button>
<button type="button" class="btn btn-foursquare">.btn-foursquare</button>
<button type="button" class="btn btn-github">.btn-github</button>
<button type="button" class="btn btn-google">.btn-google</button>
<button type="button" class="btn btn-instagram">.btn-instagram</button>
<button type="button" class="btn btn-linkedin">.btn-linkedin</button>
<button type="button" class="btn btn-microsoft">.btn-microsoft</button>
<button type="button" class="btn btn-odnoklassniki">.btn-odnoklassniki</button>
<button type="button" class="btn btn-openid">.btn-openid</button>
<button type="button" class="btn btn-pinterest">.btn-pinterest</button>
<button type="button" class="btn btn-reddit">.btn-reddit</button>
<button type="button" class="btn btn-soundcloud">.btn-soundcloud</button>
<button type="button" class="btn btn-tumblr">.btn-tumblr</button>
<button type="button" class="btn btn-twitter">.btn-twitter</button>
<button type="button" class="btn btn-vimeo">.btn-vimeo</button>
<button type="button" class="btn btn-vk">.btn-vk</button>
<button type="button" class="btn btn-yahoo">.btn-yahoo</button>

Social buttons with icons

Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!

Code

Copy<button type="button" class="btn btn-icon btn-adn">
    <i class="fa fa-adn"></i>
</button>
<button type="button" class="btn btn-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
</button>
<button type="button" class="btn btn-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
</button>
<button type="button" class="btn btn-icon btn-facebook">
    <i class="fa fa-facebook"></i>
</button>
<button type="button" class="btn btn-icon btn-flickr">
    <i class="fa fa-flickr"></i>
</button>
<button type="button" class="btn btn-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
</button>
<button type="button" class="btn btn-icon btn-github">
    <i class="fa fa-github"></i>
</button>
<button type="button" class="btn btn-icon btn-google">
    <i class="fa fa-google"></i>
</button>
<button type="button" class="btn btn-icon btn-instagram">
    <i class="fa fa-instagram"></i>
</button>
<button type="button" class="btn btn-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
</button>
<button type="button" class="btn btn-icon btn-microsoft">
    <i class="fa fa-windows"></i>
</button>
<button type="button" class="btn btn-icon btn-odnoklassniki">
    <i class="fa fa-odnoklassniki"></i>
</button>
<button type="button" class="btn btn-icon btn-openid">
    <i class="fa fa-openid"></i>
</button>
<button type="button" class="btn btn-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
</button>
<button type="button" class="btn btn-icon btn-reddit">
    <i class="fa fa-reddit"></i>
</button>
<button type="button" class="btn btn-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
</button>
<button type="button" class="btn btn-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
</button>
<button type="button" class="btn btn-icon btn-twitter">
    <i class="fa fa-twitter"></i>
</button>
<button type="button" class="btn btn-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
</button>
<button type="button" class="btn btn-icon btn-vk">
    <i class="fa fa-vk"></i>
</button>
<button type="button" class="btn btn-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
</button>

Buttons animations

Reveal template includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Button slide

Button blink

Code

Copy<!--Button slide-->
<button type="button" class="btn btn-slide btn-slide-primary">Primary</button>
<button type="button" class="btn btn-slide btn-slide-secondary">Secondary</button>
<button type="button" class="btn btn-slide btn-slide-success">Success</button>
<button type="button" class="btn btn-slide btn-slide-danger">Danger</button>
<button type="button" class="btn btn-slide btn-slide-warning">Warning</button>
<button type="button" class="btn btn-slide btn-slide-info">Info</button>
<button type="button" class="btn btn-slide btn-slide-light">Light</button>
<button type="button" class="btn btn-slide btn-slide-dark">Dark</button>

<!--Button blink-->
<button type="button" class="btn btn-blink btn-blink-primary">Primary</button>
<button type="button" class="btn btn-blink btn-blink-secondary">Secondary</button>
<button type="button" class="btn btn-blink btn-blink-success">Success</button>
<button type="button" class="btn btn-blink btn-blink-danger">Danger</button>
<button type="button" class="btn btn-blink btn-blink-warning">Warning</button>
<button type="button" class="btn btn-blink btn-blink-info">Info</button>
<button type="button" class="btn btn-blink btn-blink-light">Light</button>
<button type="button" class="btn btn-blink btn-blink-dark">Dark</button>

Links

Custom links with animations

Link main

Code

Copy<a href="#" class="link link-main link-primary">Link main primary</a>
<a href="#" class="link link-main link-secondary">Link main secondary</a>
<a href="#" class="link link-main link-success">Link main success</a>
<a href="#" class="link link-main link-danger">Link main danger</a>
<a href="#" class="link link-main link-warning">Link main warning</a>
<a href="#" class="link link-main link-info">Link main info</a>
<a href="#" class="link link-main link-light">Link main light</a>
<a href="#" class="link link-main link-dark">Link main dark</a>

Link swipe

Code

Copy<a href="#" class="link link-swipe link-primary">Link swipe primary</a>
<a href="#" class="link link-swipe link-secondary">Link swipe secondary</a>
<a href="#" class="link link-swipe link-success">Link swipe success</a>
<a href="#" class="link link-swipe link-danger">Link swipe danger</a>
<a href="#" class="link link-swipe link-warning">Link swipe warning</a>
<a href="#" class="link link-swipe link-info">Link swipe info</a>
<a href="#" class="link link-swipe link-light">Link swipe light</a>
<a href="#" class="link link-swipe link-dark">Link swipe dark</a>

Link right

Code

Copy<a href="#" class="link link-right link-primary">Link right primary</a>
<a href="#" class="link link-right link-secondary">Link right secondary</a>
<a href="#" class="link link-right link-success">Link right success</a>
<a href="#" class="link link-right link-danger">Link right danger</a>
<a href="#" class="link link-right link-warning">Link right warning</a>
<a href="#" class="link link-right link-info">Link right info</a>
<a href="#" class="link link-right link-light">Link right light</a>
<a href="#" class="link link-right link-dark">Link right dark</a>

Link underline

Link underline primary

Link underline secondary

Link underline success

Link underline danger

Link underline warning

Link underline info

Link underline light

Link underline dark

Code

Copy<a href="#" class="link link-underline link-primary">Link underline primary</a>
<a href="#" class="link link-underline link-secondary">Link underline secondary</a>
<a href="#" class="link link-underline link-success">Link underline success</a>
<a href="#" class="link link-underline link-danger">Link underline danger</a>
<a href="#" class="link link-underline link-warning">Link underline warning</a>
<a href="#" class="link link-underline link-info">Link underline info</a>
<a href="#" class="link link-underline link-light">Link underline light</a>
<a href="#" class="link link-underline link-dark">Link underline dark</a>

Cards

Reveal's extended cards provide a flexible and extensible content container with multiple variants and options. If you need a different approach we have a bit more extended solution try boxes!

Simple card header

Featured

Card title

Some quick example text to build on the card title.

Go somewhere

2 days ago

HTML

Copy<div class="card card-fill text-center">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">2 days ago</div>
</div>

Card stacked

Small card

Some quick example text to build on the card title

HTML

Copy<div class="card card-stacked text-center">
    <div class="card-body">
        <i class="icon-link2 icon-boxed icon-boxed-lg mb-3 bg-blue text-white"></i>
        <h5 class="card-title mb-3">Small card</h5>
        <p class="card-text mb-3">Some quick example text to build on the card title</p>
        <a href="#">Read More</a>
    </div>
</div>

Carousels

A slideshow component for cycling through elements-images or slides of text-like a carousel.

Sizing and positioning

Height options

Adjust slider height with extended classes .owl-small, .owl-large and .owl-fullscreen.

Positioning owl-items

Default position is set to top. Adjust items positioning with .owl-bottom and .owl-center class.

Arrows placement

Arrows can be placed outside, inside or in the middle of slider. Middle is default, .owl-nav-inner & .owl-nav-clean can be used.

Default options

If options are not included defaults will be applied. Use one of these data attributes to overwrite defaults!

data-autoplay="false"

Enable autoplay

data-items="1"

Number of slides

data-nav="false"

Navigation

data-margin="15"

Space between items

data-dots="false"

Pagination

Theming & colors

Adjust colors on carousel with predefined classes. Default color .owl-secondary no need to apply.

Inner arrows

For clean inner style use .owl-nav-clean class

Code

Copy<!--Clean style & Inner arrows position-->
<div class="owl-carousel owl-nav-clean">
    ...
</div>

Inner arrows with color variations

Inner arrows also can be combined with predefined colors

Code

Copy<!--Inner arrows with color theming-->
<div class="owl-carousel owl-nav-inner owl-danger">
    ...
</div>

Color variations

For theming we have seven different color types.

Code

Copy<!--Theme colors-->
<div class="owl-carousel owl-primary">
    ...
</div>
                                                     
<div class="owl-carousel owl-success">
    ...
</div>

<div class="owl-carousel owl-success">
    ...
</div>

<div class="owl-carousel owl-danger">
    ...
</div>

<div class="owl-carousel owl-warning">
    ...
</div>

<div class="owl-carousel owl-info">
    ...
</div>

<div class="owl-carousel owl-dark">
    ...
</div>

<div class="owl-carousel owl-light">
    ...
</div>

Slider with animated captions

Be sure to add animated class on desired element. Data atribute data-start will set animation style. Read more about class name animations here.

Quick brown fox jumped on the street

A slideshow component for cycling through elements

Quick brown fox jumped on the street

A slideshow component for cycling through elements

HTML

Copy<div class="owl-carousel owl-sm" data-nav="true">
    <!--Slide 1-->
    <div class="slide p-5 d-flex align-items-center" style="background-image:url(placeholder.jpg)">
        <div class="w-100 text-center text-white">
            <h4 class="animated" data-start="fadeInDown">Quick brown fox jumped on the street</h4>
            <p class="animated" data-start="fadeInUp">A slideshow component for cycling through elements</p>
        </div>
    </div>
    <!--Slide 2-->
    <div class="slide p-5" style="background-image:url(placeholder.jpg)">
        <div class="w-100 text-white">
            <h4 class="animated" data-start="fadeInDown">Quick brown fox jumped on the street</h4>
            <p class="animated" data-start="fadeInUp">A slideshow component for cycling through elements</p>
        </div>
    </div>
</div>

Cover

Cover element is predefined property is used to specify how and <img> should be resized to fit its container. There are several different options so let's see an examples!

Default preview

Use .cover class to set background image

Cover element

.cover

HTML

Copy<div class="cover" style="background-image:url(placeholder.jpg)">
    <div class="p-6 text-white">
        <h4>Content title</h4>
        <p>Example text</p>
    </div>
</div>

Cover overlay

Cover overlay can be useed as background element which is positioned as absolute element.

To ensure covering object, create element with relative property.

Content box relative

Example text

HTML

Copy<div class="position-relative">
    <div class="cover cover-overlay" style="background-image:url(placeholder.jpg)"></div>
    <div class="p-6 text-white position-relative">
        <h4>Content box relative</h4>
        <p>Example text</p>
    </div>
</div>

Gradient horizontal

We have two states with overlay property .cover-gradient-horizontal and .cover-gradient-vertical. Default horizontal gradient is set from left to right .cover-gradient-horizontal, if you wan't to reverse the state use .over-gradient-horizontal-right class

Horizontal gradeint left to right

.cover-gradient-horizontal

Horizontal gradeint right to left

.cover-gradient-horizontal-right

HTML

Copy<!--Left to right-->
<div class="position-relative bg-black">
    <div class="cover cover-overlay cover-gradient-horizontal" style="background-image:url(placeholder.jpg)"></div>
    <div class="p-6 text-white position-relative">
        <h4>Horizontal gradeint left to right</h4>
        <p>.cover-gradient-horizontal</p>
    </div>
</div>

<!--Right to left-->
<div class="position-relative bg-black">
    <div class="cover cover-overlay cover-gradient-horizontal-right" style="background-image:url(placeholder.jpg)"></div>
    <div class="p-6 text-white position-relative">
        <h4>Horizontal gradeint right to left</h4>
        <p>.cover-gradient-horizontal-right</p>
    </div>
</div>

Gradient vertical

Same thing goes for vertical setup. Default is .cover-gradient-vertical, use .cover-gradient-vertical-bottom class to inverse gradient position

Vertical gradient top to bottom

.cover-gradient-vertical

Vertical gradient bottom to top

.cover-gradient-vertical-bottom

HTML

Copy<!--Top to bottom-->
<div class="position-relative bg-black">
    <div class="cover cover-overlay cover-gradient-vertical" style="background-image:url(placeholder.jpg)"></div>
    <div class="p-6 text-white position-relative">
        <h4>Vertical gradient top to bottom</h4>
        <p>.cover-gradient-vertical</p>
    </div>
</div>

<!--Bottom to top-->
<div class="position-relative bg-black">
    <div class="cover cover-overlay cover-gradient-vertical-bottom" style="background-image:url(placeholder.jpg)"></div>
    <div class="p-6 text-white position-relative">
        <h4>Vertical gradient bottom to top</h4>
        <p>.cover-gradient-vertical-bottom</p>
    </div>
</div>

Adjusting background color

Here is an example how to adjust background color

.bg-primary

.bg-warning

.bg-danger

.bg-info

HTML

Copy<!--bg-primary-->
<div class="position-relative bg-primary">
    <div class="cover cover-overlay cover-gradient-vertical" style="background-image:url(placeholder.jpg)"></div>
    <div class="text-white position-relative">.bg-primary</div>
</div>

<!--bg-warning-->
<div class="position-relative bg-warning">
    <div class="cover cover-overlay cover-gradient-vertical" style="background-image:url(placeholder.jpg)"></div>
    <div class="text-white position-relative">.bg-warning</div>
</div>

<!--bg-danger-->
<div class="position-relative bg-danger">
    <div class="cover cover-overlay cover-gradient-vertical" style="background-image:url(placeholder.jpg)"></div>
    <div class="text-white position-relative">.bg-danger</div>
</div>

<!--bg-info-->
<div class="position-relative bg-info">
    <div class="cover cover-overlay cover-gradient-vertical" style="background-image:url(placeholder.jpg)"></div>
    <div class="text-white position-relative">.bg-info</div>
</div>

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Simple form overview

Here’s a quick example to demonstrate Reveal’s form styles. Keep reading for documentation on required classes, form layout, and more.

Code

Copy<form>
    <div class="form-group">
        <label class="label" for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control form-control-simple" id="exampleInputEmail1" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label class="label" for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control form-control-simple" id="exampleInputPassword1">
    </div>
    <div class="form-group">
        <div class="custom-control custom-checkbox custom-checkbox-primary mb-3">
            <input type="checkbox" class="custom-control-input" id="customExampleCheck" checked>
            <label class="custom-control-label" for="customExampleCheck">Check me out</label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Code

Copy<form>
    <div class="form-group">
        <label class="label" for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label class="label" for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="form-group">
        <div class="custom-control custom-checkbox custom-checkbox-primary mb-3">
            <input type="checkbox" class="custom-control-input" id="customExampleCheck" checked>
            <label class="custom-control-label" for="customExampleCheck">Check me out</label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Theming

Theming changes are controlled throught extended classes.

Simple

Filled large

Flatten no radius

Defaults

Server side

First name

Looks good!

Last name

Looks good!

Username

Please choose a username.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

Checkbox

Each checkbox and radio input and label pairing is wrapped in a div to create our custom control. Structurally, this is the same approach as our default .form-check.

Checkbox

Check this custom checkbox red

Checked custom checkbox

Checkbox buttons

S M L XL

Code

Copy<!--Checkbox-->
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Checkbox</label>
</div>

<!--Checkbox buttons-->
<span class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-primary active">
        <input type="checkbox" checked> S
    </label>
</span>

<span class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-primary active">
        <input type="checkbox"> M
    </label>
</span>

Radio group

Radio button

Toggle this custom radio

Or toggle this other custom radio

Radio button group

Active Radio Radio

Code

Copy<div class="custom-control custom-radio mb-3">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Switches

Toggle this switch element

Disabled switch element

Code

Copy<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

Color variations

Custom checkbox and radio buttons are also adjustable. Use following color class to adjust the preview.

Code

Copy<!--Checkbox primary color example-->
<div class="custom-control custom-checkbox custom-control-primary">
    <input type="checkbox" class="custom-control-input" id="customCheckTheme1" checked>
    <label class="custom-control-label" for="customCheckTheme1">.custom-control-primary</label>
</div>

<!--Radio group primary color example-->
<div class="custom-control custom-radio custom-control-primary">
    <input type="radio" id="customRadioTheme1" name="customRadioTheme" class="custom-control-input" checked>
    <label class="custom-control-label" for="customRadioTheme1">.custom-control-primary</label>
</div>

<div class="custom-control custom-control-primary custom-switch mb-3">
    <input type="checkbox" class="custom-control-input" id="customSwitchTheme1">
    <label class="custom-control-label" for="customSwitchTheme1">.custom-control-primary</label>
</div>

Icons

Reveal includes a library of precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation.

Linear icons

Linearicons is the highest quality set of line icons, matching with minimalist UI designs in iOS. These are example class to apply specific icon, but before that don't forget to include .icon class.

icon-home

icon-apartment

icon-pencil

icon-magic-wand

icon-drop

icon-lighter

icon-poop

icon-sun

icon-moon

icon-cloud

icon-cloud-upload

icon-cloud-download

icon-cloud-sync

icon-cloud-check

icon-database

icon-lock

icon-cog

icon-trash

icon-dice

icon-heart

icon-star

icon-star-half

icon-star-empty

icon-flag

icon-envelope

icon-paperclip

icon-inbox

icon-eye

icon-printer

icon-file-empty

icon-file-add

icon-enter

icon-exit

icon-graduation-hat

icon-license

icon-music-note

icon-film-play

icon-camera-video

icon-camera

icon-picture

icon-book

icon-bookmark

icon-user

icon-users

icon-shirt

icon-store

icon-cart

icon-tag

icon-phone-handset

icon-phone

icon-pushpin

icon-map-marker

icon-map

icon-location

icon-calendar-full

icon-keyboard

icon-spell-check

icon-screen

icon-smartphone

icon-tablet

icon-laptop

icon-laptop-phone

icon-power-switch

icon-bubble

icon-heart-pulse

icon-construction

icon-pie-chart

icon-chart-bars

icon-gift

icon-diamond

icon-linearicons

icon-dinner

icon-coffee-cup

icon-leaf

icon-paw

icon-rocket

icon-briefcase

icon-bus

icon-car

icon-train

icon-bicycle

icon-wheelchair

icon-select

icon-earth

icon-smile

icon-sad

icon-neutral

icon-mustache

icon-alarm

icon-bullhorn

icon-volume-high

icon-volume-medium

icon-volume-low

icon-volume

icon-mic

icon-hourglass

icon-undo

icon-redo

icon-sync

icon-history

icon-clock

icon-download

icon-upload

icon-enter-down

icon-exit-up

icon-bug

icon-code

icon-link

icon-unlink

icon-thumbs-up

icon-thumbs-down

icon-magnifier

icon-cross

icon-menu

icon-list

icon-chevron-up

icon-chevron-down

icon-chevron-left

icon-chevron-right

icon-arrow-up

icon-arrow-down

icon-arrow-left

icon-arrow-right

icon-move

icon-warning

icon-question-circle

icon-menu-circle

icon-checkmark-circle

icon-cross-circle

icon-plus-circle

icon-circle-minus

icon-arrow-up-circle

icon-arrow-down-circle

icon-arrow-left-circle

icon-arrow-right-circle

icon-chevron-up-circle

icon-chevron-down-circle

icon-chevron-left-circle

icon-chevron-right-circle

icon-crop

icon-frame-expand

icon-frame-contract

icon-layers

icon-funnel

icon-text-format

icon-text-format-remove

icon-text-size

icon-bold

icon-italic

icon-underline

icon-strikethrough

icon-highlight

icon-text-align-left

icon-text-align-center

icon-text-align-right

icon-text-align-justify

icon-line-spacing

icon-indent-increase

icon-indent-decrease

icon-pilcrow

icon-direction-ltr

icon-direction-rtl

icon-page-break

icon-sort-alpha-asc

icon-sort-amount-asc

icon-hand

icon-pointer-up

icon-pointer-right

icon-pointer-down

icon-pointer-left

Code

Copy<span class="icon icon-home"></span>

FontAwsome

We included free version the web's most popular icon set and toolkit. Read more about FontAwsome documentation link.

List groups

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Extended lists

With anchor link

Solid color

Solid color .bg-primary .text-white

Solid dark

Solid color .bg-dark .text-white

Code

Copy<!--Clean preview-->

<ul class="list-group list-group-clean">
    <li class="list-group-item active"><a href="#">Cras justo odio</a></li>
    <li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li>
    ...
</ul>

<!--Solid color & white text-->

<div class="bg-primary text-white p-4 mb-4">
    <ul class="list-group list-group-clean">
        <li class="list-group-item active"><a href="#">Cras justo odio</a></li>
        <li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li>
        ...
    </ul>
</div>

Basic example

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed. Read more on Bootstrap documentation.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Code

Copy<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

Flush

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin

How it works

Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

Code

Copy<nav class="navbar navbar-expand-lg navbar-light bg-white px-4">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligne. For more info about native navbar implementation options read more on Bootstrap documentation.

Sidebar

Sidebar is JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

How it works

Toggle a working sidebar demo by clicking the button below. It will slide down and fade in from the top of the page. Use .toggle-show class and data-show="elementName" data attribute to call the sidebar. For multiple sidebars be sure thet each one have different ID - elementName.

Toggle sidebar

Code

Copy<!--Call the sidebar-->

<a href="javascript:void(0);" class="btn btn-primary toggle-show" data-show="sidebar1">Toggle sidebar</a>

<!--Sidebar markup-->

<div class="sidebar" id="sidebar1">
    <div class="sidebar-content">
        <div class="p-3">
            <p>This is the left sidebar!</p>
            <a href="#" class="toggle-show" data-show="sidebar1">Close sidebar</a>
        </div>
    </div>
</div>

Right sidebar

Sidebar position can be controlled with .sidebar-right class. When modals become too long for the user’s viewport or device, they scroll independent of the page itself.

Toggle right sidebar

Code

Copy<!--Call the sidebar-->

<a href="javascript:void(0);" class="btn btn-primary toggle-show" data-show="sidebar2">Toggle right sidebar</a>

<!--Sidebar markup-->

<div class="sidebar sidebar-right" id="sidebar2">
    <div class="sidebar-content">
        <div class="p-3">
            <p>This is the right sidebar!</p>
            <a href="#" class="toggle-show" data-show="sidebar2">Close sidebar</a>

        </div>
    </div>
</div>

Below is a live demo followed by example HTML and JavaScript.

Code

Copy<!--Call the sidebar-->

<a href="javascript:void(0);" class="btn btn-primary toggle-show" data-show="sidebarLogin">Login sidebar</a>

<!--Sidebar markup-->

<div class="sidebar shadow-lg" id="sidebarLogin">
    <div class="sidebar-content sidebar-content-warning">
        <div class="sidebar-header p-3">
            <button type="button" class="close toggle-show" data-show="sidebarLogin" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="d-flex w-100 align-items-center">
            <div class="w-100">
                <div class="p-4 p-lg-5">
                    <div class="mb-5 text-center">
                        <img src="placeholder.jpg" alt="" class="w-50" />
                    </div>
                    <div class="form-group">
                        <label class="label" for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label class="label" for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1">
                    </div>
                    <div class="form-group d-flex justify-content-between">
                        <div class="custom-control custom-control-sm custom-checkbox custom-control-primary">
                            <input type="checkbox" class="custom-control-input" id="customExampleCheck">
                            <label class="custom-control-label" for="customExampleCheck">Remember me</label>
                        </div>
                        <small>
                            <a href="#" class="text-muted">Forgot password?</a>
                        </small>
                    </div>
                    <div class="row justify-content-center pt-3">
                        <div class="col-md-10">
                            <button type="submit" class="btn btn-sm btn-block btn-primary px-5">Login</button>

                            <div class="divider-separator">
                                <span>Or</span>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-sm btn-block btn-google px-3">Login with Google</button>
                                <button type="submit" class="btn btn-sm btn-block btn-facebook px-3">Login with Facebook</button>
                            </div>
                        </div>
                    </div>
                    <div class="text-center">
                        <small>
                            <a href="#" class="text-muted">Don't have an account?</a> <br />
                            <a href="#" class="text-muted">Create an account</a>
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Sidebar mobile

Sidebar can be optional with additional .sidebar-mobile class. Position is fixed on mobile deveices, and default breakpoint is 992px.

Toggle mobile sidebar

Steps

Steps component is custom progress bar featuring support for stacked bars and cart checkout options.

Default stepper

Steps addon can be used as tabs or checkout option. For sizing variations use .steps-sm class.

Code

Copy<div class="steps">
    <ul class="row">
        <li class="col active">
            <a href="#">
                <span class="step-item" data-text="First step">
                    <span>1</span>
                </span>
            </a>
        </li>
        <li class="col current">
            <a href="#">
                <span class="step-item" data-text="Second step">
                    <span>2</span>
                </span>
            </a>
        </li>
        <li class="col">
            <a href="#">
                <span class="step-item" data-text="Third step">
                    <span>3</span>
                </span>
            </a>
        </li>
        <li class="col">
            <a href="#">
                <span class="step-item" data-text="Fourth step">
                    <span>4</span>
                </span>
            </a>
        </li>
    </ul>
</div>

Small stepper

Code

Copy<div class="steps steps-sm">
    ...
</div>

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

Tab default

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.

You probably haven't heard of them jean shorts Austin. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.

Code

Copy<ul class="nav nav-tabs nav-lavalamp" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Tab pills

Code

Copy<ul class="nav nav-pills nav-lavalamp" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Tab box

For center alignment use .justify-content-center, and right alignment .justify-content-end. For full width fill and justify add class .nav-fill

Display inline

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.

You probably haven't heard of them jean shorts Austin. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.

Display justify

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Code

Copy<ul class="nav nav-box nav-inline nav-lavalamp" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Vertical tabs

The tabs plugin also works with vertical alignment. For .nav-tabs add extra class .vertical to apply visual changes.

Home Profile Messages Settings

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet.

Code

Copy<div class="row">
    <div class="col-3">
        <div class="nav flex-column nav-tabs vertical nav-lavalamp" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
            <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
            <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                <p>... </p>
            </div>
            <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                <p>...</p>
            </div>
            <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                <p>...</p>
            </div>
            <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <p>... </p>
            </div>
        </div>
    </div>
</div>

Vertical tab pills

Home Profile Messages Settings

Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet.

Code

Copy<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills nav-lavalamp" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

Theming & colors

Theming is available for tabs also!

Home
Profile
Contact

Home
Profile
Contact

Home
Profile
Contact

Home
Profile
Contact

Home
Profile
Contact

Home
Profile
Contact

Home
Profile
Contact

Home
Profile
Contact

Nav tabs

Nav pills

Isotope filtering

Isotope can hide and show item elements with the filter option. Items that match that filter will be shown. Items that do not match will be hidden.

Grid filtering

Page title

Documentation and examples for common extended utilities, components & plugins.

Defaults

Use flexbox grid to build layouts of all shapes and sizes and extend it with strecher component. Don't forget to add .row-stretcher class! Combine with some of existing component like cards or boxes!

Stretch

Code

Copy<div class="row row-stretcher">
    <div class="col">
        <div class="box bg-primary">
            <div class="box-content text-white">Stretch</div>
            <div class="box-spacer"></div>
        </div>
    </div>
    <div class="col">
        <div class="box bg-secondary">
            <div class="box-content text-white">Stretch</div>
            <div class="box-spacer"></div>
        </div>
    </div>
    <div class="col">
        <div class="box bg-danger">
            <div class="box-content text-white">Stretch</div>
            <div class="box-spacer"></div>
        </div>
    </div>
    <div class="col">
        <div class="box bg-warning">
            <div class="box-content text-white">Stretch</div>
            <div class="box-spacer"></div>
        </div>
    </div>
    <div class="col col-1">
        <div class="box bg-primary">
            <div class="box-content text-white">No</div>
            <div class="box-spacer"></div>
        </div>
    </div>
</div>

Tabzy gallery

Tabzy gallery is nice plugin to change the background image on element hover or click event will create a nice feature for you website.

Default options

If options are not included these defaults will be applied.

data-fullscreen="false"

Fullscreen disabled by default (use true or false)

data-event="hover"

Trigger is hover by default (use click or hover)

About

Reveal by ElaThemes

About Reveal template

Reveal is extended Bootstrap Template which follow latest standards of markup development. You can build unlimited templates and layout variations with just a single stylesheet. With detailed documentation you're copy to go ready. Just find component or widget and copy to your section!

For professionals and frontend Jedi's who want's to speed up development we have optional step to build project with front-end tools and libraries such as Node, Gulp, Handlebars as file generator. Reveal is builted with advanced development toolset such as Gulp, Node.js, SASS, Handlebars.js and Panini.js which provide automate painful or time-consuming tasks in your development workflow.

Credits

Frameworks and library

jQuery plugins

Bootstrap
jQuery
Isotope
InVew
Lavalamp
Owl Carousel
Rellax
Tabzy
Wow

Css Framework

Bootstrap
Animate
Font Awsome
Linear Icons

Images

Unsplash
Pexels
Pixabay
Morguefile

h1. Revel heading

h2. Revel heading

h3. Revel heading

h4. Revel heading

h5. Revel heading

h6. Revel heading

Display 1

Display 2

Display 3

Display 4

Default

Naming a Source

Blockquote flat

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

The man who comes back through the door in the wall will never be quite the same as the man who went out.

Left reveal animation

Right reveal animation

Flat

Mountain

Wave

Divider waves

Divider fancy

Divider class .bg-success

Divider class .bg-danger

Hello, world!

Hello, world!

Real deal!

Default

Box title

Background image

Box title

Solid color

Box title

Default hover

Box image

Box solid

Hover drop

Box hover drop

Box hover drop

Hover slide

Box hover slide

Box hover slide

Hover fall

Box hover fall

Box hover fall

Hover pull

Button slide

Button blink

Link main

Link swipe

Link right

Link underline

Luxury apartment

Card title

Card title

Card title

Small card

Inner arrows

Inner arrows with color variations

Color variations

Quick brown fox jumped on the street

Quick brown fox jumped on the street

Cover element

Content box relative

Horizontal gradeint left to right

Horizontal gradeint right to left

Vertical gradient top to bottom

Vertical gradient bottom to top

Simple

Filled large

Flatten no radius

Defaults

Checkbox

Checkbox buttons

Radio button

Radio button group

Checkbox colors

Radio group colors

Swithces colors

With anchor link