Getting Started

Introduction

eDocs - Documentation Template

eDocs is a fully responsive, clean, modern, and content-focused Documentation & Knowledgebase Template. This template is well suited for APIs, web-apps, Bootstrap templates, WordPress Themes, Agencies, Help Centers, Support Forums or any other digital products that may require a documentation or help-center.

Main Features

Bootstrap 5
HTML5 & CSS3
SASS files included
Fully Responsive
Cross-Browser Compatible

Valid HTML
No jQuery Dependencies
Font Awesome 5
Bootstrap Icons
Google Fonts

300+ UI Components
2 Help Center Demos
4 Documentation Layouts
Easy to customize
24/7 Support

File Structure

*Click on the folder () icons to open / close them.

assets

css

animate.css
aos.css
bootstrap.min.css
bootstrap.min.css.map
bootstrap.rtl.css
bootstrap.rtl.css.map
doc.css
fontawesome-all.min.css
prism.css
style.css

images

favicon.ico
logo-light.png
logo-travlinq.png
logo.png
ph-bg.jpg
ph-big.jpg
ph-mini.jpg
ph-square.jpg
ph-tall.jpg
ph-taller.jpg
ph-wide.jpg
ph.jpg
Demo Images

aos.js
bootstrap.bundle.min.js
bootstrap.bundle.min.js.map
clipboard.min.js
jarallax.min.js
jarallax.min.js.map
prism.js
swiper-init-all.js
theme.js

scss

_components.scss
_media-screens.scss
_mixins.scss
_sections.scss
_ui.scss
_utility.scss
_variables.scss
doc.scss
style.scss

webfonts

All Font Files

index.html
documentation.html
knowledgebase.html

Starter Template

To get started with just the base tags and the essential files included, please copy the below code to your index.html file:

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

<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Site Title -->
    <title>Site Title</title>
    <!-- Bootstrap 5 Core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom Styles -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <!-- The website content starts here -->

    <!-- Core JavaScript -->
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/theme.js"></script>
</body>
</html>

Setup Sass

To use SASS you will have to use a SASS Processor application, like Scout App, it is available for Linux 32 / 64bit, Mac and Windows, it requires project setup in order to process the SASS files from a set folder or you can also use Prepros, it is also available for Linux, Mac and Windows and it is a bit easier to setup this application.

Change Variables

To edit any theme file you will need a Text or Code Editor, we recommend using Sublime Text, as it is the Text Editor of our choice to write code, but every Text or Code Editor will work fine to edit any theme files.

To change the theme's fonts, colors and other variables, please open the _variables.scss file from assets / scss folder and modify the font-family to your preferred font, font-weights, the letter-spacing values, change color codes and you can also add custom variables of any type if needed:

// Typography

$title-font: 'Poppins', sans-serif;
$primary-font: 'Poppins', sans-serif;
$secondary-font: 'Poppins', sans-serif;
$thin: 100;
$light: 300;
$regular: 400;
$medium: 500;
$bold: 600;
$lsp: 0.015rem;
$lsp-2x: 0.03rem;
$lsp-big: 0.05rem;
$lsp-extra: 0.15rem;

...

Content

Typography

Documentation and examples for typography, including global settings, headings, body text, lists and more. Set your font-family by including the font's @import code into the style.scss or style.css file:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');

After embedding the font-family code, the font-family must be specified in CSS, in the theme's assets / scss / _variables.scss file:

$title-font: 'Poppins', sans-serif;
$primary-font: 'Poppins', sans-serif;
$secondary-font: 'Poppins', sans-serif;

Headings

All HTML headings, h1 through h6, are available, also .h1 through .h6 classes are available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

Paragraphs

Make a paragraph stand out by adding .lead, smaller size with .text-sm or extra small with .text-xs class.

Large Paragraph (lead).

Regular Paragraph.

Small Paragraph.

XS Paragraph.

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

<p class="lead">Large Paragraph (lead).</p>
<p>Regular Paragraph.</p>
<p class="text-sm">Small Paragraph.</p>
<p class="text-xs">XS Paragraph.</p>
<p>
    <span class="text-primary mr-5">.text-primary</span>
    <span class="text-secondary mr-5">.text-secondary</span>
    <span class="text-success mr-5">.text-success</span>
    <span class="text-info mr-5">.text-info</span>
    <span class="text-warning mr-5">.text-warning</span>
    <span class="text-danger mr-5">.text-danger</span>
</p>

Lists

We replaced the default list with a featured list by using .list-featured CSS class and also created many custom icon lists by using .list-unstyled.list-icon class and additional classes of the icon types .list-arrow, .list-check, .list-close, .list-bullet, .list-star and .list-dollar and also added classes to change color of the list icons, the color utility classes are: .list-primary, .list-secondary, .list-success, .list-info, .list-warning and .list-danger

List Item 1
List Item 2

List Item 3
List Item 4

List Item 5
List Item 6

List Item 7
List Item 8

<ul class="list-unstyled list-icon list-bullet list-primary mb-25">
    <li>List Item 1</li>
    <li>List Item 2</li>
</ul>

<ul class="list-unstyled list-icon list-check list-success mb-25">
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

<ul class="list-unstyled list-icon list-arrow list-info mb-25">
    <li>List Item 5</li>
    <li>List Item 6</li>
</ul>

<ul class="list-unstyled list-icon list-star list-warning">
    <li>List Item 7</li>
    <li>List Item 8</li>
</ul>

Blockquotes

We've created a custom blockquote design for this template; with an icon placed in the background of the blockquote paragraph:

Quisque in tortor dolor. In hac habitasse platea dictumst. Vivamus dictum, libero vel hendrerit iaculis, nunc eros posuere diam, id tempus velit nibh eget nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris iaculis ullamcorper venenatis urna vel aliquet. Vestibulum aliquam commodo egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

<blockquote class="blockquote">
    <i class="fas fa-quote-right blockquote-bg-icon"></i>
    <div class="blockquote-content has-icon">
        <p class="mb-0">Quisque in tortor dolor. In hac habitasse platea dictumst. Vivamus dictum, libero vel hendrerit iaculis, nunc eros posuere diam, id tempus velit nibh eget nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris iaculis ullamcorper venenatis urna vel aliquet. Vestibulum aliquam commodo egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div><!--/ blockquote-content -->
</blockquote>

Icons

The integrated fonts in this theme are Font Awesome 5 and Bootstrap Icons, the font files can be found in the theme's assets / webfonts folder, the CSS files can be found in assets / css folder.

Font Awesome 5

To use Font Awesome, please paste this code into the <head> of your HTML document:

<link rel="stylesheet" href="assets/css/fontawesome-all.min.css" type="text/css">

To add a regular Font Awesome icon to your content, please use fas CSS class in an <i> tag, some Font Awesome icons are also available in Regular font-weight which requires far class and for branding icons, like Facebook, Twitter, Apple, etc. the fab class should be used as seen in the below example:

fas fa-lightbulb

far fa-lightbulb

fab fa-apple

Bootstrap Icons

To use Bootstrap Icons, please paste this code to the top section of your style.css or style.scss file of your website ( the code must go before the first line of your CSS ):

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");

To add a Bootstrap icon to your content, please use bi bi-[icon-name] CSS class on an <i> or <span> tag as seen in the below example:

bi bi-lightbulb-fill

bi bi-lightbulb

bi bi-lightbulb-off

Code

Inline Code

For example, <section> should be wrapped as inline code.

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

Code Blocks

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable class, which will set a max-height of 340px and provide a y-axis scrollbar.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre class="language-markup"><code class="language-markup" style="">&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.

Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 5, meaning any nested tables will be styled in the same manner as the parent.

You can also invert the colors with light text on dark backgrounds with .table-inverse.

Bordered Table

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

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>The Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table><!-- / table -->

Striped Table

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

<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>The Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table><!-- / table -->

Images

Responsive Images

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

<img src="assets/images/ph-bg.jpg" class="img-fluid" alt="Responsive image">

Image Shapes

You can shape images with the helper .rectangle, .rounded, .pill, .circle and .rounded-[value] utility classes, the rounded values are from 5 to 30, increasing in steps of 5 (px).

<img style="max-width: 180px; margin-right: 15px;" src="assets/images/ph-mini.jpg" alt="rectangle image" class="img-thumbnail rectangle">
<img style="max-width: 180px; margin-right: 15px;" src="assets/images/ph-mini.jpg" alt="rounded image" class="img-thumbnail rounded-20">
<img style="max-width: 180px; margin-right: 15px;" src="assets/images/ph-mini.jpg" alt="pill image" class="img-thumbnail pill">
<img style="max-width: 180px;" src="assets/images/ph-mini.jpg" alt="circle image" class="img-thumbnail circle">

Videos

Embedded Videos

You can embed videos from Youtube , Vimeo or any other videos sharing service that offers embed links, in our example below we've mebedding a Vimeo video:

<div class="embed-responsive ratio ratio-16x9">
    <iframe src="https://player.vimeo.com/video/173405377?title=0&byline=0&portrait=0" allowfullscreen></iframe>
</div><!-- / embed-responsive -->

Self-hosted Videos

You can embed your own self-hosted videos by using the below example code:

<div class="video-player-wrapper">
    <video src="your-video-url-here" controls></video>
</div><!-- / video-player-wrapper -->

Components

Accordions

How it Works

The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

Default Accordion

Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Panel One <i class="fas fa-chevron-down"></i></button>
        </h2><!-- / accordion-header -->
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                 Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->

    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Panel Two <i class="fas fa-chevron-down"></i></button>
        </h2><!-- / accordion-header -->
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                 Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->

    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Panel Three <i class="fas fa-chevron-down"></i></button>
        </h2><!-- / accordion-header -->
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                 Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur, nunc dolor bibendum eros, eu suscipit nisl elit in arcu vulputate.
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->
</div><!-- / accordion -->

Minimal Accordion

Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.

<div class="accordion minimal-accordion" id="minimal-accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="minimal-headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#minimal-collapseOne" aria-expanded="true" aria-controls="minimal-collapseOne">Panel One <span><i class="fas fa-chevron-down"></i></span></button>
        </h2><!-- / accordion-header -->
        <div id="minimal-collapseOne" class="accordion-collapse collapse show" aria-labelledby="minimal-headingOne" data-bs-parent="#minimal-accordionExample">
            <div class="accordion-body">
                 Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->

    <div class="accordion-item">
        <h2 class="accordion-header" id="minimal-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#minimal-collapseTwo" aria-expanded="false" aria-controls="minimal-collapseTwo">Panel Two <span><i class="fas fa-chevron-down"></i></span></button>
        </h2><!-- / accordion-header -->
        <div id="minimal-collapseTwo" class="accordion-collapse collapse" aria-labelledby="minimal-headingTwo" data-bs-parent="#minimal-accordionExample">
            <div class="accordion-body">
                 Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->

    <div class="accordion-item">
        <h2 class="accordion-header" id="minimal-headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#minimal-collapseThree" aria-expanded="false" aria-controls="minimal-collapseThree">Panel Three <span><i class="fas fa-chevron-down"></i></span></button>
        </h2><!-- / accordion-header -->
        <div id="minimal-collapseThree" class="accordion-collapse collapse" aria-labelledby="minimal-headingThree" data-bs-parent="#minimal-accordionExample">
            <div class="accordion-body">
                 Vivamus ut vestibulum quam. Duis at urna convallis, porta odio ac, varius ex. Cras ultrices quam eros, vitae auctor enim luctus at. Sed facilisis, ante eu malesuada consectetur.
            </div><!-- / accordion-body -->
        </div><!-- / collapse -->
    </div><!-- / accordion-item -->
</div><!-- / minimal-accordion -->

Alerts

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin. Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

You can see this in action with a live demo where we also included icons to the Alert's content and different alert colors:

Well done! Successfully read this message.

Heads up! This alert needs your attention.

Warning! Better check yourself.

Oh snap! Change a few things and try again.

<div class="alert alert-success alert-dismissible fade show" role="alert">
   <span class="fas fa-check fs-22 mr-15 va-middle"></span> <span><strong>Well done!</strong> Successfully read this message.</span>
   <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <span class="fas fa-exclamation-circle fs-22 mr-15 va-middle"></span> <span><strong>Heads up!</strong> This alert needs your attention.</span>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <span class="fas fa-exclamation-triangle fs-22 mr-15 va-middle"></span> <span><strong>Warning!</strong> Better check yourself.</span>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <span class="fas fa-radiation-alt fs-22 mr-15 va-middle"></span> <span><strong>Oh snap!</strong> Change a few things and try again.</span>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</div><!-- / alert -->

Buttons

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. If you don’t want the button text to wrap, you can add the .text-nowrap class to the button. In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.

Button Colors

Primary Secondary Success Info Warning Danger

<a href="#x" class="btn btn-primary">Primary</a>
<a href="#x" class="btn btn-secondary">Secondary</a>
<a href="#x" class="btn btn-success">Success</a>
<a href="#x" class="btn btn-info">Info</a>
<a href="#x" class="btn btn-warning">Warning</a>
<a href="#x" class="btn btn-danger">Danger</a>

Button Styles

Light Buttons

Replace the default modifier classes with the .btn-*-light to make all buttons appear in their light color variant.

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.

Gradient Buttons

Replace the default modifier classes with the .btn-gradient-* to add a gradient background-color to the buttons.

Examples:

Primary Light Primary Outline Primary Gradient

<a href="#x" class="btn btn-primary-light">Primary Light</a>
<a href="#x" class="btn btn-outline-primary">Primary Outline</a>
<a href="#x" class="btn btn-gradient-primary">Primary Gradient</a>

Button Shapes

To change the button's shapes you can add helper classes, like .sharp to remove border-radius, .pill to add 50% border-radius and .rounded-[value] utility classes, the rounded values are from 5 to 30, increasing in steps of 5 (px).

Sharp Default Rounded-10 Pill

<a href="#x" class="btn btn-primary sharp">Sharp</a>
<a href="#x" class="btn btn-primary">Default</a>
<a href="#x" class="btn btn-primary rounded-10">Rounded-10</a>
<a href="#x" class="btn btn-primary pill">Pill</a>

Button Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm or .btn-xs for additional sizes.

xSmall Small Medium Large

<a href="#x" class="btn btn-xs btn-primary">xSmall</a>
<a href="#x" class="btn btn-sm btn-primary">Small</a>
<a href="#x" class="btn btn-primary">Medium</a>
<a href="#x" class="btn btn-lg btn-primary">Large</a>

Icon Buttons

Buttons with icons added besides text and buttons built just to include icons, without additional text. Utility classes like .sharp, .rounded-*, .pill, .btn-circle and button colors like .btn-outline-*, .btn-*-light and .btn-gradient-* can also be used on icon buttons.

Check Next

<a href="#x" class="btn btn-primary"><span class="fas fa-check mr-10"></span> <span>Check</span></a>
<a href="#x" class="btn btn-primary-light pill"><span>Next</span> <span class="fas fa-chevron-right ml-10"></span></a>
<a href="#x" class="btn btn-icon btn-circle btn-outline-primary"><span class="fas fa-lock"></span></a>
<a href="#x" class="btn btn-icon btn-no-border btn-gradient-primary"><span class="fas fa-flag"></span></a>

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. card content can be aligned to center or right by using helper classes such as text-center or text-right.

Card Title

Left-aligned content. Example text to build on the card title and make up the bulk of the content.

Button

Card Title

Center-aligned content. Example text to build on the card title and make up the bulk of the content.

Button

Card Title

Right-aligned content. Example text to build on the card title and make up the bulk of the content.

Button

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Left-aligned content. Example text to build on the card title and make up the bulk of the content.</p>
        <a href="#x" class="btn btn-primary">Button</a>
    </div><!-- / card-body -->
</div><!-- / card -->

Modals

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content text-center">
            <div class="modal-header">
                <h5 class="modal-title">Modal Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-dark" data-bs-dismiss="modal"><i class="fas fa-times fs-14 mr-5"></i> <span>Close</span></button>
                <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal"><i class="fas fa-check fs-14 mr-5"></i> <span>Save</span></button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->

Click on nay button to open the modal. All modals are centered on the screen usin the modal-dialog-centered helper class.

Default Small Large

<!--default modal -->
<a href="#x" class="btn btn-primary mb-5 mr-10" data-bs-toggle="modal" data-bs-target=".default-modal">Default</a>
<!-- modal -->
<div class="modal fade default-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-center">
            <div class="modal-header">
                <h5 class="modal-title">Default Modal</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here. Quisque a eros porta urna vulputate congue at in dui. Nulla sed sapien a velit vestibulum varius. Cras eu eros nibh commodo.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-dark" data-bs-dismiss="modal"><i class="fas fa-times fs-14 mr-5"></i> <span>Close</span></button>
                    <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal"><i class="fas fa-check fs-14 mr-5"></i> <span>Save</span></button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / default-modal -->

Navigation

Navbars

Color Schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-inverse for dark background colors. Then, customize with .bg-* utilities.

The below examples are the different variants of the template's main navigation menus:

<nav class="navbar navbar-expand-lg navbar-inverse bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#x"><img src="assets/images/logo-travlinq.png" alt=""></a>
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button><!-- / navbar-toggler -->

        <div class="collapse navbar-collapse" id="navbar-toggle">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#x" id="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-file-earmark-text mr-5 fs-14 va-middle"></i> <span class="va-middle">Docs</span></a>
                    <div class="dropdown-menu mega-menu drop-to-center two-columns" aria-labelledby="dropdown">
                        <div class="row">
                            <div class="col-lg-6 sub-menu">
                                <a class="dropdown-item" href="#x"><i class="bi bi-life-preserver mr-5"></i> <span>Help Center</span></a>
                                <a class="dropdown-item" href="#x"><i class="bi bi-headset mr-5"></i> <span>Help Center 2</span></a>
                                <a class="dropdown-item" href="#x"><i class="bi bi-layout-text-window-reverse mr-5"></i> <span>Documentation</span></a>
                            </div><!-- / sub-menu -->

                            <div class="col-lg-6 sub-menu">
                                <a class="dropdown-item" href="#x"><i class="bi bi-layout-text-window mr-5"></i> <span>Doc Layout 2</span></a>
                                <a class="dropdown-item" href="#x"><i class="bi bi-window mr-5"></i> <span>Doc Layout 3</span></a>
                                <a class="dropdown-item" href="#x"><i class="bi bi-layout-sidebar-inset mr-5"></i> <span>Doc Layout 4</span></a>
                            </div><!-- / sub-menu -->
                        </div><!-- / row -->
                    </div><!-- / dropdown-menu -->
                </li><!-- / dropdown -->
                
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#x" id="dropdown-pages" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-window-sidebar mr-5 fs-14 va-middle"></i> <span class="va-middle">Pages</span></a>
                    <div class="dropdown-menu mega-menu two-columns drop-to-center" aria-labelledby="dropdown-pages">
                        <div class="row">
                            <div class="col-lg-6 sub-menu">
                                <a class="dropdown-item" href="#x"><i class="bi bi-lightbulb mr-5"></i> <span>Knowledgebase</span></a>
                                <a class="dropdown-item" href="#x"><i class="bi bi-file-post mr-5"></i> <span>Article</span></a>
                                <a class="dropdown-item" href="#x"><i class="bi bi-life-preserver mr-5"></i> <span>Support</span></a>
                            </div><!-- / sub-menu -->

                            <div class="col-lg-6 sub-menu">
                                <a class="dropdown-item" href="#x"><i class="bi bi-question-circle mr-5"></i> <span>FAQ</span></a>
                                <a class="dropdown-item" href="#x"><i class="bi bi-envelope-open mr-5"></i> <span>Contact</span></a>
                                <a class="dropdown-item" href="#x"><i class="bi bi-calendar2-x mr-5"></i> <span>404 Page</span></a>
                            </div><!-- / sub-menu -->
                        </div><!-- / row -->
                    </div><!-- / dropdown-menu -->
                </li><!-- / dropdown -->

                <li class="nav-item">
                    <a class="nav-link opc-100" href="#x"><i class="bi bi-person-circle mr-5 fs-14 va-middle bl-1 border-white pl-50"></i> <span class="va-middle">Sign In</span></a>
                </li><!-- / nav-item -->
            </ul><!-- / navbar-nav -->

            <ul class="navbar-button p-0 m-0 ml-5">
                <li class="nav-item">
                    <a href="#x" class="btn btn-sm btn-white"><i class="bi bi-cart2 fs-14 mr-5 text-primary va-middle"></i> <span>Buy Now</span></a>
                </li>
            </ul>
        </div><!-- / navbar-collapse -->
    </div><!-- / container-fluid -->
</nav><!-- navbar -->

Progress

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

Bootstrap provides a handful of utilities for setting width. Depending on your needs, these may help with quickly configuring progress.

Colors

Using .bg-* utility classes on progress-bars you can change their colors, see the below example where we are using the most common background-colors:

Primary 25%

Dark 40%

Success 55%

Info 70%

Warning 85%

Danger 100%

<p class="progress-title fs-12">Primary <span class="pull-right">25%</span></p>
<div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-aos="slide-right"></div>
</div><!-- / progress -->

Promo Box

Promo Box is a custom component built as an alternative to Cards, so it can be used where you need card-like components to hold some basic content or other features, styled differnetly for different kinds of contents without touching the styling of the cards.

Promo Box with left aligned content, center aligned image and right positioned icon/ the content can be aligned in any direction and also the images and icons can be positioned on left, center or right of the text container.

<div class="promo-box">
    <h6 class="box-title mb-15">Box Title</h6>
    <p class="box-description">Box Description</p>
</div><!-- / promo-box -->

Promo Box with Column Line Separators

<div class="promo-box">
    <div class="row">
        <div class="col-xl-4 col-line tablet-xl-no-border">
            <div class="p-y-40 p-x-30 promo-center">
                <h6 class="box-title mb-15">Box Title</h6>
                <p class="box-description">Box Description</p>
            </div><!-- / promo-center -->
        </div><!-- / column -->

        <div class="col-xl-4 col-line tablet-xl-no-border">
            <div class="p-y-40 p-x-30 promo-center">
                <h6 class="box-title mb-15">Box Title</h6>
                <p class="box-description">Box Description</p>
            </div><!-- / promo-center -->
        </div><!-- / column -->

        <div class="col-xl-4 col-line">
           <div class="p-y-40 p-x-30 promo-center">
                <h6 class="box-title mb-15">Box Title</h6>
                <p class="box-description">Box Description</p>
            </div><!-- / promo-center -->
        </div><!-- / column -->
    </div><!-- / row -->
</div><!-- / promo-box -->

Widgets

Widgets built to be used in sidebars, footer widget areas, or basically anywere needed, these are small holder components with just some basic styling for your widgets, with the holder components we've added sme basic widget functionality with custom styling, like posts / projects, link lists, social feed, tags, newsletter subscription, etc.

<div class="widget">
    <h6 class="widget-title">Widget Title</h6>
    <p>Widget Content</p>
</div><!-- / widget -->

Changelogs

Version 1.1.0

                    - New: Dark Style Demos
                    - Updated: Bootstrap 5 Beta 3
                    - Updated: Bootstrap Icons

Version 1.0.2

                    - Improved: responsiveness
                    - Updated: Font Awesome 5

Version 1.0.1

                    - Fixed: Minor bugs
                    - Updated: Bundled Plugins

Version 1.0.0

- Initial Release

Getting Started

Introduction

eDocs - Documentation Template

Main Features

File Structure

Starter Template

Setup Sass

Change Variables

Content

Typography

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraphs

Lists

Blockquotes

Icons

Font Awesome 5

Bootstrap Icons

Code

Inline Code

Code Blocks

Tables

Bordered Table

Striped Table

Images

Responsive Images

Image Shapes

Videos

Embedded Videos

Self-hosted Videos

Components

Accordions

How it Works

Default Accordion

Panel One

Panel Two

Panel Three

Minimal Accordion

Panel One

Panel Two

Panel Three

Alerts

Buttons

Button Colors

Button Styles

Light Buttons

Outline Buttons

Gradient Buttons

Examples:

Button Shapes

Button Sizes

Icon Buttons

Cards

Card Title

Card Title

Card Title

Modals

Modal Components

Usage

Live Modal Demos

Navigation

Navbars

Color Schemes

Progress

How it works

Colors

Promo Box

Usage Example

Left Aligned Content

Center Image

Right Icon

Custom Content

Responsive

Bootstrap 5

Easy to Customize