Elements


Table of Content

Having a table of content in above of a page never has been so easy to creat. Just include each topic in an ol tag and add .toc class to it; theDocs will take care of other parts!

Check the following example…


<ol class="toc">
  <li>
    <a href="#">First topic</a>
    <ol>
      <li><a href="#">Sub topic</a></li>
      <li>
        <a href="#">Sub topic</a>
        <ol>
          <li><a href="#">Sub-sub topic</a></li>
          <li><a href="#">Sub-sub topic</a></li>
        </ol>
      </li>
      <li><a href="#">Sub topic</a></li>
    </ol>
  </li>
  <li><a href="#">Second topic</a></li>
  <li><a href="#">Third topic</a></li>
  <li><a href="#">Fourth topic</a></li>
</ol>

Code view

One of the most frequently used component of each documentation, is display a preview for a code snippet and describing it. In this page we will show different code view components of theDocs.

  1. Simple code blocks

    1. Inline
    2. Basic block
    3. User input
    4. Variables
    5. Sample output
  2. Syntax highlighter

    1. Supported languages
  3. Code wrappers

    1. Code window
    2. Code snippet

Simple code blocks

Here is basic usage of tags like code, pre, kbd, var and samp.

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

Sample text here...

<pre>Sample text here...</pre>

You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Variables

For indicating variables use the <var> tag.

y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output

For indicating blocks sample output from a program use the <samp> tag.

This text is meant to be treated as sample output from a computer program.
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Syntax highlighter

theDocs uses PrismJs to syntax highlight code snippets. You have to put your code inside <pre><code class="language-xxxx"> which xxxx is the name of language.


<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

If you need to include line numbers, add class .line-numbers to the <pre> tag.


<p>Something to show in <strong>bold</strong> text.</p>
...
<i>Italic text</i>

Supported languages

This is the list of all languages currently supported by Prism, with their corresponding alias, to use in place of xxxx in the language-xxxx class:

  • HTML/XML markup
  • CSS css
  • C-like clike
  • JavaScript javascript
  • ActionScript actionscript
  • ASP.NET (C#) aspnet
  • Bash bash
  • BASIC basic
  • C c
  • C# csharp
  • C++ cpp
  • CoffeeScript coffeescript
  • F# fsharp
  • Git git
  • Go go
  • Groovy groovy
  • Haml haml
  • Haskell haskell
  • HTTP http
  • Ini ini
  • Jade jade
  • Java java
  • JSON json
  • LaTeX latex
  • Less less
  • Makefile makefile
  • Markdown markdown
  • MATLAB matlab
  • Objective-C objectivec
  • Pascal pascal
  • Perl perl
  • PHP php
  • Prolog prolog
  • Python python
  • R r
  • React JSX jsx
  • Ruby ruby
  • Sass (Sass) sass
  • Sass (Scss) scss
  • Scalascala
  • SQL sql
  • Swift swift
  • TypeScript typescript
  • Wiki markup wiki
  • YAML yaml

Line highlight

You specify the lines to be highlighted through the data-line attribute on the <pre> element, in the following simple format:

  • A single number refers to the line with that number
  • Ranges are denoted by two numbers, separated with a hyphen (-)
  • Multiple line numbers or ranges are separated by commas.
  • Whitespace is allowed anywhere and will be stripped off.

Examples:

  • data-line="5" The 5th line
  • data-line="1-5" Lines 1 through 5
  • data-line="1,4" Line 1 and line 4
  • data-line="1-2, 5, 9-20" Lines 1 through 2, line 5, lines 9 through 20

You can also link to specific lines on any code snippet, by using the following as a url hash: #{element-id}.{lines} where {element-id} is the id of the <pre> element and {lines} is one or more lines or line ranges that follow the format outlined above. For example, if there is an element with id="highlighter" on the page, you can link to lines 7-8 by linking to #highlighter.7-8


<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

Code wrappers

If your code snippet includes several languages or a preview of result, it’s better to use one of the following code wrappers.

Code window

Wrap your code and preview inside <div class="code-window">...</div> to show them in a window style with different tabs. In this way, reader can see one code snippet in a same time.

This is a normal paragraph without any contextual classes.

A paragraph with .text-primary class.

A paragraph with .text-success class.

A paragraph with .text-info class.

A paragraph with .text-warning class.

A paragraph with .text-danger class.

A paragraph with .text-purple class.

A paragraph with .text-teal class.

A paragraph with .text-gray class.

A paragraph with .text-dark class.


<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }

$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});

Here is the code which we used to draw above code window:


<div class="code-window">
  <div class="code-preview">...</div>
  <pre class="line-numbers"><code class="language-markup">...</code></pre>
  <pre class="line-numbers"><code class="language-css">...</code></pre>
  <pre class="line-numbers"><code class="language-javascript">...</code></pre>
</div>

Code tabs

Wrap your code and preview inside <div class="code-tabs">...</div> to show them in a horizontal tab style.

This is a normal paragraph without any contextual classes.

A paragraph with .text-primary class.

A paragraph with .text-success class.

A paragraph with .text-info class.

A paragraph with .text-warning class.

A paragraph with .text-danger class.

A paragraph with .text-purple class.

A paragraph with .text-teal class.

A paragraph with .text-gray class.

A paragraph with .text-dark class.


<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }

$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});

Here is the code which we used to draw above code tabs:


<div class="code-tabs">
  <div class="code-preview">...</div>
  <pre class="line-numbers"><code class="language-markup">...</code></pre>
  <pre class="line-numbers"><code class="language-css">...</code></pre>
  <pre class="line-numbers"><code class="language-javascript">...</code></pre>
</div>

Code snippet

Wrap your code and preview inside <div class="code-snippet">...</div> to show them in a vertical style. Use this style to show all of the codes in a same view.

This is a normal paragraph without any contextual classes.

A paragraph with .text-primary class.

A paragraph with .text-success class.

A paragraph with .text-info class.

A paragraph with .text-warning class.

A paragraph with .text-danger class.

A paragraph with .text-purple class.

A paragraph with .text-teal class.

A paragraph with .text-gray class.

A paragraph with .text-dark class.


<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-purple">A paragraph with .text-purple class.</p>
<p class="text-teal">A paragraph with .text-teal class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>

.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }

$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});

Here is the code which we used to draw above code snippet:


<div class="code-snippet">
  <div class="code-preview">...</div>
  <pre class="line-numbers"><code class="language-markup">...</code></pre>
  <pre class="line-numbers"><code class="language-css">...</code></pre>
  <pre class="line-numbers"><code class="language-javascript">...</code></pre>
</div>

As you can see, switching between three wrapper types is only by changing classes between .code-window, .code-snippet and .code-tabs.

Views

Views are another way to display several related information together. Mostly you can use them to list the articles which is available in your documentation. Choose the layout that suits the type of content you’re displaying.

  1. List view
  2. Grid view
  3. Categorized view

List view

In this way, you can show meta data below the title, and write some description of the article before viewing it.

  • Get Going Fast

    A quick-start guide to all the basics you need to get up and running now. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.

  • Get a Homepage

    Learn how to turn that blog into a static website for your business or your organization. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.

  • Get Lingo

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis bibendum ligula. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.


<ul class="list-view">
  <li>
    <h5><a href="#">Get Going Fast</a></h5>
    <p class="meta-data">August 19, 2015 | 3 mins | Beginner</p>
    <p>A quick-start guide to all the basics you need to get up and running now. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.</p>
  </li>

  <li>
    <h5><a href="#">Get a Homepage</a></h5>
    <p class="meta-data">August 26, 2015 | 5 mins | Beginner</p>
    <p>Learn how to turn that blog into a static website for your business or your organization. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.</p>
  </li>

  <li>
    <h5><a href="#">Get Lingo</a></h5>
    <p class="meta-data">September 05, 2015 | 12 mins | Intermediate</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis bibendum ligula. Vestibulum lacinia nibh vel porttitor lacinia. Praesent ante nunc, auctor mattis luctus quis, condimentum sed tellus.</p>
  </li>
</ul>

Grid view

Grid view is a great way to show several articles with a short description, or just showing available categories and a short description about its content.

  • post
    get_post

    Retrieves post data given a post ID or post object.

  • helper
    sanitize_title

    Sanitizes title or use fallback title.

  • category
    in_category

    Tests if the current post is assigned to any of the specified categories.

  • posts
    is_single

    This conditional tag checks if a single post of any post type is being displayed.

  • posts
    add_post_meta

    Adds a custom field to a specified post which could be of any post type.

  • helper
    get_bookmark

    Retrieve Bookmark data based on bookmark link ID.


<ul class="grid-view view-col-3">
  <li>
    <h6>post</h6>
    <h5><a href="#">get_post</a></h5>
    <p>Retrieves post data given a post ID or post object.</p>
  </li>

  <li>
    <h6>helper</h6>
    <h5><a href="#">sanitize_title</a></h5>
    <p>Sanitizes title or use fallback title.</p>
  </li>

  <li>
    <h6>category</h6>
    <h5><a href="#">in_category</a></h5>
    <p>Tests if the current post is assigned to any of the specified categories.</p>
  </li>

  <li>
    <h6>posts</h6>
    <h5><a href="#">is_single</a></h5>
    <p>This conditional tag checks if a single post of any post type is being displayed.</p>
  </li>

  <li>
    <h6>posts</h6>
    <h5><a href="#">add_post_meta</a></h5>
    <p>Adds a custom field to a specified post which could be of any post type.</p>
  </li>

  <li>
    <h6>helper</h6>
    <h5><a href="#">get_bookmark</a></h5>
    <p>Retrieve Bookmark data based on bookmark link ID.</p>
  </li>

</ul>

Categorized view

In this view, you can categorize you articles ot tutorials in several part and show more content in fewer space.


<ul class="categorized-view">
  <li>
    <h5>Getting started</h5>
    <a href="#">New To theDocs - Where to Start</a>
    <a href="#">theDocs in Your Language</a>
    <a href="#">Lessons</a>
    <a href="#">Tutorials</a>
    <a href="#">Frequently Asked Questions</a>
  </li>

  <li>
    <h5>Learn How to Use</h5>
    <a href="#">Creating a starter page</a>
    <a href="#">Creat your header</a>
    <a href="#">Creat a footer</a>
    <a href="#">Add links to sidebar</a>
  </li>

  <li>
    <h5>Working With Themes</h5>
    <a href="#">Theme Development</a>
    <a href="#">Design and Layout</a>
    <a href="#">Color cariations</a>
  </li>

  <li>
    <h5>Write a Plugin</h5>
    <a href="#">Writing a Plugin</a>
    <a href="#">Plugin API</a>
    <a href="#">Plugin Resources</a>
  </li>

  <li>
    <h5>Contribute to Development</h5>
    <a href="#">Developer Documentation</a>
    <a href="#">Reporting Bugs</a>
    <a href="#">Development Blog</a>
    <a href="#">FAQ Developer Documentation</a>
  </li>
</ul>

Promo

If you need to make a home page for your documentation or even using some information box in your text, you can use this component to beutify your presentation.

  1. With icon
  2. With button
  3. With image

With icon

Check this example to learn basic usage.

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.


<div class="row">
  <div class="col-md-4">
    <div class="promo">
      <i class="fa fa-mobile"></i>
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <i class="fa fa-cog"></i>
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <i class="fa fa-code"></i>
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>

Alignment

Add class .left or .right to .promo tag, if you want to change alignment.

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.


<div class="row">
  <div class="col-md-4">
    <div class="promo center">
      <i class="fa fa-mobile"></i>
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo center">
      <i class="fa fa-cog"></i>
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo center">
      <i class="fa fa-code"></i>
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>

Small icon

Add .small-icon class to .promo tag to make your icons smaller.

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

UI Elements

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.


<div class="row">
  <div class="col-md-4">
    <div class="promo left small-icon">
      <i class="fa fa-tv"></i>
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>

  <div class="col-md-4">
    <div class="promo left small-icon">
      <i class="fa fa-wrench"></i>
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>

  <div class="col-md-4">
    <div class="promo left small-icon">
      <i class="fa fa-cubes"></i>
      <h3>UI Elements</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>

With button

If you want to guide user to another pages, you can use button links in your promo blocks.

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Learn more

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Learn more

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Learn more


<div class="row">
  <div class="col-md-4">
    <div class="promo">
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
      <a class="btn btn-teal btn-lg" href="#">Learn more</a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
      <a class="btn btn-teal btn-lg" href="#">Learn more</a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
      <a class="btn btn-teal btn-lg" href="#">Learn more</a>
    </div>
  </div>
</div>

With image

Make it fancier by adding an image to your promo boxes.

Responsive

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Full of features

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.


<div class="row">
  <div class="col-md-4">
    <div class="promo">
      <img src="assets/img/placeholder.png" alt="Responsive">
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <img src="assets/img/placeholder.png" alt="Customizable">
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <img src="assets/img/placeholder.png" alt="Full of features">
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>

Bordered

Add .bordered to img tag, so you’ll have a border around image!

Responsive

Responsive

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Customizable

Customizable

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.

Full of features

Full of features

Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.


<div class="row">
  <div class="col-md-4">
    <div class="promo">
      <img class="bordered" src="assets/img/placeholder.png" alt="Responsive">
      <h3>Responsive</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <img class="bordered" src="assets/img/placeholder.png" alt="Customizable">
      <h3>Customizable</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="promo">
      <img class="bordered" src="assets/img/placeholder.png" alt="Full of features">
      <h3>Full of features</h3>
      <p>Donec efficitur mi a velit tincidunt, sit amet accumsan nibh congue. Aliquam convallis molestie ligula.</p>
    </div>
  </div>
</div>

Included files

Provide some description for each file and folder inside your package.

  1. Directory explanation
  2. File tree

Directory explanation

Good for small ampunt of file and longer description for each file or folder.

/assets/

  • bootstrap/

    • css/
    • fonts/
    • js/

      • bootstrap.js
      • bootstrap.min.js
  • jquery/
  • highlight/
  • mediaelement/
File/Folder Purpose
bootstrap/ Bootstrap and all required files are placed under this directory. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
bootstrap/css/ Heart of bootstrap!
jquery/ This folder contains latest version of jQuery. jQuery is a fast, small, and feature-rich JavaScript library.
highlight/ Our sysntax highlighter plugin and all required files.
mediaelement/ We use this plugin to show self-hosted videos with high consistency.


<div class="dir-explain">
  <code class="url">/assets/</code>
  <ul class="files">
    <li>
      <code>bootstrap/</code>
      <ul class="files">
        <li><code>css/</code></li>
        <li><code>fonts/</code></li>
        <li>
          <code>js/</code>
          <ul class="files">
            <li><code>bootstrap.js</code></li>
            <li><code>bootstrap.min.js</code></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><code>jquery/</code></li>
    <li><code>highlight/</code></li>
    <li><code>mediaelement/</code></li>
  </ul>
</div>

<div class="table-responsive">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>File/Folder</th>
        <th>Purpose</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>bootstrap/</code></td>
        <td>Bootstrap and all required files are placed under this directory. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</td>
      </tr>
      <tr>
        <td><code>bootstrap/css/</code></td>
        <td>Heart of bootstrap!</td>
      </tr>
      <tr>
        <td><code>jquery/</code></td>
        <td>This folder contains latest version of jQuery. jQuery is a fast, small, and feature-rich JavaScript library.</td>
      </tr>
      <tr>
        <td><code>highlight/</code></td>
        <td>Our sysntax highlighter plugin and all required files.</td>
      </tr>
      <tr>
        <td><code>mediaelement/</code></td>
        <td>We use this plugin to show self-hosted videos with high consistency.</td>
      </tr>
    </tbody>
  </table>
</div>

File tree

Use this component to show more files and folders to the customers and provide a short description for each of those.

  • csssome description about the folder

    • custom.csssome description about the file
    • theDocs.csssome description about the file
  • fontssome description about the folder

    • fontawesome-webfont.eotsome description about the file
    • fontawesome-webfont.svgsome description about the file
    • fontawesome-webfont.ttfsome description about the file
    • fontawesome-webfont.woffsome description about the file
  • imgsome description about the folder

    • placeholder.jpgsome description about the file
    • logo.pngsome description about the file
    • sample-video.mp4some description about the file
    • ads.pngsome description about the file
  • jssome description about the folder

    • theDocs.jssome description about the file
    • plugins.jssome description about the file
    • custom.jssome description about the file
  • vendorssome description about the folder

    • jQuerysome description about the file

      • jquery.jssome description about the file
      • jquery.min.jssome description about the file
    • Bootstrapsome description about the file

      • csssome description about the folder
      • fontssome description about the folder
      • jssome description about the folder
    • MediaElementsome description about the file
    • Prismsome description about the file
  • index.htmlsome description about the file
  • dashboard.htmlsome description about the file
  • starter.htmlsome description about the file



<div class="file-tree">
  <ul>
    <li class="is-folder">
      css<i>some description about the folder</i>
      <ul>
        <li class="is-file">custom.css<i>some description about the file</i></li>
        <li class="is-file">theDocs.css<i>some description about the file</i></li>
      </ul>
    </li>

    <li class="is-folder">
      fonts<i>some description about the folder</i>
      <ul>
        <li class="is-file">fontawesome-webfont.eot<i>some description about the file</i></li>
        <li class="is-file">fontawesome-webfont.svg<i>some description about the file</i></li>
        <li class="is-file">fontawesome-webfont.ttf<i>some description about the file</i></li>
        <li class="is-file">fontawesome-webfont.woff<i>some description about the file</i></li>
      </ul>
    </li>

    <li class="is-folder">
      img<i>some description about the folder</i>
      <ul>
        <li class="is-file">placeholder.jpg<i>some description about the file</i></li>
        <li class="is-file">logo.png<i>some description about the file</i></li>
        <li class="is-file">sample-video.mp4<i>some description about the file</i></li>
        <li class="is-file">ads.png<i>some description about the file</i></li>
      </ul>
    </li>

    <li class="is-folder">
      js<i>some description about the folder</i>
      <ul>
        <li class="is-file">theDocs.js<i>some description about the file</i></li>
        <li class="is-file">plugins.js<i>some description about the file</i></li>
        <li class="is-file">custom.js<i>some description about the file</i></li>
      </ul>
    </li>

    <li class="is-folder open">
      vendors<i>some description about the folder</i>
      <ul>
        <li class="is-folder open">
          jQuery<i>some description about the file</i>
          <ul>
            <li class="is-file">jquery.js<i>some description about the file</i></li>
            <li class="is-file">jquery.min.js<i>some description about the file</i></li>
          </ul>
        </li>

        <li class="is-folder">
          Bootstrap<i>some description about the file</i>
          <ul>
            <li class="is-folder">css<i>some description about the folder</i></li>
            <li class="is-folder">fonts<i>some description about the folder</i></li>
            <li class="is-folder">js<i>some description about the folder</i></li>
          </ul>
        </li>

        <li class="is-folder">
          MediaElement<i>some description about the file</i>
        </li>

        <li class="is-folder">
          Prism<i>some description about the file</i>
        </li>
      </ul>
    </li>

    <li class="is-file">index.html<i>some description about the file</i></li>
    <li class="is-file">dashboard.html<i>some description about the file</i></li>
    <li class="is-file">starter.html<i>some description about the file</i></li>
  </ul>
</div>

Requirements

Your product or part of your product needs special files? Use this component to inform your users.

<link href="assets/highlight/styles/github.css" rel="stylesheet">

<script src="assets/highlight/highlight.pack.js"></script>


<div class="require-script">
  <p class="css"><code>&lt;link href="assets/highlight/styles/github.css" rel="stylesheet"&gt;</code></p>
  <p class="js"><code>&lt;script src="assets/highlight/highlight.pack.js"&gt;&lt;/script&gt;</code></p>
</div>

Tabs

Add quick, dynamic tab functionality to transition through panes of local content.

  1. Text tabs
  2. Big icon tabs

Text tabs

The simplest way to create a tab element.

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.


<div class="tabs tabs-text">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#home1" aria-controls="home" role="tab" data-toggle="tab">Home</a>
    </li>
    <li role="presentation">
      <a href="#profile1" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
    </li>
    <li role="presentation">
      <a href="#messages1" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
    </li>
    <li role="presentation">
      <a href="#settings1" aria-controls="settings" role="tab" data-toggle="tab"><i class="fa fa-cogs"></i> Settings</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active fade in" id="home1">...</div>
    <div role="tabpanel" class="tab-pane fade" id="profile1">...</div>
    <div role="tabpanel" class="tab-pane fade" id="messages1">...</div>
    <div role="tabpanel" class="tab-pane fade" id="settings1">...</div>
  </div>

</div>

Alignment

Add .text-center or .text-right to the ul.nav to change the position of tabs.

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.


<div class="tabs tabs-text">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs text-right" role="tablist">
    <li role="presentation" class="active">
      <a href="#home3" aria-controls="home" role="tab" data-toggle="tab">Home</a>
    </li>
    <li role="presentation">
      <a href="#profile3" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
    </li>
    <li role="presentation">
      <a href="#messages3" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
    </li>
    <li role="presentation">
      <a href="#settings3" aria-controls="settings" role="tab" data-toggle="tab"><i class="fa fa-cogs"></i> Settings</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active fade in" id="home3">...</div>
    <div role="tabpanel" class="tab-pane fade" id="profile3">...</div>
    <div role="tabpanel" class="tab-pane fade" id="messages3">...</div>
    <div role="tabpanel" class="tab-pane fade" id="settings3">...</div>
  </div>

</div>

Big icon tabs

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish.


<div class="tabs tabs-icon">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs text-center" role="tablist">
    <li role="presentation" class="active">
      <a href="#home2" aria-controls="home" role="tab" data-toggle="tab">
        <i class="fa fa-home"></i>
        <span>Home</span>
      </a>
    </li>
    <li role="presentation">
      <a href="#profile2" aria-controls="profile" role="tab" data-toggle="tab">
        <i class="fa fa-user"></i>
        <span>Profile</span>
      </a>
    </li>
    <li role="presentation">
      <a href="#messages2" aria-controls="messages" role="tab" data-toggle="tab">
        <i class="fa fa-comment-o"></i>
        <span>Messages</span>
      </a>
    </li>
    <li role="presentation">
      <a href="#settings2" aria-controls="settings" role="tab" data-toggle="tab">
        <i class="fa fa-cogs"></i>
        <span>Settings</span>
      </a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active fade in" id="home2">...</div>
    <div role="tabpanel" class="tab-pane fade" id="profile2">...</div>
    <div role="tabpanel" class="tab-pane fade" id="messages2">...</div>
    <div role="tabpanel" class="tab-pane fade" id="settings2">...</div>
  </div>

</div>

Steps

Prepare a chronological guide to perform an action in your product.

  1. Text
  2. Image

Text

The simplest way to make a step.

Adding a gallary to WordPress

  • Place your cursor

    A gallery can go anywhere on a page or post – by itself on a blank page, or above, below, or in the midst of text. Start by placing your cursor where you want the gallery to appear.

  • Click the Add Media button

    Once you’ve placed your cursor where you want your image gallery to appear, click on the Add Media button (located left above the editing window) to launch the media uploader interface. In the resulting popup window, select the ‘Create a Gallery’ option from the list of actions on the left.

    • Look for image or upload

      You can add or select the images you want to include in your image gallery by choosing from either of the following options in the center of the media uploader window.

    • Write alt and title text

      You can add or select the images you want to include in your image gallery by choosing from either of the following options in the center of the media uploader window.

  • Add and/or Select the Images

    You can add or select the images you want to include in your image gallery by choosing from either of the following options in the center of the media uploader window.

  • Edit Your Gallery

    On the Edit Gallery page, you can do the following things before inserting the gallery you have created into your page or post.


<h3>Adding a gallary to WordPress</h3>
<ul class="step-text">
  <li>
    <h5>Place your cursor</h5>
    <p>A gallery can go anywhere on a page or post - by itself on a blank page, or above, below, or in the midst of text. Start by placing your cursor where you want the gallery to appear.</p>
  </li>

  <li>
    <h5>Click the Add Media button</h5>
    <p>...</p>
  </li>

  <li>
    <h5>Add and/or Select the Images</h5>
    <p>...</p>
  </li>

  <li>
    <h5>Edit Your Gallery</h5>
    <p>...</p>
  </li>
</ul>

Image

If you have a picture for every step, we suggest you to use this step as it’s more interactive.


<div id="step-image" class="step-image carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#step-image" data-slide-to="0" class="active"></li>
    <li data-target="#step-image" data-slide-to="1"></li>
    <li data-target="#step-image" data-slide-to="2"></li>
    <li data-target="#step-image" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="assets/img/step1.png" alt="">
      <div class="carousel-caption">
        <h4>Placing your cursor</h4>
        <p>In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.</p>
      </div>
    </div>

    <div class="item">
      <img src="assets/img/step2.png" alt="">
      <div class="carousel-caption">
        <h4>Click the Add Media button</h4>
        <p>Once you’ve placed your cursor on the line where you want your image to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media option from the list of actions in the left side of the media uploader window.</p>
      </div>
    </div>

    <div class="item">
      <img src="assets/img/step3.png" alt="">
      <div class="carousel-caption">
        <h4>Add or Select Your Image</h4>
        <div>
          <p>You can add or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:</p>
          <ul>
            <li><strong>Upload Files:</strong> Upload the image you want to use from your computer by dragging it into the upload area.</li>
            <li><strong>Media Library:</strong> Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="item">
      <img src="assets/img/step4.png" alt="">
      <div class="carousel-caption">
        <h4>Attachment Details</h4>
        <p>The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels.</p>
      </div>
    </div>
    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#step-image" role="button" data-slide="prev">
    <i class="fa fa-angle-left"></i>
  </a>
  <a class="right carousel-control" href="#step-image" role="button" data-slide="next">
    <i class="fa fa-angle-right"></i>
  </a>
</div>

Media

  1. Image
  2. Video
  3. Lightbox

Image

You can add a shadow around your images by adding .img-shadow class to the img tag.

shadowed image

<img class="img-shadow img-responsive center-block" src="assets/img/placeholder.png" alt="shadowed image">

Use figcaption tag to add a caption to your images.

image test
some description about the image


<figure>
  <img src="assets/img/placeholder.png" alt="image test">
  <figcaption>some description about the image</figcaption>
</figure>

image
image
image


<img class="img-responsive img-rounded" src="assets/img/placeholder.png" alt="image">
<img class="img-responsive img-circle" src="assets/img/placeholder.png" alt="image">
<img class="img-responsive img-thumbnail" src="assets/img/placeholder.png" alt="image">

Video

Adding a video to your page from any source. Just wrap them inside .video class.

YouTube


<div class="video">Embed code</div>

Vimeo


<div class="video">Embed code</div>

Self-hosted

Don’t forget to add width="100%" and height="100%" attributes.


<div class="video">
  <video src="path/to/video.mp4" width="100%" height="100%" controls>
</div>

Implementing as easy as adding a data-lity attribute to your <a> tags.

Image
iFrame Youtube
iFrame Vimeo
Google Maps

Here’s the code to generate above buttons. You can use an <img> tag to show a poster image as well.


<a class="btn btn-default" href="assets/img/index.png" data-lity>Image</a>
<a class="btn btn-default" href="//www.youtube.com/watch?v=hQfNtnKm5nA" data-lity>iFrame Youtube</a>
<a class="btn btn-default" href="//vimeo.com/127738920" data-lity>iFrame Vimeo</a>
<a class="btn btn-default" href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>

Color palette

Comprise and show what colors are available for a component.

  1. Circular
  2. Stacked

Circular

By default, text color is white. You may need to change it based on your background-color and their contrast. You can use either classes or inline style to set background-colors.

  • #968eee
  • #5fd79a
  • #89c1e4
  • #fe6060
  • #f8f9fb

<ul class="color-palette-circular">
  <li style="background-color: #968eee">#968eee</li>
  <li style="background-color: #5fd79a">#5fd79a</li>
  <li style="background-color: #89c1e4">#89c1e4</li>
  <li style="background-color: #fe6060">#fe6060</li>
  <li style="background-color: #f8f9fb; color: #666">#f8f9fb</li>
</ul>

Stacked

Just changing a class name!

  • #0D47A1
  • #1565C0
  • #1976D2
  • #1E88E5
  • #2196F3
  • #42A5F5
  • #64B5F6
  • #90CAF9
  • #BBDEFB
  • #4A148C
  • #6A1B9A
  • #7B1FA2
  • #8E24AA
  • #9C27B0
  • #AB47BC
  • #BA68C8
  • #CE93D8
  • #E1BEE7


<div class="row">
  <div class="col-sm-6">
    <ul class="color-palette-stacked">
      <li style="background-color: #0D47A1">#0D47A1</li>
      <li style="background-color: #1565C0">#1565C0</li>
      <li style="background-color: #1976D2">#1976D2</li>
      <li style="background-color: #1E88E5">#1E88E5</li>
      <li style="background-color: #2196F3">#2196F3</li>
      <li style="background-color: #42A5F5">#42A5F5</li>
      <li style="background-color: #64B5F6">#64B5F6</li>
      <li style="background-color: #90CAF9">#90CAF9</li>
      <li style="background-color: #BBDEFB">#BBDEFB</li>
    </ul>
  </div>

  <div class="col-sm-6">
    <ul class="color-palette-stacked">
      <li style="background-color: #4A148C">#4A148C</li>
      <li style="background-color: #6A1B9A">#6A1B9A</li>
      <li style="background-color: #7B1FA2">#7B1FA2</li>
      <li style="background-color: #8E24AA">#8E24AA</li>
      <li style="background-color: #9C27B0">#9C27B0</li>
      <li style="background-color: #AB47BC">#AB47BC</li>
      <li style="background-color: #BA68C8">#BA68C8</li>
      <li style="background-color: #CE93D8">#CE93D8</li>
      <li style="background-color: #E1BEE7">#E1BEE7</li>
    </ul>
  </div>
</div>

Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. Even you can use jumbotrons to have a page header, like our Overview page.

  1. Basic usage
  2. Color variation
  3. Alignment
  4. Background image

Basic usage

Hello, world!

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

Learn more


<div class="jumbotron">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</div>

Sizes

You can make your jumbotron smaller by adding .jumbotron-sm class. Also it could be use as an aside for your main content. Don’t forget that we have .jumbotron-lg and .jumbotron-xl as well.

Customization options

Nunc viverra ex nec pulvinar aliquam. Donec id elit mauris. Donec at ipsum varius, tempus metus eget, ornare eros. Nulla non sem faucibus velit sagittis maximus at ut purus. Pellentesque nec magna scelerisque, gravida sem in, porta mauris. Ut interdum metus nec mauris scelerisque condimentum. Aliquam suscipit feugiat diam semper ultricies.

Expect more detail?

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

Learn more


<div class="row">
  <div class="col-md-6">
    <h3>Customization options</h3>
    <p>...</p>
  </div>

  <div class="col-md-6">
    <div class="jumbotron jumbotron-sm">
      <div class="container">
        <h4>Expect more detail?</h4>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
    </div>
  </div>
</div>

Color variation

You can simply change background-color of jumbotron by adding contextual color classes to the .jumbotron. Supported classes are:

  • .jumbotron-primary
  • .jumbotron-success
  • .jumbotron-info
  • .jumbotron-warning
  • .jumbotron-danger
  • .jumbotron-purple
  • .jumbotron-teal
  • .jumbotron-dark
  • .jumbotron-white

Hello, world!

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

Learn more


<div class="jumbotron jumbotron-teal">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-white btn-outline btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</div>

Alignment

You can align the text of jumbotron by adding one of the following classes:

  • .text-left default
  • .text-center
  • .text-right

Hello, world!

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

Learn more


<div class="jumbotron jumbotron-info text-center">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-white btn-outline btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</div>

Background image

Make it fancier by adding a background image.

Hello, world!

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

Learn more


<div class="jumbotron text-white text-right overlay-black" style="background-image: url(assets/img/jumbotron-bg.png)">
  <div class="container">
    <h1>Hello, world!</h1>
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p><a class="btn btn-white btn-outline btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</div>

Carousel

A slideshow component for cycling through elements, like a carousel.

  1. Default
  2. Indicators-out

Default

By default, controls of carousel has white color. If you want to have a dark color for them, simply add .color-alt to the .carousel tag.


<div id="carousel1" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>

    <div class="item">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>

    <div class="item">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>
    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
    <i class="fa fa-angle-left"></i>
  </a>
  <a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
    <i class="fa fa-angle-right"></i>
  </a>
</div>

Indicators-out

It’s just another style for carousel which can be achieved by just adding .indicators-out class.


<div id="carousel2" class="carousel slide indicators-out">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel2" data-slide-to="1"></li>
    <li data-target="#carousel2" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>

    <div class="item">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>

    <div class="item">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>
  </div>

</div>

FAQ

Make a FAQ page for your product and prepare a first place for your customers to look for their answers.

Category 1
  • Question sentence 1?
    Here is the answer of the question
  • Question sentence 2?
    Here is the answer of the question
Category 2
  • Question sentence 1?
    Here is the answer of the question
  • Question sentence 2?
    Here is the answer of the question


<div class="faq">
  <input class="faq-search" type="text" placeholder="Type to search...">

  <h5>Category 1</h5>
  <ul>
    <li>
      <h6>Question sentence 1?</h6>
      <div>Here is the answer of the question</div>
    </li>
    <li>
      <h6>Question sentence 2?</h6>
      <div>Here is the answer of the question</div>
    </li>
  </ul>

  <h5>Category 2</h5>
  <ul>
    <li>
      <h6>Question sentence 1?</h6>
      <div>Here is the answer of the question</div>
    </li>
    <li>
      <h6>Question sentence 2?</h6>
      <div>Here is the answer of the question</div>
    </li>
  </ul>
</div>

Mixed controls

  1. Pagination
  2. Breadcrumbs

Pagination

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.


<div class="text-center">
  <ul class="pagination">
    <li>
      <a href="#" class="previous">
        <i class="fa fa-angle-left"></i>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" class="next">
        <i class="fa fa-angle-right"></i>
      </a>
    </li>
  </ul>
</div>

<ul class="pager">
  <li class="previous"><a href="#">Prev</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Indicate the current page’s location within a navigational hierarchy.


<ol class="breadcrumb">
  <li class="active">Home</li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li class="active">Library</li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>