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
File Structure
*Click on the folder () icons to open / close them.
- 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
- 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
- _components.scss
- _media-screens.scss
- _mixins.scss
- _sections.scss
- _ui.scss
- _utility.scss
- _variables.scss
- doc.scss
- style.scss
- 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>Content
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 |
<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 |
<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 -->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
<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
<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 -->