Introduction

Veltrix is a fully featured, multi-purpose admin template built with Bootstrap 4, HTML5, CSS3 and jQuery. It’s a fully responsive and have a very clean user interface that comes with a huge collection of components, widgets, UI elements. We have maintained the best quality code for all versions so your developer can easily customize it as per your requirements. It is a professional and flexible admin template and can be used to build all kind of projects.

Veltrix is easily customizable and built with developer-friendly codes. It will help your team moving faster and saving development costs and valuable time.

If you’re a developer looking for an admin dashboard that is fully responsive with Bootstrap then you are at the right place to start your project using Veltrix - HTML Responsive Bootstrap 4 Admin Dashboard.

Veltrix contains lots of new design widgets with responsive on all screens. Also, there are 7+ different types of Layouts we have added and also preloader for loading page. It is very easy to change any layout in your existing running application. We have written minimum SCSS and codes to increase performance.

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via our profile page or sent email on themesbrand@gmail.com

Structure

Extract the zip file you received after purchase and you would find the exact below files and folders:

├── dist
├── src
    ├── assets
        ├── fonts
        ├── images
        ├── js
        └── scss
    ├── partials
    └── all html files
├── gulpfile.js
└── package.json

Setup

Veltrix - HTML Responsive Bootstrap 4 Admin Dashboard. We have used gulp which allows having complete automation for build flow. In case if you don't know Gulp then it's easy to use it. Gulp is a toolkit for automating painful or time-consuming tasks in the development workflow, so you can stop messing around while building any project. You can read it more about it here. Please follow below steps to install and setup all prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

• Nodejs

  Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 10.

• Gulp

  Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on your computer, you can skip this step. To install, just run command npm install -g gulp from your terminal.

• Git

  Make sure to have the Git installed & running on your computer. If you already have installed git on your computer, you can skip this step.

Installation

To setup the admin theme, follow below-mentioned steps:

• Install Prerequisites

  Make sure to have all above prerequisites installed & running on your computer

• Install Dependencies

  Open your terminal at the root directory of the project, go to your folder and enter the command npm install. This would install all the required dependencies in the node_modules folder.

After you finished with the above steps, you can run the following commands to run the project locally or build for production use:

Command	Description
gulp	Runs the project locally, starts the development server and watches for any changes in your code, including your HTML, javascript, sass, etc. The development server is accessible at http://localhost:3000.
gulp build	Generates a /dist directory with all the production files.

Layouts

Veltrix has 7 different layouts. You can launch your new website in any layouts quickly. You can change any layout in less then a minute without changing any CSS and JS files!

Vertical

Horizontal

If you would like to have Horizontal Menu (or Topnav) based layout, simply include file partials/horizontal.html file E.g. @@include('partials/horizontal.html').

In order to add, change or remove any ui elements from the top bar, simply edit in file src/partials/horizontal.html. The change would reflect in all the files automatically.

How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform:

Dark

In order to have dark mode enabled, replace the reference of bootstrap.min.css stylesheet file to bootstrap-dark.min.css and app.min.css to app-dark.min.css

RTL

In order to have RTL mode enabled, replace the reference of app.min.css to app-rtl.min.css

Plugins

Here is the list of Plugins (with a link to the official documentation) which helped us to make admin better.