Introduction

Welcome to the documentation for our HTML templates. Whether you're a beginner or experienced developer, this guide covers everything you need to build and customize your website with ease.
Dive in and start creating something amazing!

Resources and credits:

This template is fully coded and built on top of Open Sources, more details here:

  • Bootstrap : Open-source front-end framework.
  • Popper.js : This is an excellent library for handling poppers.
  • AOS : Animate on scroll library.
  • Prism : A lightweight, extensible syntax highlighter (We used it to improve the visual appearance of the documentation).
  • Glide : A lightweight, flexible, and fast JavaScript ES6 slider and carousel. Built for sliding.
  • GLightbox : A touchable pure Javascript lightbox with mobile and video support.
  • Typed : A JavaScript typing animation library.
Images:

Our template includes high-quality images from Unsplash, Pexels, and Pixabay. When needed, we use AI to create unique visuals. All images are included to inspire and enhance your projects.

How to Change Images in the Template: There are two common ways to use and replace images in this template: with an <img> tag or via CSS background style.

Steps (for both methods):

  • Find your new image (on your computer).
  • Rename it (optional) to match the old file name for easy replacement.
  • Upload it to the same folder (e.g., /assets/img/ or /assets/logo/).
  • Update the HTML:

    A. Using <img> tag:

    B. Using background style:

  • Save and refresh your browser to see the update.
Icons:

Through most of the examples in this template, we are using Bootstrap Icon and Heroicons . So, all you need to do is to add icons using the <svg> tag directly to your HTML code. Here's an example:

And sometimes, we used other icons in the SVG format from these icons libraries:
Lucide Icons , Google Icons , Tabler Icons , Fontawesome Icons .

Quick start

To start using this template you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).

Note: By default all of these quick starts are configured on the template, so don't worry!

Tooling setup:
CSS

Copy and paste the following <link> tags into your <head>, before all other stylesheets, to load our CSS:

JavaScript

Some components require Bootstrap’s JavaScript to function properly. Include the following <script> tags just before the closing </body> tag. Popper.js is already included in bootstrap.bundle.min.js.

Bootstrap starter template

Use the HTML5 doctype and viewport meta tag to follow modern design and responsive standards. Your page should look like this:

Important globals:

This template includes key global styles to ensure consistent behavior across browsers.

HTML5 doctype

Bootstrap needs the HTML5 doctype to work properly; without it, styles may break.

Responsive meta tag

Bootstrap uses a mobile-first approach. Add the viewport meta tag in your <head> for proper scaling and touch support.

Bootstrap Documentation

If you want to learn more, we recommend you check the Bootstrap documentation, click here for the documentation

RTL: Right to Left Laguages

RTL means Right to Left laguages like Arabic and Hebrew. Learn how to enable support for right-to-left text in our template:

There are two strict requirements for enabling RTL in Bootstrap-powered pages.

  • Set dir="rtl" on the <html> element.
  • Add an appropriate lang attribute, like lang="ar", on the <html> element.

From there, you’ll need to include an RTL version of our CSS (main.min.rtl.css). Example:

Color Modes (Light, Dark, and Auto Mode Toggle)

This template has a top-right toggle for light, dark, and auto modes. In auto mode, it follows the user's device settings.

Note: The toggler initially defers to a user’s current system color mode but provides an option to override that and pick a specific color mode.

Enabling the Toggle

To enable the light, dark, and auto mode toggle, you need to include the color-modes.js file at the top of your HTML document, just after the opening <head> tag (By default it is included!):

Bootstrap Documentation

For details on customizing light and dark modes, including Sass variables and the data-bs-theme attribute, see the official Bootstrap documentation.

Compiling SCSS and Managing Dependencies

Prerequisites: For smooth SCSS compilation, use the latest Node.js LTS version. It ensures a stable and reliable development environment. Follow these steps to effectively compile Bootstrap SCSS and manage dependencies:

1. Navigate to the SCSS Folder

Start by locating the target SCSS folder within your project directory. This is where the SCSS files, including those for Bootstrap, are stored.

2. Install Dependencies and devDependencies

Once Node.js is installed, open your terminal and execute the following command to install the required dependencies:

This command will fetch and install the dependencies outlined in your project's package.json file.

3. Make Desired Changes

Feel free to make any necessary changes to your SCSS files. This could involve adjusting Bootstrap variables, customizing styles, or adding your own stylesheets.

4. Compile to Minified CSS

To compile your SCSS files, including Bootstrap's SCSS, into a minified CSS file, execute the following command:

This command compiles and outputs a minified main.min.css file to assets/css/.

5. Compile To Unminified CSS

If you prefer to compile the SCSS files without minification, use the following command:

This command compiles and outputs an unminified main.css file to assets/css/.

6. Example: Changing the Website’s Color Scheme Using SCSS

To change the site’s color scheme, edit _color_palette.scss in assets/scss/ — you’ll find primary, text, and background color variables at the end.

Note: Customize colors by editing SCSS variables.
Use uicolors.app/create to generate shades (50–950) and match your brand.

7. Generating RTL CSS File

First install the rtlcss package, by executing the following command: (You can learn more on this guide: rtlcss.com)

To create a right-to-left (RTL) version of your main.min.css for languages that read from right to left, execute the following command at the same folder that locate main.min.css file:

Running this command will transform your main.min.css into main.min.rtl.css, which can be used to support RTL languages.

Colors

Use color utility classes to convey meaning and style elements, including hover effects. The primary palette is neutral and used throughout the template.

1 - Background colors:
.bg-primary
.bg-primary-subtle
.bg-secondary
.bg-secondary-subtle
.bg-success
.bg-success-subtle
.bg-danger
.bg-danger-subtle
.bg-warning
.bg-warning-subtle
.bg-info
.bg-info-subtle
.bg-light
.bg-light-subtle
.bg-dark
.bg-dark-subtle

.bg-body-secondary

.bg-body-tertiary

.bg-body
.bg-black
.bg-white
.bg-transparent
2 - Text colors:

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

Changing the Font Family

If you'd like to customize the font-family used throughout the template, it's a straightforward process. By following these steps, you can easily modify the font-family to better match your design preferences.

Step 1: Locate the style.css File

First, locate style.css in ./assets/css/. It's included on all pages.

Step 2: Identify the Font Import

At the top of style.css, you’ll see an @import rule for the current font. Example:

Step 3: Change the Font Family

To change the font, find the font-family in the CSS (usually under body) and replace 'Inter var' with your preferred font—local or imported.

Step 4: Save Your Changes

After editing font-family, save style.css. The new font will apply site-wide for consistent styling.

Updating Meta Tags and Title Tags for SEO and Social Sharing

Update the meta, title, Twitter Card, and Open Graph tags in your HTML head to improve social sharing and SEO. This controls how your content appears on social platforms and search engines like Google and Bing. Here’s an example of the head section:

Note: You can use a favicon generator tool to convert your logo to a favicon in different formats. For example, you can use the tool at favicon.io to upload your PNG image and download your favicon in ICO and PNG formats.

Tip: Upload a square image for best results. You can also generate favicons from text or emojis using that tool!

Note: Be careful if you change the site.webmanifest file, as you need to update the src attribute of the icons array to match the new path of your icon files. Otherwise, your icons may not display correctly on some devices.

Utilities (Our Custom SCSS)

Bootstrap has a lot of utility/helper classes to quickly style elements without using any CSS code. See the official Bootstrap documentation. We also made some changes to the SCSS, including spacing (margins, padding), sizing (max-width, max-height, width, height), and more to better fit the design.

Spacing Utilities

We’ve customized Bootstrap’s spacing utilities in our own SCSS. This includes changes to spacing values (margin, padding, gap, and gutters) to better fit the design system.

Example: Margin

Use directional classes like .mt-*, .mb-*, .ms-*, .me-*, .mx-*, .my-* for specific sides. They are responsive too (e.g., mt-sm-4).
For negative margins, add n before the value (e.g., .mt-n1 → margin-top: -0.25rem).

Sizing: Max-Width & Max-Height

Use these utilities to set the maximum width or height of an element. The max-height utilities follow the same pattern as max-width.

Example: Max-Width

Sizing: Width & Height

These utilities are for setting the width or height of an element. The .h-* classes for height follow the same sizing pattern as the .w-* classes for width.

Example: Width

Borders: Border Radius

Use the .rounded-* utilities to control the border-radius of an element. These classes are also responsive, like .rounded-sm-6.

  • All Sides: Use .rounded, .rounded-0, .rounded-1, etc., to apply the radius to all corners.
  • Specific Sides: Target specific sides with -top, -end, -bottom, and -start.
  • Shapes: Use .rounded-circle for a perfect circle and .rounded-pill for a pill shape.

Example: rounded

Effects: text-shadow

Utilities for controlling the shadow of a text element. These classes work seamlessly in both light and dark modes, automatically adapting to your theme:

Example:

An optimized Workflow.

An optimized Workflow.

An optimized Workflow.

An optimized Workflow.

An optimized Workflow.

An optimized Workflow.

Effects: mask-image

To apply mask effects, start with the base .mask-image class to enable masking capabilities. Combine it with directional modifiers and percentage controls, plus responsive disable utilities when needed:

  • Base class: .mask-image (required for all mask effects)
  • Direction modifiers:
    • .mask-top (top fade)
    • .mask-bottom (bottom fade)
    • .mask-start (start - auto-flips for RTL/LTR)
    • .mask-end (end - auto-flips for RTL/LTR)
  • Percentage controls:
    • .mask-{direction}-from-{0,10,25,50,75,90,100} (fade from position)
    • .mask-{direction}-to-{0,10,25,50,75,90,100} (fade to position)
  • Responsive Disabling:
    • .mask-none-{xs,sm,md,lg,xl,xxl} (disables mask for specific breakpoint ranges)
Example:
without .mask-image
Demo
.mask-top
Demo
.mask-bottom
Demo
.mask-bottom .mask-end
Demo

Typography (Our Custom SCSS)

Refine your text with our versatile typography classes. Easily customize font-size, line-height, letter-spacing, and text clamping to ensure your content looks great on all devices.

Font Size

Utilities for controlling the font size of an element.

Line Height

Utilities for controlling the leading (line-height) of an element.

Letter Spacing

Utilities for controlling the tracking (letter-spacing) of an element.

Line Clamp

Utilities for clamping text to a specific number of lines.

Contact Form Configuration (PHP)

Now, let's discuss setting up the contact form so that you can receive messages by adding your email.

1 - PHP Configuration

To receive messages from the contact form, you'll need to update the email address in the email.php file, which is located in the ./assets/php directory. Simply replace "Your_Email@example.com" with your own email address.
Note: Be sure to check your spam or junk folder if you don't see the email in your inbox.

2 - JavaScript Functionality

Make sure you have the ./assets/js/scripts.js javascript file at the bottom of the page. (By default it is included!)

Subscribers Form Configuration (Mailchimp)

This section will guide you through getting the action URL from a Mailchimp embedded form. This URL is all you need to connect the template's subscriber form to your Mailchimp account, allowing you to easily collect email subscribers.

Here's what you need to do:

  • Log in to your Mailchimp account and navigate to the audience dashboard.
  • Select the audience for which you want to create the embedded form:
    Mailchimp Screen
  • Click on the Signup Forms tab:
    Mailchimp Screen
  • Click on the Create embedded form:
    Mailchimp Screen
  • Fill out the inputs: Embedded form name and select the Audience, then click Begin button.
    Mailchimp Screen
  • Click on the Continue button:
    Mailchimp Screen
  • You should see a code snippet that begins with <form action="...".
    Copy only the URL part of the action attribute and remove the quotation marks around it, as shown on this screen:
    Mailchimp Screen
  • In the assets/js/scripts.js file, find the formActionURL constant, which is typically defined at the beginning of the file:
    Mailchimp Screen
  • Next, replace enter_your_form_action_url_here with the URL you copied from Mailchimp and save the file.
    Mailchimp Screen
  • And don't forget to include scripts.js at the bottom of your page, (by default it is included!):

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples with icons:

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Variant buttons
Soft buttons
Outline buttons

Social Buttons

Pure HTML and CSS Bootstrap social buttons.

Examples

Algolia Search

Algolia is a powerful search-as-a-service platform with a REST API for indexing and searching data. It is an excellent solution for enhancing your static site with robust search functionality.

To get started, you'll need three pieces of information from Algolia:

  • Application ID: This is a unique identifier for your application.
  • Search API Key: This key is used to search the index.
  • Index Name: The name of the index you've created (Usually, this is the name of the JSON file you uploaded!).
Algolia Setup

Creating an Account and an Application: If you haven't done so already, create an account with Algolia.

When you create an account for the first time, a default application named My First Application is automatically created for you. You can use this application instead of creating a new one. Or if you want, you can create a new application by using this link: create an application.

Algolia Screen
Populating the Index

To enable search functionality, we need to populate the index with data. For now, we will use the Algolia UI to do this. Here’s how to do it using the Algolia UI: When you click on My First Application, you'll see something like the following screenshot, and then click on the upload a file card.

Algolia Screen

Then, a pop-up window will appear, where you need to upload the JSON file.

Algolia Screen

The JSON file is located at assets/img/algolia/algolia-json.json. Open it with your favorite text editor, such as Sublime Text or VS Code. Make the necessary changes to fit your website content, and then upload the updated file.

Alternatively, you can copy this example and create a new file:

When the file uploaded, then choose title for the primary text field and description for the secondary text field. As shown on this example:

Algolia Screen

And then click the Continue button three times. Then copy the Application ID and Search API Key

Algolia Screen

Once you have this information from the Algolia platform, paste these values into the variables located at the top of the scripts.js file found in the assets/js/ directory (by default the file is included!), like this:

Including the Search Button for Algolia

To enable the search functionality with Algolia and trigger the search modal, ensure you include the following button code in your HTML file. This button, when clicked, will open the search modal, allowing users to perform searches using Algolia. This code is included in the file by default:

Note:

Ensure you have the following files in these folders:

  • assets/libraries/algolia/algoliasearch-lite.umd.js
  • assets/libraries/algolia/instantsearch.production.min.js

We have included a script located in assets/js/scripts.js. This script dynamically includes the above files and creates the search modal. To enable this functionality, simply include the scripts.js file at the bottom of your HTML file.

Here’s how you can include the scripts.js file: (by default the file is included!)

CSS Modification:

We've added some CSS to modify its style. It is located on the assets/css/style.css. (by default it is included!)

Additionally, you can learn more about setting up Algolia search in this blog post.

Animation: AOS

AOS: CSS-Driven “On Scroll” Animation Library.

How AOS Works

AOS animates elements on scroll by adding or removing the aos-animate class based on their position. All visual animation is controlled entirely by CSS.

Here are some examples of how you can use it:

And you need to include some packages: (They are included by default!)

CSS Package:
JS Package:

This is how we initialize it:

This is initialized by default at the file scripts.js located a the folder path: assets/js/

Countdown Timer

This section provides a step-by-step guide for editing a countdown timer on an HTML page. By following the instructions, you can easily update the launch date and time of your countdown. Let's dive in!

  • Open the HTML file containing the countdown in your preferred text editor.
  • Look for the line of code that sets the data-future-date attribute. It should look something like this:
  • Change the date and time to your desired launch date and time, while making sure to maintain the exact format. For example:
    Please use the short forms for the months like this:
    • January: Jan
    • February: Feb
    • March: Mar
    • April: Apr
    • May: May
    • June: Jun
    • July: Jul
    • August: Aug
    • September: Sep
    • October: Oct
    • November: Nov
    • December: Dec
  • And don't forget to include scripts.js at the bottom of your page, (by default it is included!):
  • Save the changes you modified from the HTML file.
  • Open the HTML file in your web browser to confirm that the countdown has been updated to reflect the new launch date and time.

And that's it! You've successfully edited the countdown on your HTML page.

Embed Videos

This template provides support for embedding videos. for Youtube, Vimeo, and locally hosted videos. let's start with the hardest one which is Modal (or popups) videos.

Modal Videos:

The button that triggers the modal should have these attributes: class="video-play-button video-btn-modal" , type="button" data-bs-toggle="modal", data-bs-target="#videoModal" data-bs-src="https://www.youtube.com/embed/YourIdHere".
You can find YourIdHere from Youtube when you click Share Button -> Embed Button
Look at iframe, you can find src="https://www.youtube.com/embed/YourIdHere" and Change it!!

For modal you need to have it like this example:

For Javascript, we have added the script to make it work on scripts.js file. So include the file at the bottom (by default it is included!) or use this code:

Simple embedding
1 - Embedding Youtube & Vimeo videos:

To embed a YouTube video on a webpage, follow these steps:

  • Find the video you want to embed on YouTube and click on the share button below the video.
  • Click on the embed button. This will display a piece of code that you can copy.
  • Copy the code and paste it into the HTML of your webpage.
  • The video will now be embedded on your webpage and will be displayed to visitors when they visit your site.

Note: You may also need to adjust the width and height of the iframe element to ensure that the video is displayed properly on your webpage.

Example:

2 - Local Hosted Video:
To add a locally hosted video to an HTML page, you can use the video element. Here's how:
  • Create a video element in the HTML of your webpage.
  • Use the src attribute to specify the location of the video file. For example:
  • You can also use the controls attribute to display playback controls for the video, like so:
  • If you want to support multiple video formats, you can use the source element to specify multiple sources for the video. For example:

Google Maps

To embed a Google Map on a webpage, you can use the Google Maps Embed API. Here's how:

  • Go to the Google Maps website and search for the location you want to display on the map.
  • Click on the Share or embed map button and then click on the embed map tab.
  • Customize the size and appearance of the map using the options provided, then click on the copy HTML button to copy the embed code.
  • Paste the embed code into the HTML of your webpage. The map will now be displayed on your webpage and will be interactive for your visitors.
  • Note: To ensure the map matches the template's design, you should only update the src attribute in the example code below. Copy the URL from the code provided by Google Maps and paste it into the src attribute, keeping all other attributes like class and style the same.
Example:

Typed

Typed.js is a library that types. Enter in any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set. Live Demo

The README on GitHub is going to be very helpful for any questions, features, or use cases.

Text animation example:

Unlock the power of

creativity innovation collaboration technology inspiration
Input example:
Find your perfect stay... Search for homes, apartments, and more... Discover unique places to stay... Explore top-rated rentals... Start your adventure... Book a cozy getaway... Find a family-friendly home... Explore beachside retreats... Discover city apartments...

And you need to include a JS package at the bottom: (It's included by default!)

For Javascript, we have added the script to make it work on scripts.js file. So include the file at the bottom (by default it is included!) or use this code:

Note: If you want to include multiple Typed.js instances on the same page, ensure each instance uses unique IDs, like typed2 and typed-strings2, to avoid conflicts. Use the appropriate function (initializeTyped or initializeTypedInput) to reinitialize the JavaScript code with the corresponding unique IDs. This guarantees that each Typed instance operates independently, allowing for multiple animations without interference. Adjust the initialization options according to your specific requirements for each instance.

tsParticles

To add particles to the background of a webpage, you can use a library such as tsParticles.js.

Here's how:
  • Include the following tsparticles.bundle.min.js near the end of your page, right before the closing </body> tag, to enable them. (by default it is included!)
  • Create a div element in your HTML page where you want the particles to be displayed. Give the div element an ID so you can reference it in your JavaScript code. For example:
  • Include the JavaScript function to your HTML page that initializes the particles. The function should use the tsParticles.js library to create a new particle effect and display it in the div element you created earlier.
    The JavaScript function is located in the scripts.js file. (by default it is included!)
    Note: it should be included after tsparticles.bundle.min.js!
Particles Options

If you want only to make some changes:

  • Go to tsParticles.JS Demo / Generator. Edit whatever you need from the panel on the left side.
  • After you're happy with the settings, click on More dropdown at the top left corner.
  • And then click on Export Config. Scroll to the bottom and then click the Copy button.
  • Open the scripts.js file in your text editor, and search for the optionTsParticles object and then changed it to the new data that you copied before.

Here is a portion of the JavaScript code: (by default it is included!)

Note: You can find more information about tsParticles on this Github Repository

CSS Modification:
We've added some CSS to modify its style. It is located on the assets/css/style.css. (by default it is included!)

Add Another Particle Container:

To add another particle container, create another div with a different id (e.g., tsparticles2) and load it using tsParticles.load with the new options or the same option as before.

Filters

Use the .filter class to apply CSS filter effects to an element. Supported filters include blur, brightness, contrast, drop-shadow, grayscale, and saturation.

Note: To disable the filter, use the .filter-none class or .filter-none-hover on hover to disable the filter effects.

To apply the filter effects , use the .filter class to define the desired effects. You can then combine it with one or more of the following classes like: .filter .blur-3xl .brightness-105 .grayscale-100

1 - Blur:
Example:
without blur
Demo
.blur-xs
Demo
.blur-sm
Demo
blur-lg-hover
Demo
2 - Brightness:
Example:
without brightness
Demo
.brightness-50
Demo
.brightness-125
Demo
brightness-150-hover
Demo
3 - Contrast:
Example:
without contrast
Demo
.contrast-50
Demo
.contrast-125
Demo
contrast-200-hover
Demo
4 - Drop Shadow:

Note: This is useful for applying shadows to irregular shapes, like text and SVG elements. For applying shadows to regular elements, you should probably use a box-shadow instead like .shadow-sm, .shadow, and .shadow-lg classes.

Example:
without drop-shadow
.drop-shadow-md
.drop-shadow-xl
drop-shadow-2xl-hover
5 - Grayscale:
Example:
without grayscale
Demo
.grayscale-50
Demo
.grayscale-100
Demo
grayscale-100-hover
Demo
6 - Saturate:
Example:
without saturate
Demo
.saturate-50
Demo
.saturate-150
Demo
saturate-200-hover
Demo

Backdrop Filters

Use the .backdrop-filter class to apply visual effects to the content behind an element. This allows you to create layered, frosted-glass effects without altering the CSS directly.
The supported backdrop filter effects is only blur.

Note: To disable the backdrop filter, use the .backdrop-filter-none class or .backdrop-filter-none-hover on hover to disable the backdrop-filter effects.

To apply the backdrop filter effects , use the .backdrop-filter class to define the desired effects. You can then combine it with the following classes like: .backdrop-filter .backdrop-blur-xl

Backdrop Blur:
Example:
.backdrop-blur-xs
Demo
.backdrop-blur-md
Demo
.backdrop-blur-xl
Demo

Transitions & Animation

Enhance your website's visual dynamics with classes for smooth transitions and animations. These utilities allow you to easily define how elements transition, manage timing functions, and apply various effects to improve the user experience.

Transition Property:

Utilities for controlling which CSS properties transition..

Example:
Transition Duration:
Example:
duration-150
duration-500
duration-1000
Transition Timing Function:
Example:
ease-in
ease-out
ease-in-out
Transition Delay:
Example:
delay-150
delay-300
delay-700
Animation:

Utilities for animating elements with CSS animations.

Example:
Ping
Bounce

Transforms:

Our Transform CSS classes provide a powerful way to apply visual effects like translation, rotation, and scaling. They leverage CSS variables for easy customization and are fully compatible with both LTR and RTL layouts.

Note: To disable all transformations, use the .transform-none class or .transform-none-hover class on hover.

To apply the transform , use the .transform class to define the base class. You can then combine it with the following classes like: .transform .scale-150-hover

1 - Scale:
Example:
without scaling
Demo
scale-50
Demo
scale-125
Demo
scale-150-hover
Demo
2 - Rotate:
Example:
without rotating
Demo
rotate-45
Demo
rotate-90
Demo
rotate-n12-hover
Demo
3 - Translate:
Example:
without translating
Demo
translate-y-6
Demo
translate-x-n6
Demo
translate-y-6-hover
Demo

Note: Use the .translate-x-n{*} , .translate-x-n{*}-hover , .translate-y-n{*} , .translate-y-n{*}-hover , .translate-z-n{*} , and .translate-z-n{*}-hover classes for negative values

4 - Skew:
Example:
without skewing
Demo
skew-y-6
Demo
skew-x-n12
Demo
skew-y-12-hover
Demo

Note: Use the .skew-y-n{*} , .skew-y-n{*}-hover , .skew-x-n{*} , and .skew-x-n{*}-hover classes for negative values

5 - Transform Origin:

Utilities for specifying the origin for an element's transformations.

Example:
origin-center
Demo
origin-top-start
Demo
origin-bottom
Demo
origin-bottom-end
Demo
6 - Perspective & Perspective Origin:

Perspective: Utilities for controlling an element's perspective when placed in 3D space.

Perspective Origin: Utilities for controlling an element's perspective origin when placed in 3D space.

Example:

perspective-origin-top-start

1
2
3
4
5
6

perspective-origin-bottom-end

1
2
3
4
5
6
TigmaTemplate Copyright © tigmatemplate . All rights reserved.