CSS Elements

Global CSS classes, fundamental HTML elements styled and enhanced with extensible classes.

Color Swatches

Texts, Text Selection

  • text-[primary, success, ...]
  • text-[lowercase, uppercase, capitalize]
  • text-[heavy, bold, regular, thin]
  • selection-[primary, success, ...] bg-selection-[primary, success, ...]
Examples HTML Code

LOWERCASE TEXT !

uppercase text !

capitalize text !

<p class="text-lowercase">LOWERCASE TEXT !</p>
<p class="text-uppercase">uppercase text !</p>
<p class="text-capitalize">capitalize text !</p>

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

<p class="text-primary ">...</p>
<p class="text-success ">...</p>
<p class="text-info ">...</p>
<p class="text-warning ">...</p>
<p class="text-danger ">...</p>
<p class="text-facebook ">...</p>
<p class="text-googleplus ">...</p>
<p class="text-twitter ">...</p>
<p class="text-github ">...</p>
<p class="text-dribbble ">...</p>
<p class="text-linkedin ">...</p>
<p class="text-dark ">...</p>
<p class="text-darker ">...</p>
<p class="text-gray ">...</p>
<p class="text-gray-light ">...</p>
<p class="text-primary-gray-base ">...</p>
<p class="text-primary-gray ">...</p>
<p class="text-primary-gray-light ">...</p>
<p class="text-light bg-primary-gray-base ">...</p>

Heavy Text !

Bold Text !

Regular Text !

Thin Text !

<p class=" h1 text-heavy">Heavy Text !</p>
<p class=" h1 text-bold">Bold Text !</p>
<p class=" h1 text-regular">Regular Text !</p>
<p class=" h1 text-thin">Thin Text !</p>

Select Paragraph

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Select Paragraph

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Select Paragraph

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="row">

    <div class="col-xs-12">
        <h4>Select Paragraph</h4>
        <p class="bg-selection-dribbble">
            ...
        </p>
    </div>

    <div class="col-xs-12">
        <h4>Select Paragraph</h4>
        <p class="selection-info bg-selection-light">
            ...
        </p>
    </div>

    <div class="col-xs-12">
        <h4>Select Paragraph</h4>
        <p class="selection-dark bg-selection-warning">
            ...
        </p>
    </div>
</div>

Buttons

  • btn-[primary, success, ...]
  • btn-outline-[primary, success, ...]
  • btn-circle btn-round
  • border-[0px, 1px, 2px, 3px, 4px, 5px]
  • btn-counter btn-counter-top-left
Examples HTML Code
<button type="button" class="btn btn-primary ">Primary</button>
<button type="button" class="btn btn-primary  btn-round">Primary</button>
<button type="button" class="btn btn-outline-primary ">Primary</button>
<button type="button" class="btn btn-outline-primary  border-2px">Primary</button>
<button type="button" class="btn btn-outline-primary  border-2px btn-circle">
	<i class="fa fa-heart fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-primary  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-heart mr-5px"></i>
    Primary
</button>
<button type="button" class="btn btn-success ">Success</button>
<button type="button" class="btn btn-success  btn-round">Success</button>
<button type="button" class="btn btn-outline-success ">Success</button>
<button type="button" class="btn btn-outline-success  border-2px">Success</button>
<button type="button" class="btn btn-outline-success  border-2px btn-circle">
	<i class="fa fa-check fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-success  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-check mr-5px"></i>
    Success
</button>
<button type="button" class="btn btn-info ">Info</button>
<button type="button" class="btn btn-info  btn-round">Info</button>
<button type="button" class="btn btn-outline-info ">Info</button>
<button type="button" class="btn btn-outline-info  border-2px">Info</button>
<button type="button" class="btn btn-outline-info  border-2px btn-circle">
	<i class="fa fa-info fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-info  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-info mr-5px"></i>
    Info
</button>
<button type="button" class="btn btn-warning ">Warning</button>
<button type="button" class="btn btn-warning  btn-round">Warning</button>
<button type="button" class="btn btn-outline-warning ">Warning</button>
<button type="button" class="btn btn-outline-warning  border-2px">Warning</button>
<button type="button" class="btn btn-outline-warning  border-2px btn-circle">
	<i class="fa fa-flash fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-warning  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-flash mr-5px"></i>
    Warning
</button>
<button type="button" class="btn btn-danger ">Danger</button>
<button type="button" class="btn btn-danger  btn-round">Danger</button>
<button type="button" class="btn btn-outline-danger ">Danger</button>
<button type="button" class="btn btn-outline-danger  border-2px">Danger</button>
<button type="button" class="btn btn-outline-danger  border-2px btn-circle">
	<i class="fa fa-close fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-danger  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-close mr-5px"></i>
    Danger
</button>
<button type="button" class="btn btn-facebook ">Facebook</button>
<button type="button" class="btn btn-facebook  btn-round">Facebook</button>
<button type="button" class="btn btn-outline-facebook ">Facebook</button>
<button type="button" class="btn btn-outline-facebook  border-2px">Facebook</button>
<button type="button" class="btn btn-outline-facebook  border-2px btn-circle">
	<i class="fa fa-facebook fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-facebook  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-facebook mr-5px"></i>
    Facebook
</button>
<button type="button" class="btn btn-googleplus ">Google Plus</button>
<button type="button" class="btn btn-googleplus  btn-round">Google Plus</button>
<button type="button" class="btn btn-outline-googleplus ">Google Plus</button>
<button type="button" class="btn btn-outline-googleplus  border-2px">Google Plus</button>
<button type="button" class="btn btn-outline-googleplus  border-2px btn-circle">
	<i class="fa fa-google-plus fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-googleplus  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-google-plus mr-5px"></i>
    Google Plus
</button>
<button type="button" class="btn btn-dribbble ">Dribbble</button>
<button type="button" class="btn btn-dribbble  btn-round">Dribbble</button>
<button type="button" class="btn btn-outline-dribbble ">Dribbble</button>
<button type="button" class="btn btn-outline-dribbble  border-2px">Dribbble</button>
<button type="button" class="btn btn-outline-dribbble  border-2px btn-circle">
	<i class="fa fa-dribbble fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-dribbble  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-dribbble mr-5px"></i>
    Dribbble
</button>
<button type="button" class="btn btn-twitter ">Twitter</button>
<button type="button" class="btn btn-twitter  btn-round">Twitter</button>
<button type="button" class="btn btn-outline-twitter ">Twitter</button>
<button type="button" class="btn btn-outline-twitter  border-2px">Twitter</button>
<button type="button" class="btn btn-outline-twitter  border-2px btn-circle">
	<i class="fa fa-twitter fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-twitter  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-twitter mr-5px"></i>
    Twitter
</button>
<button type="button" class="btn btn-github ">Github</button>
<button type="button" class="btn btn-github  btn-round">Github</button>
<button type="button" class="btn btn-outline-github ">Github</button>
<button type="button" class="btn btn-outline-github  border-2px">Github</button>
<button type="button" class="btn btn-outline-github  border-2px btn-circle">
	<i class="fa fa-github-alt fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-github  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-github-alt mr-5px"></i>
    Github
</button>
<button type="button" class="btn btn-linkedin ">Linkedin</button>
<button type="button" class="btn btn-linkedin  btn-round">Linkedin</button>
<button type="button" class="btn btn-outline-linkedin ">Linkedin</button>
<button type="button" class="btn btn-outline-linkedin  border-2px">Linkedin</button>
<button type="button" class="btn btn-outline-linkedin  border-2px btn-circle">
	<i class="fa fa-linkedin fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-linkedin  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-linkedin mr-5px"></i>
    Linkedin
</button>
<button type="button" class="btn btn-darker ">Darker</button>
<button type="button" class="btn btn-darker  btn-round">Darker</button>
<button type="button" class="btn btn-outline-darker ">Darker</button>
<button type="button" class="btn btn-outline-darker  border-2px">Darker</button>
<button type="button" class="btn btn-outline-darker  border-2px btn-circle">
	<i class="fa fa-heart fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-darker  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-heart mr-5px"></i>
    Darker
</button>
<button type="button" class="btn btn-dark ">Dark</button>
<button type="button" class="btn btn-dark  btn-round">Dark</button>
<button type="button" class="btn btn-outline-dark ">Dark</button>
<button type="button" class="btn btn-outline-dark  border-2px">Dark</button>
<button type="button" class="btn btn-outline-dark  border-2px btn-circle">
	<i class="fa fa-heart fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-dark  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-heart mr-5px"></i>
    Dark
</button>
<button type="button" class="btn btn-gray ">Gray</button>
<button type="button" class="btn btn-gray  btn-round">Gray</button>
<button type="button" class="btn btn-outline-gray ">Gray</button>
<button type="button" class="btn btn-outline-gray  border-2px">Gray</button>
<button type="button" class="btn btn-outline-gray  border-2px btn-circle">
	<i class="fa fa-heart fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-gray  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-heart mr-5px"></i>
    Gray
</button>
<button type="button" class="btn btn-primary-gray-base ">Primary Gray Base</button>
<button type="button" class="btn btn-primary-gray-base  btn-round">Primary Gray Base</button>
<button type="button" class="btn btn-outline-primary-gray-base ">Primary Gray Base</button>
<button type="button" class="btn btn-outline-primary-gray-base  border-2px">Primary Gray Base</button>
<button type="button" class="btn btn-outline-primary-gray-base  border-2px btn-circle">
	<i class="fa fa-heart fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-primary-gray-base  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-heart mr-5px"></i>
    Primary Gray Base
</button>
<button type="button" class="btn btn-primary-gray ">Primary Gray</button>
<button type="button" class="btn btn-primary-gray  btn-round">Primary Gray</button>
<button type="button" class="btn btn-outline-primary-gray ">Primary Gray</button>
<button type="button" class="btn btn-outline-primary-gray  border-2px">Primary Gray</button>
<button type="button" class="btn btn-outline-primary-gray  border-2px btn-circle">
	<i class="fa fa-heart fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-primary-gray  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-heart mr-5px"></i>
    Primary Gray
</button>
<button type="button" class="btn btn-primary-gray-light ">Primary Gray Light</button>
<button type="button" class="btn btn-primary-gray-light  btn-round">Primary Gray Light</button>
<button type="button" class="btn btn-outline-primary-gray-light ">Primary Gray Light</button>
<button type="button" class="btn btn-outline-primary-gray-light  border-2px">Primary Gray Light</button>
<button type="button" class="btn btn-outline-primary-gray-light  border-2px btn-circle">
	<i class="fa fa-heart fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-primary-gray-light  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-heart mr-5px"></i>
    Primary Gray Light
</button>
<button type="button" class="btn btn-light ">Light</button>
<button type="button" class="btn btn-light  btn-round">Light</button>
<button type="button" class="btn btn-outline-light ">Light</button>
<button type="button" class="btn btn-outline-light  border-2px">Light</button>
<button type="button" class="btn btn-outline-light  border-2px btn-circle">
	<i class="fa fa-heart fa-lg"></i>
</button>
<button type="button" class="btn btn-outline-light  btn-round btn-counter border-2px" data-counter="500k">
    <i class="fa fa-heart mr-5px"></i>
    Light
</button>

Buttons Group

  • btn-group-circle
  • btn-group-round
  • btn-group-border-2px
Examples HTML Code
<div class="btn-group">
	<button type="button" class="btn btn-primary">
		<i class="fa fa-align-left"></i>
	</button>
	<button type="button" class="btn btn-primary">
		<i class="fa fa-align-center"></i>
	</button>
	<button type="button" class="btn btn-primary">
		<i class="fa fa-align-right"></i>
	</button>
</div>
<div class="btn-group btn-group-border-2px">
	<button type="button" class="btn btn-outline-info">
		<i class="fa fa-align-left"></i>
	</button>
	<button type="button" class="btn btn-outline-info">
		<i class="fa fa-align-center"></i>
	</button>
	<button type="button" class="btn btn-outline-info">
		<i class="fa fa-align-right"></i>
	</button>
</div>
<div class="btn-group btn-group-vertical btn-group-border-2px">
	<button type="button" class="btn btn-outline-googleplus">
		<i class="fa fa-align-left"></i>
	</button>
	<button type="button" class="btn btn-outline-googleplus">
		<i class="fa fa-align-center"></i>
	</button>
	<button type="button" class="btn btn-outline-googleplus">
		<i class="fa fa-align-right"></i>
	</button>
</div>
<div class="btn-group btn-group-round">
	<button type="button" class="btn btn-outline-dribbble">
		<i class="fa fa-dribbble"></i>
	</button>
	<button type="button" class="btn btn-outline-twitter">
		<i class="fa fa-twitter"></i>
	</button>
	<button type="button" class="btn btn-outline-github">
		<i class="fa fa-github-alt"></i>
	</button>
</div>
<ul class="list-inline btn-group-circle btn-group-border-2px btn-group-lg">
	<li>
		<button type="button" class="btn btn-outline-facebook">
			<i class="fa fa-facebook fa-lg"></i>
		</button></li>
	<li>
		<button type="button" class="btn btn-outline-googleplus">
			<i class="fa fa-google-plus fa-lg"></i>
		</button></li>
	<li>
		<button type="button" class="btn btn-outline-twitter">
			<i class="fa fa-twitter fa-lg"></i>
		</button></li>
	<li>
		<button type="button" class="btn btn-outline-dribbble">
			<i class="fa fa-dribbble fa-lg"></i>
		</button></li>
</ul>

Headings Lines & Colors

Examples

Heading One

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Heading Two

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Heading Three

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

HTML Code
<div id="headings-columns-1" class="row headings-info text-primary-gray">
    <div class="col-md-4">
        <h3>Heading One</h3>
        <p>...</p>
    </div>
    <div class="col-md-4">
        <h3>Heading Two</h3>
        <p>...</p>
    </div>
    <div class="col-md-4">
        <h3>Heading Three</h3>
        <p>...</p>
    </div>
</div>
Examples
HTML Code
<div id="headings-columns-2" class="row headings-dribbble link-primary-gray-base link-hover-info">

    <dl class="col-md-4 list-flat">
        <dt class="h5" >Portfolio</dt>
        <dd><a href="#">Web Design</a></dd>
        <dd><a href="#">Branding &amp; Identity</a></dd>
        <dd><a href="#">Mobile Design</a></dd>
        <dd><a href="#">Print</a></dd>
        <dd><a href="#">User Interface</a></dd>
    </dl>

    ...

</div>
Examples
HTML Code
<div id="headings-columns-3" class="row link-primary-gray text-center">

    <dl class="col-md-4 headings-github list-flat">
        <dt class="text-uppercase heading-line-github h5">Portfolio</dt>
        <dd><a href="#">Web Design</a></dd>
        <dd><a href="#">Branding &amp; Identity</a></dd>
        <dd><a href="#">Mobile Design</a></dd>
        <dd><a href="#">Print</a></dd>
        <dd><a href="#">User Interface</a></dd>
    </dl>

    <dl class="col-md-4 headings-info list-flat">
     	<dt class="text-uppercase heading-line-info h5">Portfolio</dt>
     	...
    </dl>

    <dl class="col-md-4 headings-dribbble list-flat">
		<dt class="text-uppercase heading-line-dribbble h5" >Portfolio</dt>
		...
    </dl>

</div>

Lists - responsive lists

Examples
  • photo_01
  • photo_02
  • photo_03
  • photo_04
  • photo_05
  • photo_06
  • photo_07
  • photo_08
  • photo_09
HTML Code
<div class="row">
    <ul class="list-grid col-md-3">
        <li>
            <button class="btn btn-outline-primary-gray">Web Design</button>
        </li>
       	...
    </ul>

    <ul class="list-grid list-inline col-md-4">
        <li>
            <button class="btn btn-outline-primary-gray">Web Design</button>
        </li>
        ...
    </ul>

    <ul class="list-grid list-inline col-md-5">
        <li class="col-sm-4">
            <img class="img-responsive" src="../photo_01.jpg">
        </li>
		...
    </ul>
</div>
Examples
  • photo_01
  • photo_02
  • photo_03
  • photo_04
  • photo_01
  • photo_02
  • photo_03
  • photo_04
  • photo_05
  • photo_06
  • photo_07
  • photo_08
HTML Code
<div class="row">

    <ul class="list-grid list-grid-gutter-30px list-grid-sm-6 col-md-6">
        <li>
            <img class="img-responsive" src="../photo_01.jpg">
        </li>
        ...

    </ul>

    <ul class="list-grid list-grid-gutter-15px list-grid-sm-3 col-md-6">
        <li>
            <img class="img-responsive" src="../photo_01.jpg">
        </li>
        ...
    </ul>

</div>
Examples
HTML Code
<ul class="row list-grid list-grid-gutter-60px list-grid-sm-3 list-right-lines ">
    <li>
        <dl class="list-grid list-grid-gutter-30px list-bottom-lines">
            <dt class="h5" >Portfolio</dt>
            <dd><a href="#">Web Design</a></dd>
            <dd><a href="#">Branding </a></dd>
            <dd><a href="#">Mobile Design</a></dd>
        </dl>
    </li>
    <li>
        <dl class="list-grid list-grid-gutter-30px list-bottom-lines">
            ...
        </dl>
    </li>
    <li>
        <dl class="list-grid list-grid-gutter-30px list-bottom-lines">
            ...
        </dl>
    </li>
    <li>
        <dl class="list-grid list-grid-gutter-30px list-bottom-lines">
            ...
        </dl>
    </li>

</ul>

Borders, Borders Round, Shadows

Examples
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
HTML Code
<div class="row">

    <div class="col-md-3">

        <div class="p-15px border-solid">
            ...
        </div>

    </div>
    <!-- /col-md-3 -->

    <div class="col-md-3">

        <div class="p-15px border-solid border-1px border-left-5px">
            ...
        </div>

    </div>
    <!-- /col-md-3 -->

    <div class="col-md-3">

        <div class="p-15px border-solid border-1px border-left-5px border-info">
            ...
        </div>

    </div>
    <!-- /col-md-3 -->

    <div class="col-md-3">

        <div class="p-15px border-dashed border-1px border-twitter">
            ...
        </div>

    </div>
    <!-- /col-md-3 -->

</div>
<!-- /row -->
Examples
  • Lorem Ipsum is simply dummy text of the printing and typesetti ng industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetti ng industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
HTML Code
<ul class="list-grid list-inline list-grid-gutter-10px list-grid-md-2">

    <li>
        <div class="p-15px border-solid border-1px text-default">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </li>

    <li>
        <div class="p-15px border-solid border-1px text-primary round-3px">
            ...
        </div>
    </li>

    <li>
        <div class="p-15px border-solid border-1px text-info round-5px">
            ...
        </div>
    </li>

    <li>
        <div class="p-15px border-solid border-1px text-dribbble round-7px">
            ...
        </div>
    </li>

    <li>
        <div class="p-15px border-solid border-1px text-github round-10px">
            ...
        </div>
    </li>

    <li>
        <div class="p-15px border-solid border-1px text-facebook round-15px">
            ...
        </div>
    </li>

</ul>
Examples
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
HTML Code
<ul class="list-grid list-inline list-grid-gutter-10px list-grid-md-2">

    <li>
        <div class="p-15px text-dark shadow-depth-1">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </li>
    <li>
        <div class="p-15px text-dark shadow-depth-2">
            ...
        </div>
    </li>
    <li>
        <div class="p-15px text-dark shadow-depth-3">
            ...
        </div>
    </li>
    <li>
        <div class="p-15px text-dark shadow-depth-4">
            ...
        </div>
    </li>
    <li>
        <div class="p-15px text-dark shadow-depth-5">
            ...
        </div>
    </li>

</ul>

Forms

Examples

HTML Code
<div class="row">

    <div class="col-md-6 col-md-offset-2">
        <form class="" action="">
            <p>
                <input class="form-control input-sm" placeholder="Input Small" type="text">
            </p>
            <p>
                <input class="form-control" placeholder="Input Base" type="text">
            </p>
            <p>
                <input class="form-control input-lg" placeholder="Input Large" type="text">
            </p>
            <p>
                <input class="form-control" disabled="" placeholder="Disabled Input" type="text">
            </p>
            <p>
                <textarea class="form-control" placeholder="Textarea" rows="7"></textarea>
            </p>
        </form>
    </div>
    <!-- /col-md-6 -->

</div>
<!-- /row -->
Examples
$ .00
$ .00
$ .00
HTML Code
<div class="row">

    <div class="col-md-6">

        <form class="" action="">

            <div class="form-group has-feedback">
                <input class="form-control" id="">
                <span class="form-control-feedback">
					<i class="fa fa-search "></i></span>
            </div>

            <div class="form-group has-feedback has-feedback-left">
                <span class="form-control-feedback form-control-feedback-left">
					<i class="fa fa-search "></i></span>
                <input class="form-control" id="">
            </div>

            <div class="form-group has-feedback has-feedback-both form-group-round">
                <span class="form-control-feedback form-control-feedback-left">
					<i class="fa fa-user "></i></span>
                <input class="form-control" id="" placeholder="User Name">
                <span class="form-control-feedback">
					<i class="fa fa-rotate-right fa-pulse "></i></span>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <input class="form-control" placeholder="1000" type="text">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>

            <div class="form-group has-github">
                <div class="input-group">
                    ...
                </div>
            </div>

            <div class="form-group has-github form-group-border-2px form-group-lg">
                <div class="input-group">
                    ...
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <input class="form-control" placeholder="Search..." type="text">
                    <span class="input-group-btn">
						<button type="submit" class="btn btn-primary" >Search</button>
					</span>
                </div>
            </div>

            <div class="form-group has-dribbble ">
                <div class="input-group input-group-lg input-group-border-2px input-group-round">

                    <input class="form-control" type="text">

                    <div class="input-group-btn">
                        <button type="button" tabindex="-1" class="btn btn-dribbble">Action</button>
                        <button type="button" data-toggle="dropdown" tabindex="-1"  class="btn btn-dribbble dropdown-toggle">
                            <span class="caret fa fa-angle-down"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a>
                            </li>
                            <li><a href="#">Another action</a>
                            </li>
                            <li><a href="#">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>

        </form>

    </div>
    <!-- /col-md-6 -->

    <div class="col-md-6">

        <form class="" action="">

            <div class="form-group has-success has-feedback">
                <label class="control-label" for="input-1">Input with success</label>
                <input class="form-control" id="input-1">
                <span class="form-control-feedback">
					<i class="fa fa-check"></i></span>
            </div>

            <div class="form-group has-warning has-feedback">
                ...
            </div>

            <div class="form-group has-info has-feedback">
                ...
            </div>

            <div class="form-group has-error has-feedback">
               ...
            </div>

            <div class="form-group has-primary has-feedback">
               ...
            </div>

            <div class="form-group has-twitter has-feedback">
               ...
            </div>

        </form>

    </div>
    <!-- /col-md-6 -->

</div>
<!-- /row -->

Cards

Examples
photo_01

2016 trendiest Wordpress plugins and themes

The WordPress Hot 100 lists the WordPress themes and plugins that are trending on GoDaddy’s servers ...

photo_01

2016 trendiest Wordpress plugins and themes

The WordPress Hot 100 lists the WordPress themes and plugins that are trending on GoDaddy’s servers ...

photo_01

2016 trendiest Wordpress plugins and themes

The WordPress Hot 100 lists the WordPress themes and plugins that are trending on GoDaddy’s servers ...

HTML Code
<div class="row">

    <div class="col-md-4 py-15px">
        <div class="card">
            <div class="card-img">
                <img src="assets/images/330x230/photo_01.jpg">
            </div>
            <div class="card-body">
                <ul class="card-meta  list-inline">
                    <li><a href="#" class=""><i class="fa fa-clock-o"></i> Nov 16, 2016</a></li>
                    <li><a href="#" class=""><i class="fa fa-user-o"></i> Jeffry way</a></li>
                </ul>
                <a class="" href="#">
                    <h4 class="card-title">2016 trendiest Wordpress plugins and themes</h4>
                </a>
                <div class="card-caption">
                    <p>The WordPress Hot 100 lists the WordPress themes and plugins that are trending on GoDaddy’s servers ...</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-outline-primary btn-xs" role="button">React</a>
                    <ul class="list-inline pull-right">
                        <li>
                            <a href="#" class=""><i class="fa fa-comment-o"></i> 17</a>
                        </li>
                        <li>
                            <a href="#" class=""><i class="fa fa-heart-o"></i> 15</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /card-body -->
        </div>
        <!-- /card -->
    </div>

    <div class="col-md-4 py-15px">
        <div class="card shadow-depth-2">
            <div class="card-img">
                <img src="assets/images/330x230/photo_01.jpg">
            </div>
            <div class="card-body">
                <ul class="card-meta  list-inline link-gray small">
                    <li><a href="#" class=""><i class="fa fa-clock-o"></i> Nov 16, 2016</a></li>
                    <li><a href="#" class=""><i class="fa fa-user-o"></i> Jeffry way</a></li>
                </ul>
                <a class="link-dribbble" href="#">
                    <h4 class="card-title">2016 trendiest Wordpress plugins and themes</h4>
                </a>
                <div class="card-caption">
                    <p>The WordPress Hot 100 lists the WordPress themes and plugins that are trending on GoDaddy’s servers ...</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-dribbble btn-xs" role="button">React</a>
                    <ul class="list-inline pull-right link-gray">
                        <li>
                            <a href="#" class=""><i class="fa fa-comment-o"></i> 17</a>
                        </li>
                        <li>
                            <a href="#" class=""><i class="fa fa-heart-o"></i> 15</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /card-body -->
        </div>
        <!-- /card -->
    </div>

    <div class="col-md-4 py-15px">
        <div class="card">
            <div class="card-img">
                <img class="round-7px" src="assets/images/330x230/photo_01.jpg">
            </div>
            <div class="card-body px-0px">
                <ul class="card-meta  list-inline link-gray small">
                    <li><a href="#" class=""><i class="fa fa-clock-o"></i> Nov 16, 2016</a></li>
                    <li><a href="#" class=""><i class="fa fa-user-o"></i> Jeffry way</a></li>
                </ul>
                <a class="link-dark" href="#">
                    <h4 class="card-title">2016 trendiest Wordpress plugins and themes</h4>
                </a>
                <div class="card-caption">
                    <p>The WordPress Hot 100 lists the WordPress themes and plugins that are trending on GoDaddy’s servers ...</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-outline-primary btn-xs" role="button">React</a>
                    <ul class="list-inline pull-right link-gray">
                        <li>
                            <a href="#" class=""><i class="fa fa-comment-o"></i> 17</a>
                        </li>
                        <li>
                            <a href="#" class=""><i class="fa fa-heart-o"></i> 15</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /card-body -->
        </div>
        <!-- /card -->
    </div>

</div>
<!-- /row -->
Examples

support

Our support teams work around the clock and are always available 24/7.

support

Our support teams work around the clock and are always available 24/7.

support

Our support teams work around the clock and are always available 24/7.

HTML Code
<div class="row">

    <div class="col-md-4 py-15px">
        <div class="card border-solid border-2px text-danger">
            <div class="card-body p-15px">
                <div class="icon">
                    <i class="fa fa-3x fa-support"></i>
                </div>
                <h4 class="text-capitalize text-dark">support</h4>
                <p>Our support teams work around the clock and are always available 24/7. </p>
            </div>
            <!-- /card-body -->
        </div>
        <!-- /card -->
    </div>

    <div class="col-md-4 py-15px">
        <div class="card card-info text-light text-center">
            <div class="card-body p-15px">
                <div class="icon">
                    <i class="fa fa-3x fa-support"></i>
                </div>
                <h4 class="text-capitalize">support</h4>
                <p>Our support teams work around the clock and are always available 24/7. </p>
            </div>
            <!-- /card-body -->
        </div>
        <!-- /card -->
    </div>

    <div class="col-md-4 py-15px">
        <div class="card card-warning border-double border-10px text-dark text-right">
            <div class="card-body p-15px">
                <div class="icon">
                    <i class="fa fa-3x fa-support"></i>
                </div>
                <h4 class="text-capitalize">support</h4>
                <p>Our support teams work around the clock and are always available 24/7. </p>
            </div>
            <!-- /card-body -->
        </div>
        <!-- /card -->
    </div>

</div>
<!-- /row -->
Examples
photo_06

support

Our support teams work around the clock and are always available 24/7.

HTML Code
<div class="row">

    <div class="col-md-5 py-15px">
        <div class="card text-light text-center ">
            <div style="opacity: 0.45" class="card-overlay card-dark"></div>

            <div class="card-img">
                <img src="assets/images/300x160/photo_06.jpg">
            </div>

            <div class="card-overlay card-overlay-top">
                <div class="card-body p-15px">
                    <div class="icon">
                        <i class="fa fa-3x fa-support"></i>
                    </div>
                    <h4 class="text-capitalize">support</h4>
                    <p class="mb-0px">Our support teams work around the clock and are always available 24/7. </p>
                </div>
                <!-- /card-body -->

            </div>

        </div>
        <!-- /card -->
    </div>

    <div class="col-md-5 py-15px">
            <a href="#" class="card link-light link-hover-warning text-center ">
                <div style="opacity: 0.55" class="card-overlay card-github card-hover-primary"></div>

                <div class="card-img">
                    <img src="assets/images/300x160/photo_08.jpg">
                </div>

                <div class="card-overlay card-overlay-top">
                    <div class="card-body p-15px">
                        <div class="icon">
                            <i class="fa fa-3x fa-support"></i>
                        </div>
                        <h4 class="text-capitalize">support</h4>
                        <p class="mb-0px">Our support teams work around the clock and are always available 24/7. </p>
                    </div>
                    <!-- /card-body -->

                </div>

            </a>
            <!-- /card -->
    </div>

</div>
<!-- /row -->

Margins, Negative Margins, Paddings

  • [m, mt, mr, mb, ml, mx, my]-[0px, 5px, 10px, 15px, 30px, 45px, 60px, 75px, 90px, auto]
    [m, mt, mr, mb, ml, mx, my]-[xs, sm, md, lg]-[0px, 5px, 10px, 15px, 30px, 45px, 60px, 75px, 90px, auto]
  • [nm, nmt, nmr, nmb, nml, nmx, nmy]-[0px, 5px, 10px, 15px, 30px, 45px, 60px, 75px, 90px]
    [nm, nmt, nmr, nmb, nml, nmx, nmy]-[xs, sm, md, lg]-[0px, 5px, 10px, 15px, 30px, 45px, 60px, 75px, 90px]
  • [p, pt, pr, pb, pl, px, py]-[0px, 5px, 10px, 15px, 30px, 45px, 60px, 75px, 90px]
    [p, pt, pr, pb, pl, px, py]-[xs, sm, md, lg]-[0px, 5px, 10px, 15px, 30px, 45px, 60px, 75px, 90px]
Examples HTML Code
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • margin: 15px
  • padding: 15px
<div class="bg-warning clearfix">

    <div class="bg-primary clearfix m-15px p-15px">

        <div class="bg-light text-dark">
            ...
        </div>

    </div>

</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • margin-top: 15px
  • padding-bottom: 15px
<div class="bg-warning clearfix">

    <div class="bg-primary clearfix mt-15px pb-15px">

        <div class="bg-light text-dark">
            ...
        </div>

    </div>

</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • margin-left: 15px
  • padding-right: 15px
<div class="bg-warning clearfix">

    <div class="bg-primary clearfix ml-15px pr-15px">

        <div class="bg-light text-dark">
            ...
        </div>

    </div>

</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • margin-top: 15px
  • margin-bottom: 15px
  • padding-right: 15px
  • padding-left: 15px
<div class="bg-warning clearfix">

    <div class="bg-primary clearfix my-15px px-15px">

        <div class="bg-light text-dark">
            ...
        </div>

    </div>

</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • margin-top: -60px
<div class="bg-warning clearfix mt-30px">

    <div class="bg-primary clearfix p-30px">

        <div class="bg-success nmt-60px">
            ...
        </div>

    </div>

</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • margin-bottom: -45px
  • margin-left: -45px
<div class="bg-warning clearfix mt-30px">

    <div class="bg-primary clearfix p-30px">

        <div class="bg-success nml-45px nmb-45px">
            ...
        </div>

    </div>

</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  1. Phones (<768px)
    • margin: 15px
    • padding: 15px
  2. Tablets (≥768px)
    • margin: 30px
    • padding: 30px
  3. Desktops (≥992px)
    • margin: 45px
    • padding: 45px
<div class="bg-warning clearfix">

    <div class="bg-primary clearfix m-xs-15px m-sm-30px m-md-45px p-xs-15 p-sm-30px p-md-45px">

        <div class="bg-light text-dark">
            ...
        </div>

    </div>

</div>

Blockquotes

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Someone famous in Source Title

Blockquote - align right

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. .

Blockquote - align left

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one..

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one..

Labels & Badges

Progress Bars

List Groups

Panels

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Dribbble

Panel content
Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter