Introduction

Hello,
Welcome to the official documentation of Blue. This page will help you customize the template the way you want, ready to start your businesss online.

Note: This template was built on Bootstrap 5. Feel free to check their documentation as well.

Quick Start

Bootstrap Css

The template depend on bootsrap css. copy the code below and add to the <head> 

<!-- Boostrap css -->
<link rel="stylesheet" href="assets/vendor/css/bootstrap.min.css">

Custom Css

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our css. 

<!-- Custom css -->
<link rel="stylesheet" href="assets/css/style.css">

Bootstrap Js

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them. 

<!-- Boostrap Js (Required) -->
<script src="assets/vendor/js/bootstrap.bundle.min.js"><script>

Custom Js (Optional)

The code below is not required for the template to function. Blue uses animations on some sections.

You can read more on Animate on Scroll

The custom js file helps with animation & sticky navigation on scroll. Ignore it if you do not need any of the above mentioned featurs 

<!-- Custom Js -->
<script src="assets/js/app.js"><script>

Starter Template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this: 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Title -->
    <title>Blue - Single product Onine store</title>

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">

    <!-- Css -->
    <link rel="stylesheet" href="assets/vendor/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
  </head>

  <body>
    <!-- All content start here -->

    
    <!-- All content ends here -->

    <!-- Js -->
    <script src="assets/vendor/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/app.js"></script>
  </body>
</html>
Next