Documentation template with Bootstrap 5 and Vite.js

Introduction

This is a beautifully crafted free documentation UI kit template with a modern sleek design, built on Bootstrap 5 and Vite. You are welcome to download it and easily customize for your needs.

Getting started

This guide will get you all set up and ready to go with this documentation template. We will cover how to get started quickly and view a couple of customization techniques.

Quickstart

First clone the GitHub repository, then cd into the project folder in a new terminal window and install the dependencies then run the development server.

git clone https://github.com/eriktailor/BootstrapDocsTemplate.git
npm install && npm run dev

View template

Now if you go to http://localhost:8080 you will see the frontend. The layout has a fixed sidebar on the left side, and a scrollable main content area at the middle. The sidebar contains a navigation menu, which links are dynamically generated from each section block's title. There's also a lightweight footer at the bottom of the page.

Used sources

The following free resources were used along with this project:

• Bootstrap - the latest version, Bootstrap 5 gives the base structure of the template
• Vite.js - a new generation frontend developer tooling
• Sass - the most popular css preprocessor to write advanced styles
• GitHub - version controller tool, used to maintain the updates of the project
• Unicons - a free collection of scaleable and colorable svg UI icons
• Prism.js - a javascript library for syntax highlighting code blocks

Folder structure

The dist folder contains the built files for production. The src folder contains all of the source files. The design folder contains the editable Sketch file of the design. Below you can see the structure of the main project folder:

Dependencies

There are a few npm dependencies need to be installed before serving the project:

• popperjs - a positioning solution for tooltips and popovers
• autoprefixer - a postcss plugin that adds vendor prefixes to the output css files
• bootstrap - latest version of Bootstrap, what is a powerful and extensible frontend toolkit
• postcss - a tool for transforming CSS with JavaScript (required for using autoprefixer)

Note: to be able to install these packages via npm, you need to have Node.js installed on your system.

Core concepts

And yet still further pondering while I jerked him now and then from between the whale and ship, which would threaten to jam him still further pondering, I say saw that this situation of mine was the precise situation.

Coding rules

True, you may say that, by exceeding caution, you may possibly escape these and the multitudinous other evil chances of life. But handle queequeg monkey-rope heedfully as I would, sometimes he jerked it so, that I came very near sliding overboard.

<section id="example">
    <div class="container">
        <h2>My amazing title</h2>
        <p>This is the description text</p>
    </div>
</section>

True, you may say that, by exceeding caution, you may possibly escape these and the multitudinous other evil chances of life. But handle Queequeg's monkey-rope heedfully as I would, sometimes he jerked it so, that I came very near sliding overboard.

$('#settingsCompanyLogo').change(function() {
    let reader = new FileReader();
    reader.onload = (e) => { 
        $('#settingsCompanyLogoPreview').attr('src', e.target.result); 
    }
    reader.readAsDataURL(this.files[0]); 
});

Available tags

You can use these html5 tags to define your layout base:

Create project

Follow these steps to create a brand new project to your portfolio:

1. If you are going to use a passage of Lorem Ipsum
2. All the Lorem Ipsum generators on the Internet tend to repeat
3. It uses a dictionary of over 200 Latin words, combined with a handful
4. In most cases, he, one way or other, has this with a plurality of other mortals
5. If your banker breaks, you snap; if your apothecary by mistake sends you poison

Advanced

Nor could I possibly forget that, do what I would, I only had the management.

Integrations

So strongly and metaphysically did I conceive of my situation then, that while earnestly watching his motions, I seemed distinctly to perceive that my own individuality was now merged in a joint stock company of two; that my free will had received.

Sketch

Mac app for designers to create, team up, prototype, and more.

GitHub

GitHub is a code hosting platform for version control.

Trello

It empowers your team to manage any type of project.

Slack

Slack is a messaging app what brings people together.

Todoist

It keeps track of professional and personal projects.

Google Drive

It is a cloud-based storage service to access files online.