BootKit home

CLASS REFERENCE GUIDE

All available classes in one big list.


1. Core classes

less/bootkit/core-classes.less

The most generic of all BootKit classes.

Name Description Usage

MISC

bk-overflow-off Turn off overflow by setting it to hidden. Used to override overflow when for example it's interfering with other elements.
bk-overflow Turn on overflow by setting it to visible. Used to override overflow.
bk-wrap-off Turn off wrap on text with the white-space command. Text handling
bk-outline-off Turn off outline with !important. Any element that needs it.
bk-box-shadow-off Turn off box-shadow with !important. Any element that needs it.
bk-wrapper Makes the target element receive a relative position. Where relatively and absolutely positioned child elements need to relate to a certain parent.
bk-chrome-fix Temporary solution to take care of annoying chrome/webkit bugs regarding rounded corners where content does not align properly in responsive environments because overflow:hidden is not working as it should. In certain cases this class is needed on the panel class to make sure the rounded corners from the panel parent are respected.
There are some examples explained in this manual. Experiment with usage when you see quirks in Chrome.
bk-block Sets the level of an element to block. Comes in handy when in quick need of transforming inline-elements without having to create a new class for them.

FONT MANIPULATION

bk-sml Sets text to 80% font size. Emulates the HTML small tag because always using those is pesky.
bk-300 Sets text to 300 font weight. Setting font sizes on the fly.
bk-400 Sets text to 400 font weight. Setting font sizes on the fly.
bk-500 Sets text to 500 font weight. Setting font sizes on the fly.
bk-600 Sets text to 600 font weight. Setting font sizes on the fly.
bk-700 Sets text to 700 font weight. Setting font sizes on the fly.
bk-800 Sets text to 800 font weight. Setting font sizes on the fly.
bk-900 Sets text to 900 font weight. Setting font sizes on the fly.

RADIUS

bk-round Sets a 50% radius. Mostly used on borders and background to create circular containers.
bk-rd Adds the Bootstrap panel radius. To add radius to for example child elements not respecting the parent panel border radius. The infamous background bleed issues.
The amount of cornering is determined by the @panel-border-radius variable that comes with Bootstrap.
bk-rd-off Turn off border radius from any element. Override the default border radius when needed.
bk-rd-off-t Removes a radius to the top of target element. To remove top radius from elements.
bk-rd-off-b Removes a radius to the bottom of target element. To remove bottom radius from elements.
bk-rd-off-l Removes a radius to the left of target element. To remove left radius from elements.
bk-rd-off-r Removes a radius to the right of target element. To remove right radius from elements.
bk-rd-t Add a radius to the top of target element. To add top radius to elements.
bk-rd-t-l Add a radius to the top left of target element. To add top left radius to elements.
bk-rd-t-r Add a radius to the top right of target element. To add top right radius to elements.
bk-rd-b Add a radius to the bottom of target element. To add bottom radius to elements.
bk-rd-b-l Add a radius to the bottom left of target element. To add bottom left radius to elements.
bk-rd-b-r Add a radius to the bottom right of target element. To add bottom right radius to elements.
bk-rd-l Add a radius to the left of target element. To add left radius to elements.
bk-rd-r Add a radius to the right of target element. To add right radius to elements.

CALCULATED MARGINS

bk-d-mg Add a top margin of 50 pixels to the element. To push down titles, sections and create nice whitespace between them. Can be set dynamically in LESS with @bk-margin.
bk-u-mg Add a bottom margin of 50 pixels to the element. To push up titles, sections and create nice whitespace underneath them. Can be set dynamically in LESS with @bk-margin.
bk-d-mg-sm Add a top margin of 25 pixels to the element. To push down titles, sections but not as much as the above. Is calculated like ceil(@bk-margin/2).
bk-u-mg-sm Add a bottom margin of 25 pixels to the element. To push up titles, sections but not as much as the above. Is calculated like ceil(@bk-margin/2).
bk-d-mg-xs Add a top margin of 13 pixels to the element. To push down titles, sections but just a little bit. Is calculated like ceil(@bk-margin/4).
bk-u-mg-xs Add a bottom margin of 13 pixels to the element. To push up titles, sections but just a little bit. Is calculated like ceil(@bk-margin/4).

CALCULATED PADDING

bk-d-pd Add a top padding of 50 pixels to the element. To push down titles, sections and create nice whitespace between them. Can be set dynamically in LESS with @bk-padding.
bk-u-pd Add a bottom padding of 50 pixels to the element. To push up titles, sections and create nice whitespace between them. Can be set dynamically in LESS with @bk-padding.
bk-d-pd-sm Add a top padding of 25 pixels to the element. To push down titles, sections but not as much as the above. Is calculated like ceil(@bk-padding/4).
bk-u-pd-sm Add a bottom padding of 25 pixels to the element. To push up titles, sections but not as much as the above. Is calculated like ceil(@bk-padding/4).
bk-u-pd-xs Add a bottom padding of 13 pixels to the element. To push down titles, sections but just a little bit. Is calculated like ceil(@bk-padding/4).
bk-u-pd-xs Add a bottom padding of 13 pixels to the element. To push up titles, sections but just a little bit. Is calculated like ceil(@bk-padding/4).

FIXED MARGINS

bk-mg-5 Adds a 5 pixel margin.
bk-mg-10 Adds a 10 pixel margin.
bk-mg-15 Adds a 15 pixel margin.
bk-mg-t-5 Adds a 5 pixel top margin.
bk-mg-b-5 Adds a 5 pixel bottom margin.
bk-mg-r-5 Adds a 5 pixel right margin.
bk-mg-l-5 Adds a 5 pixel left margin.
bk-mg-t-10 Adds a 10 pixel top margin.
bk-mg-b-10 Adds a 10 pixel bottom margin.
bk-mg-r-10 Adds a 10 pixel right margin.
bk-mg-l-10 Adds a 10 pixel left margin.
bk-mg-t-15 Adds a 15 pixel top margin.
bk-mg-b-15 Adds a 15 pixel bottom margin.
bk-mg-r-15 Adds a 15 pixel right margin.
bk-mg-l-15 Adds a 15 pixel left margin.
bk-mg-off Turns off margins for this element.
bk-mg-off-t Turns off top margins for this element.
bk-mg-off-r Turns off right margins for this element.
bk-mg-off-b Turns off bottom margins for this element.
bk-mg-off-l Turns off left margins for this element.

FIXED PADDING

bk-pd-5 Adds 5 pixel padding.
bk-pd-10 Adds 10 pixel padding.
bk-pd-15 Adds 15 pixel padding.
bk-pd-20 Adds 20 pixel padding.
bk-pd-30 Adds 30 pixel padding.
bk-pd-40 Adds 40 pixel padding.
bk-pd-t-5 Adds 5 pixel top padding.
bk-pd-r-5 Adds 5 pixel right padding.
bk-pd-b-5 Adds 5 pixel bottom padding.
bk-pd-l-5 Adds 5 pixel left padding.
bk-pd-t-10 Adds 10 pixel top padding.
bk-pd-r-10 Adds 10 pixel right padding.
bk-pd-b-10 Adds 10 pixel bottom padding.
bk-pd-l-10 Adds 10 pixel left padding.
bk-pd-t-15 Adds 15 pixel top padding.
bk-pd-r-15 Adds 15 pixel right padding.
bk-pd-b-15 Adds 15 pixel bottom padding.
bk-pd-l-15 Adds 15 pixel left padding.
bk-pd-t-20 Adds 20 pixel top padding.
bk-pd-r-20 Adds 20 pixel right padding.
bk-pd-b-20 Adds 20 pixel bottom padding.
bk-pd-l-20 Adds 20 pixel left padding.
bk-pd-t-30 Adds 30 pixel top padding.
bk-pd-r-30 Adds 30 pixel right padding.
bk-pd-b-30 Adds 30 pixel bottom padding.
bk-pd-l-30 Adds 30 pixel left padding.
bk-pd-t-40 Adds 40 pixel top padding.
bk-pd-r-40 Adds 40 pixel right padding.
bk-pd-b-40 Adds 40 pixel bottom padding.
bk-pd-l-40 Adds 40 pixel left padding.
bk-pd-off Remove all padding from this element.
bk-pd-off-t Remove all top padding from this element.
bk-pd-off-r Remove all right padding from this element.
bk-pd-off-b Remove all bottom padding from this element.
bk-pd-off-l Remove all left padding from this element.

2. Widget classes

less/bootkit/widgets.less

Name Description Usage
bk-widget Add this to a panel to turn it into a BootKit widget. The panel that is turned into a widget receives some special styling to prepare it for being a container for styled panel bodies.
bk-img-radius Fix for Chrome on windows images and border radius pixel shifting. Use when images inside child elements do not respect outer border radius. Must be a child of bk-widget.

3. Backgrounds

less/bootkit/backgrounds.less

Name Description Usage

COLORS

bk-bg-primary Set primary color as element background.
bk-bg-primary-darker Set a darker version of the primary color as element background.
bk-bg-primary-lighter Set a lighter version of the primary color as element background.
bk-bg-success Set success color as element background.
bk-bg-success-darker Set a darker version of the success color as element background.
bk-bg-success-lighter Set a lighter version of the success color as element background.
bk-bg-info Set info color as element background.
bk-bg-info-darker Set a darker version of the info color as element background.
bk-bg-info-lighter Set a lighter version of the info color as element background.
bk-bg-warning Set warning color as element background.
bk-bg-warning-darker Set a darker version of the warning color as element background.
bk-bg-warning-lighter Set a lighter version of the warning color as element background.
bk-bg-danger Set danger color as element background.
bk-bg-danger-darker Set a darker version of the danger color as element background.
bk-bg-danger-lighter Set a lighter version of the danger color as element background.
bk-bg-inverse Set inverse color as element background.
bk-bg-inverse-darker Set a darker version of the inverse color as element background.
bk-bg-inverse-lighter Set a lighter version of the inverse color as element background.
bk-bg-white Set white color as element background.
bk-bg-white-darker Set a darker version of the white color as element background.
bk-bg-very-light-gray Set very-light-gray color as element background.
bk-bg-very-light-gray-darker Set a darker version of the very-light-gray color as element background.
bk-bg-light-gray Set light-gray color as element background.
bk-bg-light-gray-darker Set a darker version of the light-gray color as element background.
bk-bg-light-gray-lighter Set a lighter version of the light-gray color as element background.
bk-bg-gray Set gray color as element background.
bk-bg-gray-darker Set a darker version of the gray color as element background.
bk-bg-gray-lighter Set a lighter version of the gray color as element background.

ACTIONS

Remark! These classes do not work for the *-darker and *-lighter versions of the above colors. Only the 9 main colors have hover effects.

bk-bg-lighten Lighten the background color on hover.
bk-bg-darken Darken the background color on hover.

4. Borders

less/bootkit/borders.less

Name Description Usage

COLORS

bk-bd-primary Add primary color to element border.
bk-bd-db-primary Add primary color to element border with 4px padding (works well on avatars).
bk-bd-primary-right Add primary color to right border. Dividers
bk-bd-success Add primary color to element border.
bk-bd-db-success Add success color to element border with 4px padding (works well on avatars).
bk-bd-success-right Add success color to right border. Dividers
bk-bd-info Add info color to element border.
bk-bd-db-info Add info color to element border with 4px padding (works well on avatars).
bk-bd-info-right Add info color to right border. Dividers
bk-bd-warning Add warning color to element border.
bk-bd-db-warning Add warning color to element border with 4px padding (works well on avatars).
bk-bd-warning-right Add warning color to right border. Dividers
bk-bd-danger Add danger color to element border.
bk-bd-db-danger Add danger color to element border with 4px padding (works well on avatars).
bk-bd-danger-right Add danger color to right border. Dividers
bk-bd-inverse Add inverse color to element border.
bk-bd-db-inverse Add inverse color to element border with 4px padding (works well on avatars).
bk-bd-inverse-right Add inverse color to right border. Dividers
bk-bd-white Add white color to element border.
bk-bd-db-white Add white color to element border with 4px padding (works well on avatars).
bk-bd-white-right Add white color to right border. Dividers
bk-bd-very-light-gray Add very-light-gray color to element border.
bk-bd-db-very-light-gray Add very-light-gray color to element border with 4px padding (works well on avatars).
bk-bd-very-light-gray-right Add very light gray color to right border. Dividers
bk-bd-light-gray Add light-gray color to element border.
bk-bd-db-light-gray Add light-gray color to element border with 4px padding (works well on avatars).
bk-bd-light-gray-right Add light gray color to right border. Dividers
bk-bd-gray Add gray color to element border.
bk-bd-db-gray Add gray color to element border with 4px padding (works well on avatars).
bk-bd-gray-right Add gray color to right border. Dividers
bk-bd-textcolor Add textcolor color to element border.
bk-bd-db-textcolor Add textcolor color to element border with 4px padding (works well on avatars).
bk-bd-textcolor-right Add textcolor color to right border. Dividers

ACTIONS

bk-bd-off Remove all borders from element.
bk-bd-2x Set border to 2 pixels width.
bk-bd-3x Set border to 3 pixels width.
bk-bd-4x Set border to 4 pixels width.
bk-bd-5x Set border to 5 pixels width.
bk-bd-lighten On hover, add a lighter color to the border.
bk-bd-darken On hover, add a darker color to the border.

5. Foreground

less/bootkit/foreground.less

Name Description Usage

COLORS

bk-fg-primary Set the text color to primary. The lazy fox
bk-fg-success Set the text color to success. The lazy fox
bk-fg-info Set the text color to info. The lazy fox
bk-fg-warning Set the text color to warning. The lazy fox
bk-fg-danger Set the text color to danger. The lazy fox
bk-fg-inverse Set the text color to inverse. The lazy fox
bk-fg-white Set the text color to white. The lazy fox
bk-fg-very-light-gray Set the text color to very light gray. The lazy fox
bk-fg-light-gray Set the text color to light gray. The lazy fox
bk-fg-gray Set the text color to gray. The lazy fox

ACTIONS

bk-fg-lighten On hover the text color will turn lighter.
bk-fg-darken On hover the text color will turn darker.

6. Alignment

less/bootkit/alignment.less

Name Description Usage
bk-ltr This class prepares a panel body for having columns as child elements. On the panel body or any wrapper containing the Bootstrap row/column structure.
bk-col-100pct Adds 100% height to cells when using aligment. Add this one when manually setting vertical aligment inside complex widgets. See the alignment docs for better understanding.
bk-vcenter Vertical centering on floating elements. Add to each floating element that needs vertical centering.
bk-list-vcenter Vertically align content inside a list (ul). When a list resides inside a column that has as class bk-vcenter then applying this class on said list will make sure the content is centered vertically.
bk-tbl Vertical alignment but with CSS tables. Add it to the row part of the Bootstrap row/column structure - the columns will automatically behave as table-cells.
bk-tbl-cell When you need to create table structures manually, outside of the Bootstrap row/column structure. Add to the direct children of bk-tbl.
bk-bottom Align cell content to the bottom. Used to vertically center cells to the bottom when residing inside a bk-tbl structure.
bk-top Align cell content to the top. Used to vertically center cells to the top when residing inside a bk-tbl structure.

7. Icons

less/bootkit/icons.less

Name Description Usage
bk-icon Enables a containing element to receive styles for icons. Add this to the containing element of the icon, it sets default behavior.
bk-icon-default Declares a default icon container. Add this to the containing element of the icon, it sets default behavior.
bk-icon-2x Declares a container for an icon with fa-2x. Each icon size has a separate class with this name that handles sizing.
bk-icon-3x Declares a container for an icon with fa-3x. Each icon size has a separate class with this name that handles sizing.
bk-icon-4x Declares a container for an icon with fa-4x. Each icon size has a separate class with this name that handles sizing.
bk-icon-5x Declares a container for an icon with fa-5x. Each icon size has a separate class with this name that handles sizing.

8. Avatars

less/bootkit/avatars.less

Name Description Usage
bk-avatar Declares the container for avatars. Add to the containing element of the avatar in question.
bk-img-40 Width and height of avatar is set to 40 pixels.
bk-img-60 Width and height of avatar is set to 60 pixels.
bk-img-80 Width and height of avatar is set to 80 pixels.
bk-img-100 Width and height of avatar is set to 100 pixels.
bk-img-120 Width and height of avatar is set to 120 pixels.
bk-avatar40-hcenter Horizontal and vertical centering for 40 pixel avatars.
bk-avatar60-hcenter Horizontal and vertical centering for 60 pixel avatars.
bk-avatar80-hcenter Horizontal and vertical centering for 80 pixel avatars.
bk-avatar100-hcenter Horizontal and vertical centering for 100 pixel avatars.
bk-avatar120-hcenter Horizontal and vertical centering for 120 pixel avatars.
bk-avatar80-halfdown Half down positioning for 80 pixel avatars in relation to backgrounds (images) and the interacting panel bodies.
bk-avatar100-halfdown Half down positioning for 100 pixel avatars in relation to backgrounds (images) and the interacting panel bodies.
bk-avatar120-halfdown Half down positioning for 120 pixel avatars in relation to backgrounds (images) and the interacting panel bodies.
bk-avatar80-halfdown-after Give halfdown 80 pixel avatar panels the needed top padding to make them align correctly horizontally.
bk-avatar100-halfdown-after Give halfdown 100 pixel avatar panels the needed top padding to make them align correctly horizontally.
bk-avatar120-halfdown-after Give halfdown 120 pixel avatar panels the needed top padding to make them align correctly horizontally.
bk-box-shadow Adds a box shadow to an avatar image. Add this class to the image child of bk-avatar.
bk-box-shadow-t Adds a top box shadow to an avatar image. Add this class to the image child of bk-avatar.
bk-box-shadow-b Adds a bottom box shadow to an avatar image. Add this class to the image child of bk-avatar.
bk-box-shadow-l Adds a left box shadow to an avatar image. Add this class to the image child of bk-avatar.
bk-box-shadow-r Adds a right box shadow to an avatar image. Add this class to the image child of bk-avatar.

9. Hr

less/bootkit/hr.less

Name Description Usage
bk-hr-primary Gives the hr a primary color.
bk-hr-success Gives the hr a success color.
bk-hr-info Gives the hr a info color.
bk-hr-warning Gives the hr a warning color.
bk-hr-danger Gives the hr a danger color.
bk-hr-inverse Gives the hr a inverse color.
bk-hr-white Gives the hr a white color.
bk-hr-very-light-gray Gives the hr a very light gray color.
bk-hr-light-gray Gives the hr a light gray color.
bk-hr-gray Gives the hr a gray color.
bk-hr-textcolor Gives the hr a textcolor color.

10. Gradients

less/bootkit/gradients.less

Name Description Usage
bk-grd-v-t-primary Top (light) to bottom (dark) gradient. On the panel body.
bk-grd-v-b-primary Bottom (light) to top (dark) gradient. On the panel body.
bk-grd-h-l-primary Left (light) to right (dark) gradient. On the panel body.
bk-grd-h-r-primary Right (light) to left (dark) gradient. On the panel body.
bk-grd-d-45-primary Diagonal (45°) top-left (light) to bottom-right (dark) gradient. On the panel body.
bk-grd-d-135-primary Diagonal (135°) bottom-left (light) to top-right (dark) gradient. On the panel body.
bk-grd-r-primary Radial gradient (center is light, edges dark). On the panel body.
bk-grd-s-primary Striped gradient. On the panel body.
bk-grd-v-t-success Top (light) to bottom (dark) gradient. On the panel body.
bk-grd-v-b-success Bottom (light) to top (dark) gradient. On the panel body.
bk-grd-h-l-success Left (light) to right (dark) gradient. On the panel body.
bk-grd-h-r-success Right (light) to left (dark) gradient. On the panel body.
bk-grd-d-45-success Diagonal (45°) top-left (light) to bottom-right (dark) gradient. On the panel body.
bk-grd-d-135-success Diagonal (135°) bottom-left (light) to top-right (dark) gradient. On the panel body.
bk-grd-r-success Radial gradient (center is light, edges dark). On the panel body.
bk-grd-s-success Striped gradient. On the panel body.
bk-grd-v-t-info Top (light) to bottom (dark) gradient. On the panel body.
bk-grd-v-b-info Bottom (light) to top (dark) gradient. On the panel body.
bk-grd-h-l-info Left (light) to right (dark) gradient. On the panel body.
bk-grd-h-r-info Right (light) to left (dark) gradient. On the panel body.
bk-grd-d-45-info Diagonal (45°) top-left (light) to bottom-right (dark) gradient. On the panel body.
bk-grd-d-135-info Diagonal (135°) bottom-left (light) to top-right (dark) gradient. On the panel body.
bk-grd-r-info Radial gradient (center is light, edges dark). On the panel body.
bk-grd-s-info Striped gradient. On the panel body.
bk-grd-v-t-warning Top (light) to bottom (dark) gradient. On the panel body.
bk-grd-v-b-warning Bottom (light) to top (dark) gradient. On the panel body.
bk-grd-h-l-warning Left (light) to right (dark) gradient. On the panel body.
bk-grd-h-r-warning Right (light) to left (dark) gradient. On the panel body.
bk-grd-d-45-warning Diagonal (45°) top-left (light) to bottom-right (dark) gradient. On the panel body.
bk-grd-d-135-warning Diagonal (135°) bottom-left (light) to top-right (dark) gradient. On the panel body.
bk-grd-r-warning Radial gradient (center is light, edges dark). On the panel body.
bk-grd-s-warning Striped gradient. On the panel body.
bk-grd-v-t-danger Top (light) to bottom (dark) gradient. On the panel body.
bk-grd-v-b-danger Bottom (light) to top (dark) gradient. On the panel body.
bk-grd-h-l-danger Left (light) to right (dark) gradient. On the panel body.
bk-grd-h-r-danger Right (light) to left (dark) gradient. On the panel body.
bk-grd-d-45-danger Diagonal (45°) top-left (light) to bottom-right (dark) gradient. On the panel body.
bk-grd-d-135-danger Diagonal (135°) bottom-left (light) to top-right (dark) gradient. On the panel body.
bk-grd-r-danger Radial gradient (center is light, edges dark). On the panel body.
bk-grd-s-danger Striped gradient. On the panel body.
bk-grd-v-t-inverse Top (light) to bottom (dark) gradient. On the panel body.
bk-grd-v-b-inverse Bottom (light) to top (dark) gradient. On the panel body.
bk-grd-h-l-inverse Left (light) to right (dark) gradient. On the panel body.
bk-grd-h-r-inverse Right (light) to left (dark) gradient. On the panel body.
bk-grd-d-45-inverse Diagonal (45°) top-left (light) to bottom-right (dark) gradient. On the panel body.
bk-grd-d-135-inverse Diagonal (135°) bottom-left (light) to top-right (dark) gradient. On the panel body.
bk-grd-r-inverse Radial gradient (center is light, edges dark). On the panel body.
bk-grd-s-inverse Striped gradient. On the panel body.
bk-grd-v-t-gray Top (light) to bottom (dark) gradient. On the panel body.
bk-grd-v-b-gray Bottom (light) to top (dark) gradient. On the panel body.
bk-grd-h-l-gray Left (light) to right (dark) gradient. On the panel body.
bk-grd-h-r-gray Right (light) to left (dark) gradient. On the panel body.
bk-grd-d-45-gray Diagonal (45°) top-left (light) to bottom-right (dark) gradient. On the panel body.
bk-grd-d-135-gray Diagonal (135°) bottom-left (light) to top-right (dark) gradient. On the panel body.
bk-grd-r-gray Radial gradient (center is light, edges dark). On the panel body.
bk-grd-s-gray Striped gradient. On the panel body.
bk-grd-v-t-light-gray Top (light) to bottom (dark) gradient. On the panel body.
bk-grd-v-b-light-gray Bottom (light) to top (dark) gradient. On the panel body.
bk-grd-h-l-light-gray Left (light) to right (dark) gradient. On the panel body.
bk-grd-h-r-light-gray Right (light) to left (dark) gradient. On the panel body.
bk-grd-d-45-light-gray Diagonal (45°) top-left (light) to bottom-right (dark) gradient. On the panel body.
bk-grd-d-135-light-gray Diagonal (135°) bottom-left (light) to top-right (dark) gradient. On the panel body.
bk-grd-r-light-gray Radial gradient (center is light, edges dark). On the panel body.
bk-grd-s-light-gray Striped gradient. On the panel body.
bk-grd-v-t-very-light-gray Top (light) to bottom (dark) gradient. On the panel body.
bk-grd-v-b-very-light-gray Bottom (light) to top (dark) gradient. On the panel body.
bk-grd-h-l-very-light-gray Left (light) to right (dark) gradient. On the panel body.
bk-grd-h-r-very-light-gray Right (light) to left (dark) gradient. On the panel body.
bk-grd-d-45-very-light-gray Diagonal (45°) top-left (light) to bottom-right (dark) gradient. On the panel body.
bk-grd-d-135-very-light-gray Diagonal (135°) bottom-left (light) to top-right (dark) gradient. On the panel body.
bk-grd-r-very-light-gray Radial gradient (center is light, edges dark). On the panel body.
bk-grd-s-very-light-gray Striped gradient. On the panel body.

11. Opacity

less/bootkit/opacity.less

Name Description Usage
bk-opacity Enables a link to have an opacity of .8 on hover. On any element.
bk-opacity-inv Enables a link to have an opacity of 1 on hover whilst having one of .8 in normal status. On any element.
bk-opacity-2 Sets the opacity of the target element to .2. On any element.
bk-opacity-4 Sets the opacity of the target element to .4. On any element.
bk-opacity-5 Sets the opacity of the target element to .5. On any element.
bk-opacity-6 Sets the opacity of the target element to .6. On any element.
bk-opacity-8 Sets the opacity of the target element to .8. On any element.
bk-opacity-light An overlay which sets background: rgba(255,255,255,0.1); to a wrapper element. On any element.
bk-opacity-dark An overlay which sets background: rgba(0,0,0,0.1); to a wrapper element. On any element.

12. Pointers

less/bootkit/pointers.less

Name Description Usage
bk-pt Declares a cell to have a pointer. guaranteed to work on Bootstrap row/column constructions with alignment e.g. bk-ltr.
bk-pt-l-primary Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-primary Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-primary Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-primary Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-l-success Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-success Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-success Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-success Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-l-info Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-info Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-info Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-info Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-l-warning Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-warning Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-warning Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-warning Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-l-danger Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-danger Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-danger Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-danger Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-l-inverse Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-inverse Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-inverse Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-inverse Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-l-gray Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-gray Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-gray Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-gray Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-l-light-gray Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-light-gray Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-light-gray Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-light-gray Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-l-very-light-gray Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-very-light-gray Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-very-light-gray Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-very-light-gray Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-l-white Add a pointer to the left at the left edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-r-white Add a pointer to the right at the right edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-b-white Add a pointer to the bottom at the bottom edge of the element or cell. Add it to a cell in a row/column construct.
bk-pt-t-white Add a pointer to the top at the top edge of the element or cell. Add it to a cell in a row/column construct.

13. Seven columns

less/bootkit/7cols.less

Name Description Usage
bk-seven-cols Lets a Bootstrap row know to use the special seven column layout. On the row part of the Bootstrap row/column construct.

14. Social

less/bootkit/social.less

Name Description Usage
bk-fg-facebook Sets the text color to the one defined for Facebook.
bk-bg-facebook Sets the background color to the one defined for Facebook.
bk-fg-twitter Sets the text color to the one defined for Twitter.
bk-bg-twitter Sets the background color to the one defined for Twitter.
bk-fg-google-plus Sets the text color to the one defined for Google+.
bk-bg-google-plus Sets the background color to the one defined for Google+.
bk-fg-youtube Sets the text color to the one defined for Youtube.
bk-bg-youtube Sets the background color to the one defined for Youtube.
bk-fg-github Sets the text color to the one defined for Github.
bk-bg-github Sets the background color to the one defined for Github.
bk-fg-linkedin Sets the text color to the one defined for LinkedIn.
bk-bg-linkedin Sets the background color to the one defined for LinkedIn.
bk-fg-instagram Sets the text color to the one defined for Instagram.
bk-bg-instagram Sets the background color to the one defined for Instagram.
bk-fg-pinterest Sets the text color to the one defined for Pinterest.
bk-bg-pinterest Sets the background color to the one defined for Pinterest.
bk-fg-vine Sets the text color to the one defined for Vine.
bk-bg-vine Sets the background color to the one defined for Vine.
bk-fg-jsfiddle Sets the text color to the one defined for JSFiddle.
bk-bg-jsfiddle Sets the background color to the one defined for JSFiddle.
bk-fg-paypal Sets the text color to the one defined for Paypal.
bk-bg-paypal Sets the background color to the one defined for Paypal.
bk-fg-flickr Sets the text color to the one defined for Flickr.
bk-bg-flickr Sets the background color to the one defined for Flickr.
bk-fg-tumblr Sets the text color to the one defined for Tumblr.
bk-bg-tumblr Sets the background color to the one defined for Tumblr.
bk-fg-vk Sets the text color to the one defined for VKontakte.
bk-bg-vk Sets the background color to the one defined for VKontakte.
bk-fg-vimeo Sets the text color to the one defined for Vimeo.
bk-bg-vimeo Sets the background color to the one defined for Vimeo.
bk-fg-foursquare Sets the text color to the one defined for Foursquare.
bk-bg-foursquare Sets the background color to the one defined for Foursquare.
bk-fg-dribbble Sets the text color to the one defined for Dribbble.
bk-bg-dribbble Sets the background color to the one defined for Dribbble.

15. jQuery Slimscroll

less/vendor/slimscroll.less

Name Description Usage
bk-scroll Sets overflow: hidden; max-height: 300px; to the element. Used for having Slimscroll set up quickly by using this default container layout.
slimScrollBar We turn the border radius off on the scrollbar - should be adapted to your preference No usage: auto-generated by plugin

16. jQuery Sparklines

less/vendor/sparklines.less

Name Description Usage
jqstooltip A fix for the tooltip in Chrome. No usage: auto-generated by plugin

17. Carousel

less/bootstrap/carousel.less

Name Description Usage
bk-carousel-ctrl Custom styling for the left and right navigation. On the Bootstrap carousel custom widget navigation elements.
bk-carousel-hide-init Hide controls on page load. On the Bootstrap carousel custom widget navigation elements.
bk-custom-ctrl Custom controls for outside carousel (arrows left, right, top bottom of carousel). On the Bootstrap carousel custom widget navigation elements.
bk-fade Usable only with carousel - makes the slides fade in stead of slide (see example code for better insights). On the Bootstrap carousel custom widget navigation elements.

18. Progress bars

less/bootstrap/progress-bars.less

Name Description Usage
bk-progress-xxs Very thin progress bar. On the progress bar: progress.
bk-progress-xs Quite hin progress bar. On the progress bar: progress.
bk-progress-sm Thin progress bar. On the progress bar: progress.
bk-progress-md Medium progress bar. On the progress bar: progress.
bk-progress-xl Large progress bar. On the progress bar: progress.
bk-progress-xxl Quite large progress bar. On the progress bar: progress.
bk-progress-xxxl Very large progress bar. On the progress bar: progress.

19. Weather

less/bootstrap/weather.less

Name Description Usage
bk-weather-plugin Styles the simpleweatherjs plugin with a specific style.
bk-weather Generic styles for the simpleweatherjs plugin.
bk-wth-region Specific text styles for the simpleweatherjs plugin.
bk-wth-cur Specific text styles for the simpleweatherjs plugin.
bk-wth-tmp-alt Specific text styles for the simpleweatherjs plugin.