Logo

Documentation v1.0.6

  • Base
  • Helpers
  • Borders
Preview Upgrade to Pro

Overview

Jet HTML Free extends Bootstrap Borders  in src/sass/components/helpers/_borders.scss to provide additional border utility classes to cover its own design system.

Border Styles

Use .border-dashed or .border-dotted classes to set an element's border style. For border directions use .border-{direction}-dashed or .border-{direction}-dotted classes format.
Where direction is one of:
  • top - for classes that set border top style
  • bottom - for classes that set border bottom style
  • end - for classes that set border right style
  • start - for classes that set border start style
default style
.border-dotted
.border-dashed
.border-bottom-dashed
.border-end-dashed 
<div class="border">
    default style
</div>
<div class="border-gray-300 border-dotted">
    .border-dotted
</div>
<div class="border-gray-300 border-dashed">
    .border-dashed
</div>                
<div class="border-gray-300 border-bottom-dashed">
    .border-bottom-dashed
</div>
<div class="border-gray-300 border-end-dashed">
    .border-end-dashed
</div>

Hover State

Use .border-hover to display an element's border on hover.
default
gray-500
primary 
<div class="border border-hover">
    default
</div>
<div class="border border-gray-500 border-hover">
    gray-500
</div>
<div class="border border-primary border-hover">
    primary
</div>

Active State

Use .border-active to display an element's border when .active class applied.
default
gray-500
primary 
<div class="border border-active active">
    default
</div>
<div class="border border-gray-500 border-active active">
    gray-500
</div>
<div class="border border-primary border-active active">
    primary
</div>

Transparent Border

Use .border-transparent to set an element's border color to tranparent.
tranparent
border 
<div class="border border-transparent">
    default
</div>

Border Gray Colors

Use .border-gray-{100, 200, 300, 400, 500, 600, 700, 800, 900} to set an element's border color.
.border-gray-100
.border-gray-200
.border-gray-300
.border-gray-400
.border-gray-500
.border-gray-600
.border-gray-700
.border-gray-800
.border-gray-900 
<div class="border border-gray-100"></div>
<div class="border border-gray-200"></div>
<div class="border border-gray-300"></div>
<div class="border border-gray-400"></div>
<div class="border border-gray-500"></div>
<div class="border border-gray-600"></div>
<div class="border border-gray-700"></div>
<div class="border border-gray-800"></div>
<div class="border border-gray-900"></div>
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Download Jet HTML Free
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now