Getting Started
Customization
Base
Forms
Editors
Charts
Flotcharts
Google Charts
General
Tiny Slider
Icons
Overview
Product Documentation
Quick Setup
Quick project setup
Gulp build
Automate & enhance your build workflow
Webpack
Module bundler for build process automation
Multi-demo
Multi-demo concept & usage
File Structure
Theme File Structure Organization
Template
Template Structure
SASS
SASS Structure & Customization
Javacript
Javacript Structure & Customization
No jQuery
Remove jQuery from build
Custom Bundles
Create Custom Bundles
Dark Mode
Dark Mode Setup for Layout & Components
Illustrations
Vector Illustrations
Video Tutorials
Youtube video tutorials
RTL Version
Theme & Bootstrap RTL Version Setup
Changelog
Versions & Updates Information
Updates
General Update Guidelines
References
3rd-party Libraries & Resources
Utilities
Extended Bootstrap Utilities
Flex Layouts
Custom Bootstrap Flex Layouts
Text
Extended Bootstrap Text Utilities
Background
Extended Bootstrap Background Utilities
Borders
Extended Bootstrap Border Utilities
Opacity
Extended Bootstrap Opacity Utilities
Controls
Extended Bootstrap Form Controls
Checks & Radios
Extended Bootstrap Checks & Radios
Advanced
Advanced Bootstrap Form Controls
Input Group
Extended Bootstrap Input Group
Floating Labels
Extended Bootstrap Floating Labels
Buttons
Extended Bootstrap Buttons
Indicator
Custom Bootstrap Indicator Component
Page Loading
Custom Bootstrap Page Loading Component
Rotate
Custom Bootstrap Rotate Component
Tables
Extended Bootstrap Tables and DataTable
Cards
Extended Bootstrap Cards
Symbol
Custom Bootstrap Symbol Component For Avatars and Images
Badges
Custom Bootstrap Badge Component
Hover
Custom hover effects
Pulse
Custom Bootstrap Pulse Component
Bullets
Custom Bootstrap Bullet Component
Accordion
Extended Bootstrap Accordion
Carousel
Extended Bootstrap Carousel
Bootstrap Overlay
Custom Bootstrap Overlay Component
Separator
Custom Bootstrap Separator Component
Underline
Custom Bootstrap Underline Component
Tabs
Extended Bootstrap Tabs
Breadcrumb
Customized Bootstrap Breadcrumb
Modal
Customized Bootstrap Modals
Tooltips
Extended Bootstrap Tooltips
Popovers
Extended Bootstrap Popovers
Pagination
Extended Bootstrap Pagination
Rating
Custom Bootstrap Rating Component
Ribbon
Custom Bootstrap Ribbon Component
Alerts
Customized Bootstrap Alerts
Toasts
Extended Bootstrap Toasts
Autosize Textarea
Autosize Textarea Javascript Plugin
Select2
Select2 and Bootstrap Integration
Clipboard
Clipboard.js and Bootstrap integration
Flatpickr
Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker
Datepicker
Tempus Dominus Bootstrap Datepicker
Form Repeater Overview
Form Repeater and Bootstrap Integration
Basic Example
Form Repeater Basic Examples
Nested Example
Form Repeater Nested Examples
Nested Example
Form Repeater Nested Examples
FormValidation Overview
FormValidation and Bootstrap Integration
Basic Example
FormValidation Basic Examples
Advanced Example
FormValidation Advanced Examples
Date Range Picker
Bootstrap Datepicker & Timepicker Implementation with Daterangepicker
Tagify
Bootstrap Tags Implementation with Tagify
Dialer
Custom Bootstrap Dialer and Input Spinner Component
noUiSlider
noUiSlider and Bootstrap Integration
Password Meter
Custom Bootstrap Password Meter & Strength Checker Component
Inputmask
Inputmask Plugin & Bootstrap Integration
Bootstrap Multiselectsplitter
Bootstrap Multiselectsplitter Integration
Bootstrap Select
Bootstrap Select Integration
Google reCAPTCHA
Google reCAPTCHA & Bootstrap Integration
DropzoneJS
DropzoneJS & Bootstrap Integration
Image Input
KTImageInput Custom Bootstrap Image Input Component with Thumbnail Preview
Bootstrap Maxlength
A visual feedback indicator for the maxlength attribute.
AmCharts
AmCharts & Bootstrap Integration
AmCharts
AmCharts Maps & Bootstrap Integration
AmCharts
AmCharts Stock & Bootstrap Integration
ApexCharts
ApexCharts & Bootstrap Integration
Chartjs
Chartjs & Bootstrap Integration
Overview
Attractive JavaScript plotting for jQuery
Basic Chart
Flotcharts Basic Examples
Axis Labels
Flotcharts Axis Labels Examples
Tracking Curves
Flotcharts Tracking Curves Examples
Dynamic Chart
Flotcharts Dynamic Chart Examples
Stack Chart Controls
Flotcharts Stack Chart Controls Examples
Bar Chart
Flotcharts Bar Chart Examples
Pie Chart
Flotcharts Pie Chart Examples
Overview
Google Charts Examples
Column Chart
Google Column Charts Examples
Pie Chart
Google Pie Charts Examples
Line Chart
Google Line Charts Examples
Tinymce Overview
Tinymce Editor and Bootstrap Integration
Basic TinyMCE
Tinymce Basic Examples
TinyMCE Plugins
Tinymce Editor Plugins Examples
TinyMCE Menubar
TinyMCE with Hidden Menubar Example
Overview
CKEditor & Bootstrap Integration
CKEditor Classic
CKEditor Classic Examples
CKEditor Inline
CKEditor Inline Examples
CKEditor Ballon
CKEditor Ballon Examples
CKEditor Balloon Block
CKEditor Balloon Block Examples
CKEditor Document
CKEditor Document Examples
Quill Overview
Quill & Bootstrap Integration
Quill Basic
Quill Basic Examples
Quill Autosave
Quill Autosave Examples
DataTables Overview
DataTables & Bootstrap Integration
DataTables
DataTables Basic Examples
DataTables
DataTables Advanced Examples
DataTables Export
DataTables Button Export
DataTables
DataTables Ajax Server Side Examples
API
DataTables Subtable Examples
API
DataTables API Examples
Draggable Overview
Draggable and Bootstrap Integration
Simple List
Draggable Simple List Examples
Multiple Containers
Draggable Multiple Containers Examples
Swappable
Draggable Swappable Examples
Restricted
Draggable Restricted Examples
Fullscreen Lightbox
Fullscreen Lightbox & Bootstrap Integration
Fullcalendar Overview
Fullcalendar & Bootstrap Integration
Basic
Fullcalendar Basic Examples
Drag-n-Drop
Fullcalendar Drag & Drop Examples
Selectable Dates
Fullcalendar Selectable Dates Examples
Background Events
Fullcalendar Background Events Examples
Localization
Fullcalendar Localization Examples
Timezone
Fullcalendar Timezone Examples
jKanban Overview
jKanban & Bootstrap Integration
Basic
jKanban Basic Examples
Colored
jKanban Colored Items Examples
Restricted
jKanban Restricted Items Examples
Rich Content
jKanban Rich Content Examples
Fixed Height
jKanban Basic Examples
Menu Overview
Custom Bootstrap KTMenu component with Nested Dropdown & Accordion Submenu
Menu Customization
Custom Bootstrap KTMenu component with Nested Dropdown & Accordion Submenu
Menu Advanced
Custom Bootstrap KTMenu component with Nested Dropdown & Accordion Submenu
Integration
Use customm Bootstrap KTMenu component with Select2, Tempus Dominus Datepicker, Daterangepicker and more
Menu Api
Custom Bootstrap KTMenu component with Nested Dropdown & Accordion Submenu
Typed.js
Typed.js & Bootstrap Integration
Stepper
Custom Bootstrap Stepper & Wizard Component
Scroll
Custom Bootstrap Scrollbar Component
Cookie
Custom Cookie Component
Cookie Alert
Cookie Alert Component
Cropper
Cropper.js & Bootstrap Integration
Drawer
Custom Bootstrap Offcanvas & Drawer Component
Toastr
Toastr & Bootstrap Integration
BlockUI
BlockUI & Bootstrap Integration
Scrolltop
Custom Bootstrap Scrolltop Component
Search
Custom Bootstrap Quick Search Component
Smooth Scroll
Smooth Scroll and Bootstrap Integration
Sticky
Custom Bootstrap Sticky Component
Swapper
Custom Bootstrap Swapper Component
Sweet Alert
Beautiful Replacement for Javascript Popups
Toggle
Custom Bootstrap Toggle Component
Overview
Vis-timeline & Bootstrap Integration
Basic
Vis-timeline Basic Examples
Custom Styling
Vis-timeline Custom Styling Examples
Group
Vis-timeline Group Examples
Interaction
Vis-timeline Interaction Examples
Templates
Vis-timeline Templates Examples
jsTree Overview
jsTree & Bootstrap Integration
Basic
jsTree Basic Examples
Contextual Menu
jsTree Contextual Menu Examples
Custom Icons
jsTree Custom Icons Examples
Drag & Drop
jsTree Drag & Drop Examples
Checkable Tree
jsTree Checkable Tree Examples
Ajax Data
jsTree Ajax Data Examples
Lozad
Highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API.
Tiny Slider Overview
Tiny slider for all purposes
Basic
Tiny Slider Basic Example
Custom Navs
Tiny Slider Custom Navigation Example
Thumbnails
Tiny Slider Thumbnails Example
CountUp
Lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
KeenIcons
In-house Designed Icons In 3 Styles
Duotune
In-house Designed Duotune SVG Icon Set
Bootstrap Icons
Bootstrap Icons and Flaticon Integration
Fontawesome
Fontawesome Icons and Flaticon Integration
Line Awesome
Line Awesome Icons and Flaticon Integration
Changelog
Changelog
Suggestions:
Quick Setup
Quick project setup
Dark Mode
Dark Mode Setup for Layout & Components
Select2
Select2 and Bootstrap Integration
Flatpickr
Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker
Datepicker
Tempus Dominus Bootstrap Datepicker
DataTables
DataTables Ajax Server Side Examples
Fullcalendar Overview
Fullcalendar & Bootstrap Integration
KeenIcons
In-house Designed Icons In 3 Styles
Duotune
In-house Designed Duotune SVG Icon Set
No result found
Please try again with a different query
Overview
Saul HTML Pro sets custom opacity classes in
src/sass/components/helpers/_opacity.scss and through a SASS variable
$opacity-values defined in src/sass/components/_variables.scss to provide additional opacity utility classes to cover its own design system.
Opacity
Use the
.opacity-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 } class to set an element's opacity style.
.opacity-0
.opacity-5
.opacity-10
.opacity-15
.opacity-20
.opacity-25
.opacity-50
.opacity-75
.opacity-100
<div class="opacity-0"></div>
<div class="opacity-5"></div>
<div class="opacity-10"></div>
<div class="opacity-15"></div>
<div class="opacity-20"></div>
<div class="opacity-25"></div>
<div class="opacity-50"></div>
<div class="opacity-75"></div>
<div class="opacity-100"></div>Opacity Hover Effects
Use
.opacity-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }-hover to display an element's opacity on hover.
.opacity-0-hover
.opacity-5-hover
.opacity-10-hover
.opacity-15-hover
.opacity-20-hover
.opacity-25-hover
.opacity-50-hover
.opacity-75-hover
.opacity-100-hover
<div class="opacity-0-hover"></div>
<div class="opacity-5-hover"></div>
<div class="opacity-10-hover"></div>
<div class="opacity-15-hover"></div>
<div class="opacity-20-hover"></div>
<div class="opacity-25-hover"></div>
<div class="opacity-50-hover"></div>
<div class="opacity-75-hover"></div>
<div class="opacity-100-hover"></div>Opacity Active State
Use
.opacity-active-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 } to set an element's opacity on active states. Click on the demo below to trigger the active state.
.opacity-active-0
.opacity-active-5
.opacity-active-10
.opacity-active-15
.opacity-active-20
.opacity-active-25
.opacity-active-50
.opacity-active-75
.opacity-active-100
<div class="opacity-active-0"></div>
<div class="opacity-active-5"></div>
<div class="opacity-active-10"></div>
<div class="opacity-active-15"></div>
<div class="opacity-active-20"></div>
<div class="opacity-active-25"></div>
<div class="opacity-active-50"></div>
<div class="opacity-active-75"></div>
<div class="opacity-active-100"></div>Opacity Combined Active & Hover State
Use
.opacity-state-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 } to set an element's opacity on both active and hover states. Click on the demo below to trigger the active state.
.opacity-state-0
.opacity-state-5
.opacity-state-10
.opacity-state-15
.opacity-state-20
.opacity-state-25
.opacity-state-50
.opacity-state-75
.opacity-state-100
<div class="opacity-state-0"></div>
<div class="opacity-state-5"></div>
<div class="opacity-state-10"></div>
<div class="opacity-state-15"></div>
<div class="opacity-state-20"></div>
<div class="opacity-state-25"></div>
<div class="opacity-state-50"></div>
<div class="opacity-state-75"></div>
<div class="opacity-state-100"></div>
2025©
Keenthemes
