Documentation

Introduction
preview

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

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

# 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 -->
# 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 -->
 
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 -->
 
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.

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.

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.

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

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.

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.

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

Usage Example

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.

Left Aligned Content

Mauris tempus euismod tempus. Vestibulum aliquet.

Center Image

Quisque in suscipit nulla. Maecenas id pulvinar est.

Right Icon

Quisque in suscipit nulla id pulvinar.

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

Promo Box with Column Line Separators

Responsive

Mobile-first approach, it works well on mobile.

Bootstrap 5

Built with Bootstrap 5, using Vanilla JS plugins

Customize

Sass files are included for fast and easy styling.

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