Quick Start

Basic Installation

Steps to be follow for getting started with the static template:

Get details about Requirements, Basic Installation, Structure, Color mode, Logo, favicon and loader setup your project with easy steps.

Requirement

This template have required 2 depandency

  1. NodeJS
  2. Gulp

File Structure

Here is the general File structure of the template:

  • Template
    • gulp+scss+hbs
      • src
        • assets
          • images
            • All images regarding this templates
            • icon.png
            • favicon.ico
            • loader.gif
          • js
            • all .js files of templates
          • scss
            • bootstrap
              • forms
              • helper
              • mixins
              • utilites
              • vendor
            • Custom
              • All custom files
            • customizer
              • All files & folder regarding color customizer
            • dark
              • All files & folder regarding dark mode
            • rtl
              • All files & folder regarding rtl
            • streamit-design-system
              • components
                • All components files and folder
              • helper
                • All mixins and utilities files and folder
              • layout-style
                • layout regarding menu style
              • plugins
                • All plugins scss
              • variables
                • All files and folder of particular elements
              • variables.scss
          • vendor
        • templates
          • components
            • partials
              • all components which repeat continiously in all page. e.g. sidebar, header, footer, etc.
            • widgets
              • Widgets that are used globally in the dashboard. e.g. profile card in dashboard's sidebar.
          • layout
            • dashboard
              • all layout regarding dashboards
          • pages
            • all folders based on hbs file in dashboard
            • index.hbs
      • gulp
        • all gulp task here
      • gulp.config.json
      • gulpfile.js
      • package.json

Installation

Steps to be follow for getting started with the template:

Gulp

  1. Start command prompt window or terminal and change directory gulp+hbs 
    cd gulp+hbs
  2. Install via the npm 
    npm install
  3. For development 
    npm run watch:theme
    npm run watch:dashboard
  4. For build 
    npm run build
    OR 
    gulp build

HTML

  1. Open html Folder to find all the Templates Files
  2. You'll have to upload these file using a FTP on your server
  3. Make sure you maintain the structure while uploading the required files/folders:
    • assets/css - Stylesheets Folder
    • assets/fonts - Fonts Folder
    • assets/images - Images Folder
    • assets/js - Javacripts Folder
    • assets/videos - Video and Audio Folder
    • dashboard/index.html - Index File/Homepage
    Other files can be used according to your convenience.
  4. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Customization

Theme Colors

Steps to be follow for theme colors with the template:

  • We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Scss variables in scss/_variables.scss file.
  • More Customization will be done in variable file.

Here is the Change color of template in gulp+scss+hbs

$theme-colors: (
    ​$primary:       #e50914;
    ​$secondary:     #6c757d;
    ​$success:       #14e788;
    ​$info:          #007aff;
    ​$warning:       #ecba12;
    ​$danger:        #545e75;
    ​$light:         #e9ecef;
    ​$dark:          #000;
    ​$gray:          #6c757d;
    ​$gray-dark:     #343a40;
    ​);

For Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code:

<link rel="shortcut icon" href="images/favicon.ico"/>

For Page Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply delete below section

 <div id="loading" style="background: var(--iq-body-bg) url(../assets/images/loader.gif) no-repeat scroll center center;">
    <div id="loading-center">
    </div>
</div>

For Changing Fonts

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the Style.css in all HTML file. See example below:

 <!-- google font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300&display=swap" rel="stylesheet">

To include new font you can simply add another link like this: 

 <!-- google font -->
<!--Robaoto font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap" />

<!-- popins font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500&display=swap" rel="stylesheet">

In order to change the fonts, you will need to edit the above links with your custom font, You can easily use Google Web Font Services if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts

HTML Structure

Here is the general HTML structure of the template:

<!doctype html>
<html lang="en" dir="<!-- rtl OR ltr compare -->">
<head>
    [Page meta, page css, page js files, page title etc...]
</head>
<body class=" <!-- dark or light mode compare -->">
    <!-- Wrapper Start-->
        <!-- loader Start -->
        <div id="loading">
            [LOADER CONTENT]
        </div>
        <!-- loader END -->
        <!-- Sidebar Start -->
            [SIDEBAR CONTENT]
        <!-- Sidebar END -->
        <!-- Main Content Start -->
        <main class="main-content">
            <div>
                <!--Nav Start-->
                    [HEADER CONTENT]
                    [SUB-HEADER CONTENT]
                <!--Nav End-->
            </div>
            <div>
                [MAIN CONTENT]
            </div>
            <!-- Footer Start -->
                [FOOTER CONTENT]
            <!-- Footer END -->
        </main>
        <!-- Main Content End -->
    <!-- Wrapper End-->
</body>
<!-- Script Start -->
    [SCRIPT CONTENT]
<!-- Script END -->
</html>

CSS Structure

Here is the general CSS structure of the template:

<!-- Favicon -->
<link rel="shortcut icon" href="../assets/images/favicon.ico">
                                    
<!-- Font-awesome css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<!-- Library / Plugin Css Build -->
<link rel="stylesheet" href="../assets/css/core/libs.min.css">

<!-- Sheperd css -->
<link rel="stylesheet" href="../assets/vendor/sheperd/dist/css/sheperd.css">

<!-- Flatpickr css -->
<link rel="stylesheet" href="../assets/vendor/flatpickr/dist/flatpickr.min.css">

<!-- Streamit Design System Css -->
<link rel="stylesheet" href="../assets/css/streamit.min.css?v=1.0.1">

<!-- Custom css -->
<link rel="stylesheet" href="../assets/css/custom.min.css?v=1.0.1">
<link rel="stylesheet" href="../assets/css/dashboard-custom.min.css?v=1.0.1">

<!-- Dark css -->
<link rel="stylesheet" href="../assets/css/dark.min.css?v=1.0.1">

<!-- Customizer css -->
<link rel="stylesheet" href="../assets/css/customizer.min.css?v=1.0.1">

<!-- RTL css -->
<link rel="stylesheet" href="../assets/css/rtl.min.css?v=1.0.1">

<!-- Swiper css -->
<link rel="stylesheet" href="../assets/vendor/swiperSlider/swiper-bundle.min.css">

<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300&display=swap" rel="stylesheet">

<!-- Select2 css -->
<link rel="stylesheet" href="../assets/vendor/select2/dist/css/select2.min.css">

Javascript Structure

Here is the general Javascript structure of the template:

<!-- Library Bundle Script -->
<script src="../assets/js/core/libs.min.js"></script>

<!-- Tour plugin Start -->
<script src="../assets/vendor/sheperd/dist/js/sheperd.min.js"></script>
<script src="../assets/js/plugins/tour.js" defer></script>

<!-- Flatpickr Script -->
<script src="../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>
<script src="../assets/js/plugins/flatpickr.js" defer></script>
<script src="../assets/js/plugins/flatpickr.js?v=1.0.1" defer></script>

<!-- Select2 Script -->
<script src="../assets/js/plugins/select2.js" defer></script>
<script src="../assets/js/plugins/select2.js?v=1.0.1" defer></script>

<!-- Slider-tab Script -->
<script src="../assets/js/plugins/slider-tabs.js"></script>

<!-- SwiperSlider Script -->
<script src="../assets/vendor/swiperSlider/swiper-bundle.min.js"></script>
<script src="../assets/js/plugins/swiper-slider.js" defer></script>

<!-- Lodash Utility -->
<script src="../assets/vendor/lodash/lodash.min.js"></script>

<!-- Utilities Functions -->
<script src="../assets/js/iqonic-script/utility.js"></script>

<!-- Settings Script -->
<script src="../assets/js/iqonic-script/setting.js"></script>

<!-- Settings Init Script -->
<script src="../assets/js/setting-init.js"></script>

<!-- External Library Bundle Script -->
<script src="../assets/js/core/external.min.js"></script>

<!-- Widgetchart Script -->
<script src="../assets/js/charts/widgetcharts.js?v=1.0.1" defer></script>

<!-- Customchart Script -->
<script src="../assets/js/chart-custom.js?v=1.0.1" defer></script>

<!-- Dashboard Script -->
<script src="../assets/js/charts/dashboard.js?v=1.0.1" defer></script>

<!-- streamit Script -->
<script src="../assets/js/streamit.js?v=1.0.1" defer></script>
<script src="../assets/js/sidebar.js?v=1.0.1" defer></script>

Forms

Disable-Forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Examples
Disabled fieldset example 
<form>
<fieldset disabled="">
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
        <label for="disabledTextInput" class="form-label">Disabled input</label>
        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
        <label for="disabledSelect" class="form-label">Disabled select menu</label>
        <select id="disabledSelect" class="form-select">
            <option>Disabled select</option>
        </select>
    </div>
    <div class="mb-3">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled="">
            <label class="form-check-label" for="disabledFieldsetCheck">
                Can't check this
            </label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state. 

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled="">
<label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked="" disabled="">
<label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
</label>
</div>
Disable Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute. 

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled="">
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked="" disabled="">
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Examples
<div class="mb-3">
    <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
</div>
<div class="mb-3">
    <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
        <option selected="">Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>
<div class="mb-3">
    <input type="file" class="form-control form-control-lg" aria-label="Large file input example">
</div>
<div class="mb-3">
    <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
</div>
<div class="mb-3">
    <select class="form-select form-select-sm" aria-label=".form-select-sm example">
        <option selected="">Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>
<div class="mb-3">
    <input type="file" class="form-control form-control-sm" aria-label="Small file input example">
</div>

Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Examples

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

@
@example.com
https://example.com/users/
$ .00
@
With textarea 
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>

<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Alternate Input

Examples
@
@ 
<div class="bd-example">
<div class="form-group form-group-alt">
    <input type="text" class="form-control" placeholder="Enter Text">
</div>
<div class="form-group input-group form-group-alt">
    <span class="input-group-text" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Addon" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="form-group input-group form-group-alt">
    <input type="text" class="form-control" placeholder="Addon" aria-label="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-text" id="basic-addon2">@</span>
</div>
<div class="form-group form-group-alt">
    <input type="text" class="form-control is-valid" placeholder="Enter Text">
</div>
<div class="form-group form-group-alt">
    <input type="text" class="form-control is-invalid" placeholder="Enter Text">
</div>
<div class="form-group">
    <input type="text" class="form-control is-valid" placeholder="Enter Text">
</div>
<div class="form-group">
    <input type="text" class="form-control is-invalid" placeholder="Enter Text">
</div>
</div>

Floating Lable

Examples

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. 

<form>
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
    <label for="floatingPassword">Password</label>
</div>
<div class="form-floating form-group mb-3">
    <input type="email" class="form-control" disabled="" id="floatingInput" placeholder="Place Holder">
    <label for="floatingInput">Regular</label>
</div>
<div class="form-floating form-group mb-3">
    <input type="email" class="form-control is-valid" id="floatingInput" placeholder="Place Holder">
    <label for="floatingInput">Regular</label>
</div>
<div class="form-floating form-group">
    <input type="email" class="form-control is-invalid" id="floatingInput" placeholder="Place Holder">
    <label for="floatingInput">Regular</label>
</div>
</form>

Alternate Float Lable

Examples
<div class="form-floating custom-form-floating custom-form-floating-sm form-group mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="Place Holder">
    <label for="floatingInput">Small</label>
</div>
<div class="form-floating custom-form-floating form-group mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="Place Holder">
    <label for="floatingInput">Regular</label>
</div>
<div class="form-floating custom-form-floating custom-form-floating-lg form-group mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="Place Holder">
    <label for="floatingInput">Large</label>
</div>
<div class="form-floating custom-form-floating form-group mb-3">
    <input type="email" class="form-control" disabled="" id="floatingInput" placeholder="Place Holder">
    <label for="floatingInput">Regular</label>
</div>
<div class="form-floating custom-form-floating form-group mb-3">
    <input type="email" class="form-control is-valid" id="floatingInput" placeholder="Place Holder">
    <label for="floatingInput">Regular</label>
</div>
<div class="form-floating custom-form-floating form-group mb-3">
    <input type="email" class="form-control is-invalid" id="floatingInput" placeholder="Place Holder">
    <label for="floatingInput">Regular</label>
</div>

Toggle Button

Examples
Checkbox

Place any checkbox or radio option within an input group’s addon instead of text. We recommend adding .mt-0 to the .form-check-input when there’s no visible text next to the input. 

<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
        Checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="">
<label class="form-check-label" for="flexCheckChecked">
    Checked 
</label>
</div>
Disable Checkbox

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state. 

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
    <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
    <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
    </label>
</div>
Radio

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute. 

<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
    Default radio
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
    </label>
</div>
Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state. 

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled="">
<label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked="" disabled="">
<label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
</label>
</div>
Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute. 

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked="">
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
Disable Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute. 

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled="">
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked="" disabled="">
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

Examples
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="row g-3">
<div class="col-md-4">
    <label for="validationServer01" class="form-label">First name</label>
    <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required="">
    <div class="valid-feedback">
        Looks good!
    </div>
</div>
<div class="col-md-4">
    <label for="validationServer02" class="form-label">Last name</label>
    <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required="">
    <div class="valid-feedback">
        Looks good!
    </div>
</div>
<div class="col-md-4">
    <label for="validationServerUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
        <span class="input-group-text" id="inputGroupPrepend3">@</span>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required="">
        <div class="invalid-feedback">
            Please choose a username.
        </div>
    </div>
</div>
<div class="col-md-6">
    <label for="validationServer03" class="form-label">City</label>
    <input type="text" class="form-control is-invalid" id="validationServer03" required="">
    <div class="invalid-feedback">
        Please provide a valid city.
    </div>
</div>
<div class="col-md-3">
    <label for="validationServer04" class="form-label">State</label>
    <select class="form-select is-invalid" id="validationServer04" required="">
        <option selected="" disabled="" value="">Choose...</option>
        <option>...</option>
    </select>
    <div class="invalid-feedback">
        Please select a valid state.
    </div>
</div>
<div class="col-md-3">
    <label for="validationServer05" class="form-label">Zip</label>
    <input type="text" class="form-control is-invalid" id="validationServer05" required="">
    <div class="invalid-feedback">
        Please provide a valid zip.
    </div>
</div>
<div class="col-12">
    <div class="form-check">
        <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required="">
        <label class="form-check-label" for="invalidCheck3">
            Agree to terms and conditions
        </label>
        <div class="invalid-feedback">
            You must agree before submitting.
        </div>
    </div>
</div>
<div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>

Contents

Typography

Display Heading

When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

<div class="bd-content">
    <p class="display-1">Display 1</p>
    <p class="display-2">Display 2</p>
    <p class="display-3">Display 3</p>
    <p class="display-4">Display 4</p>
    <p class="display-5">Display 5</p>
    <p class="display-6">Display 6</p>
</div>
Display Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<p class="h1">Heading 1</p>
<p class="h2">Heading 2</p>
<p class="h3">Heading 3</p>
<p class="h4">Heading 4</p>
<p class="h5">Heading 5</p>
<p class="h6">Heading 6</p>

Inline text elements

Styling for common inline HTML5 elements.

  • <mark> represents text which is marked or highlighted for reference or notation purposes.
  • <small> represents side-comments and small print, like copyright and legal text.
  • <s> represents element that are no longer relevant or no longer accurate.
  • <u> represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Images

Responsive Images

Images are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="...">
Image thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." class="img-thumbnail" alt="...">

Tables

Using the most basic table markup,.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 colspan="2">Larry the Bird</td>
    <td>@twitter</td>
</tr>
</tbody>
</table>

Varients

Use the required class variant (e.g. table-primary, table-secondary) for color.

Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell 
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
    <td class="table-primary">...</td>
    <td class="table-secondary">...</td>
    <td class="table-success">...</td>
    <td class="table-danger">...</td>
    <td class="table-warning">...</td>
    <td class="table-info">...</td>
    <td class="table-light">...</td>
    <td class="table-dark">...</td>
</tr>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
    ...
</table>

Figures

Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.

Placeholder 400x300
A caption for the above image. 
<figure class="figure">
    <svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg>
    <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

For Swiper Slider

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online Swiper Slider Documentation.

For Video Js

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online video js Documentation.

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.:

Tool
Images
Scripts
Plugins
CSS & Fonts

Change Log

Version 5.2.0
25/04/2024
  • Update: Dashboard Bootstrap To v5.3
  • Fixes: Theme bugs
Version 5.1.0
30/11/2023
  • Update: bugfixed
  • Update: Bootstrap v5 To v5.3
    • Note: ( Don't Replace new code file with the old file )
Version 5.0.0
17/11/2023
  • Added: Handlebar JavaScript templating system
  • Added: Gulp uses JavaScript code to run front-end tasks
  • Added: Featuring options to customize theme colors, menu colors, menu styles, active menu styles, layout styles, and directions.
  • Updated: Latest Framework Bootstrap 5.0
  • Updated: CSS style change with latest SCSS Advance Styling
  • Fixing : Full Code Optimize fast and reliable
    • Note: ( Don't Replace new code file with the old file )
Version 4.2.0
04/05/2023
  • Fix: Laravel 10 supported
Version 4.1.0
08/09/2022
  • Update : React-17 to React-18
Version 4.0.0
01/04/2022
  • Html slick to swiper slider bracking changes
  • Added 5+ new page
  • Laravel working role based auth, user, permission module
Version 3.3.0
12/08/2021
  • Added: RTL support for Laravel
  • Added: RTL support for NUXT
Version 3.2.0
10/08/2021
  • Added: RTL support for HTML & Vue
Version 3.1.0
14/05/2021
  • VUEJS auth layout issue fixed
Version 3.0.0
24/11/2020
  • Added Nuxt Version
  • Changes Slider button in HTML & VUE
  • Fixed Vue Responsive Issue
Version 2.0.0
21/09/2020
  • Added Vue Version
  • Fixed Minor Issue
Version 1.0.0
29/08/2020
  • Initial release of Streamit