21000 Sites Live
58941 Ans Query
000-000-999-888 Toll Free:

Shortcode Customized

Text presentation

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

1. Text bold

  1. <strong>1. Text bold</strong>

2. Text bold

  1. <span class="txt-bold">2. Text bold</span>

Text non bold

  1. <strong class="txt-non-bold">Text non bold</strong>

Text light

  1. <span class="txt-light txt20">Text light</span>

Text extra bold

  1. <span class="txt-xtra-bold txt20">Text extra bold</span>

Text Uppercase

  1. <span class="txt-cap">Text Uppercase</span>

Text Lowercase

  1. <span class="txt-lower">Text Lowercase</span>
Text right align
  1. <div class="txt-right">Text right align</div>
Text center align
  1. <div class="txt-center">Text center align</div>
Text left align
  1. <div class="txt-left">Text left align</div>

This is general paragraph pellentesque pulvinar cursus. Maecenas molestie posuere tincidunt.

General link

Link with arrow

  1. <a class="link">Link wi...</a>

Link red color Text red color

  1. <a class="txt-red">Link r...</a>
  2. <span class="txt-red">text...</span>

Class Names

txt-white bg-black
txt-dull-white bg-red
txt-grey bg-blue
txt-dark-grey
txt-black
txt-red
txt-turquoise
txt-yellow bg-dark-blue
txt-blue-lightest
txt-blue
txt-dark-blue

Text Sizes

txt12 txt14 txt15 txt16 txt18 txt20 txt24 txt28 txt30 txt36 txt40 txt44 txt48 txt-light txt60 txt200

Opacity

opacity10 opacity20 opacity30 opacity40 opacity50 opacity60 opacity70 opacity80 opacity90 opacity100

Padding Classes

pdg10 = Padding:10px
pdg10T = Padding-top:10px
pdg10B = Padding-bottom:10px
pdg10L = Padding-left:10px
pdg10R = Padding-right:10px
pdg10TB = Padding-top:10px; Padding-bottom:10px
pdg10LB = Padding-left:10px; Padding-bottom:10px

pdg-auto pdg0 pdg10 pdg20

pdg0TB pdg10TB

pdg10LR pdg20LR pdg30LR

pdg0T pdg5T pdg6T pdg10T pdg20T pdg30T

pdg0B pdg5B pdg10B pdg20B pdg30B

pdg10L pdg20L pdg30L

pdg10R pdg20R pdg30R

Margin Classes

mrg-auto mrg0 mrg10 mrg20

mrg0T mrg10T mrg20T mrg30T.. mrg350T From 0 to 350

mrg0B mrg1B mrg5B mrg8B mrg10B mrg15B mrg20B

mrg0L.. mrg100L From 0 to 100

mrg1LB mrg0LB

mrg0TB mrg15TB

Text weight and transformation

txt-bold font-weight:800;
txt-non-bold font-weight:400;
txt-light font-weight:300
txt-xtra-bold font-weight:800

txt-cap text-transform:uppercase
txt-lower text-transform:lowercase

txt-one-line white-space:pre;

Lists

  • Ut enim ad minim veniam
  • Quis nostrud exercitation ullamco
  • Laboris nisi ut sint occaecat
  • Cupidatat non proident
  1. <ul class="list-arrow">...
  • Etiam vulputate dapibus ligula convallis
  • icon-ok txt-red
  • icon-asterisk
  • icon-asterisk txt-turquoise
  • icon-minus txt-black
  • icon-minus txt-blu
  • icon-plus txt-black
  • icon-plus txt-grey
  • icon-ok-sign txt-black
  • icon-ok-sign txt-green
  • icon-ok-circle txt-black
  • icon-ok-circle txt-dark-grey
  • icon-star txt-black
  • icon-star txt-red
  • icon-star-empty txt-black
  • icon-star-empty txt-green
  • icon-arrow-right txt-black
  • icon-arrow-right txt-green
  • icon-caret-right txt-black
  • icon-caret-right txt-red
  • icon-circle-arrow-right txt-black
  • icon-circle-arrow-right txt-blue
  • icon-chevron-right txt-black
  • icon-chevron-right txt-red
  1. <ul class="icons">
  2. <li><i class="icon-ok txt-black"></i>Etiam vulputate...
  3. </li>
  4. </ul>

Blockquote

Curabitur sed laoreet diam. Nam erat nunc, cursus at gravida ut, dapibus ut urna. Sed aliquet laoreet arcu ac hendrerit.
  1. <blockquote>Curabitur...</blockquote>

Curabitur sed laoreet diam. Nam erat nunc, cursus at gravida ut, dapibus ut urna.

Claudia Waston
CEO, LoremBKL INC
  1. <blockquote>
  2. <p>Curabitur sed...</p>
  3. </blockquote>
Curabitur sed laoreet diam. Nam erat nunc, cursus at gravida ut, dapibus ut urna.
  1. <blockquote>
  2. <p class="quote-txt">Curabitur...</p>
  3. </blockquote>

Custom Tabs

class="nav nav-tabs"
Tab#2 Text
Tab#3 Text
class="nav nav-tabs tab-separated"
Tab#2 Text
Tab#3 Text

Custom Pagination

Videos

YouTube

Vimeo

Width and Height

Width in Percentage (%)
w5pc w8pc w10pc
w15pc w18pc w20pc
w25pc w28pc w30pc
w35pc w38pc w40pc
w45pc w48pc w50pc
w55pc w58pc w60pc
w65pc w68pc w70pc
w75pc w78pc w80pc
w85pc w88pc w90pc
w95pc w98pc w100pc

Width in Pixel
w50px w80px w100px
w150px w180px w200px
w250px w280px w300px
w350px w380px w400px
w450px w40px w500px

Height in Pixel
hgt100px hgt140px hgt150px hgt180px
hgt240px hgt250px hgt280px hgt300px

Line Height

lh24 lh30 lh40 lh50 lh60 lh90

Alignment

desktop = desktop only. Not for mobile or tablets txt-center txt-center-desktop
txt-left txt-left-desktop
txt-right txt-right-desktop

fleft fleft-desktop float:left
fright fleft-desktop float:right

overflow-scroll overflow-hidden

clearL clear:left
clearR clear:right

blk display:block;
blk-none display:none;
blk-inln display:inline;
blk-table display:table;

pos-relative position:relative;
pos-absolute position:absolute;
pos-inherit position:inherit;

Buttons

class="btn"

class="btn btn-primary"

class="btn btn-info"

class="btn btn-success"

class="btn btn-warning"

class="btn btn-danger"

class="btn btn-inverse"

class="btn btn-yellow"

class="btn btn-red"

Red Decorated
class="btn btn-red"

class="btn btn-link"


class="btn btn-large btn-primary"


class="btn btn-primary"


class="btn btn-small btn-primary"


class="btn btn-mini btn-primary"

Border and Image

class="brdr-btm"


class="brdr-top"


Grey Border class="brdr-grey"


Grey Border Bottom class="brdr-btm-grey"


Left divider border
class="brdr-right-divider"


Move mouse cursor over image to view zoom icon

  1. <div class="relative-block">
  2. <img src="image-source" />
  3. <a href="link" class="hover-effect">
  4. <span class="zoom"></span>
  5. </a></div>
You can use any icon class here
  1. <div class="relative-block">
  2. <img src="image-source" />
  3. <a href="link" class="hover-effect">
  4. <i class="icon-paper-clip"></i>
  5. </a></div>
  1. <div class="relative-block">
  2. <img src="image-source" />
  3. <a href="link" class="hover-effect">
  4. <span class="link"></span>
  5. </a></div>