Logo

Documentation v1.0.4

  • Base
  • Helpers
  • Borders
Preview Purchase

Overview

Good extends Bootstrap Borders  in src/sass/components/helpers/_borders.scssto provide additional border utility classes to cover its own design system.

Border Styles

Use .border-dashedor .border-dottedclasses to set an element's border style. For border directions use .border-{direction}-dashedor .border-{direction}-dottedclasses format.
Where directionis 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-hoverto 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-activeto display an element's border when .activeclass 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-transparentto 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>
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