We have worked over the original Bootstrap classes and added 2 more variations for black and white.

Default Primary Info Success Warning Danger Black

Default Primary Info Success Warning Danger Black White

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-black">Black</button>
<button class="btn btn-white">White</button>

<button class="btn btn-fill btn-default">Default</button>
<button class="btn btn-fill btn-primary">Primary</button>
<button class="btn btn-fill btn-info">Info</button>
<button class="btn btn-fill btn-success">Success</button>
<button class="btn btn-fill btn-warning">Warning</button>
<button class="btn btn-fill btn-danger">Danger</button>
<button class="btn btn-fill btn-black">Black</button>
<button class="btn btn-fill btn-white">White</button>
    			        

Default Button Filled Button Round Button Simple Button

<button href="#fakelink" class="btn ">Default Button</button>
<button href="#fakelink" class="btn btn-fill">Filled Button</button>
<button href="#fakelink" class="btn btn-round">Round Button</button>
<button href="#fakelink" class="btn btn-simple">Simple Button</button>
                        

Download Download Download Download

<button href="#fakelink" class="btn btn-fill btn-xs">Download</button>
<button href="#fakelink" class="btn btn-fill btn-sm">Download</button>
<button href="#fakelink" class="btn btn-fill">Download</button>
<button href="#fakelink" class="btn btn-fill btn-lg">Download</button>
                        

If you want for text inside your pages to match the colour of the buttons, we have alsi created text classes.

Gray: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Primary: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Info: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Success: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Warning: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Danger: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

<p class="text-gray"><b>Gray:</b> In Greek mythology...</p>
<p class="text-primary"><b>Primary:</b> In Greek mythology...</p>
<p class="text-info"><b>Info:</b> In Greek mythology...</p>
<p class="text-success"><b>Success:</b> In Greek mythology...</p>
<p class="text-warning"><b>Warning:</b> In Greek mythology...</p>
<p class="text-danger"><b>Danger:</b> In Greek mythology...</p>
                        

All colour classes available for buttons can also be applied for simple links.

Default Primary Info Success Warning Danger Black White

<a href="#fakelink" class="btn btn-simple">Default</a>
<a href="#fakelink" class="btn btn-simple btn-primary">Primary</a>
<a href="#fakelink" class="btn btn-simple btn-info">Info</a>
<a href="#fakelink" class="btn btn-simple btn-success">Success</a>
<a href="#fakelink" class="btn btn-simple btn-warning">Warning</a>
<a href="#fakelink" class="btn btn-simple btn-danger">Danger</a>
<a href="#fakelink" class="btn btn-simple btn-black">Black</a>
<a href="#fakelink" class="btn btn-simple btn-white">White</a>
                        

You can choose the colors that comes with the same options as the buttons.

Default Primary Info Success Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-info">Info</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

                        

We have restyled the dropdown and added a more subtle animation. You can see a live example below. You can also add colors to the dropdown-menu adding the classes dropdown-[info/success/warning/danger].

<div class="dropdown">
	<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
    	Regular
    	<b class="caret"></b>
	</a>
	<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><a href="#">Separated link</a></li>
	</ul>
</div>

<div class="dropdown">
	<a href="#" class="btn dropdown-toggle" data-toggle="dropdown">
    	Danger Color
    	<b class="caret"></b>
	</a>
	<ul class="dropdown-menu dropdown-danger">
    	<li><a href="#">Action</a></li>
    	<li><a href="#">Another action</a></li>
    	<li><a href="#">Something else here</a></li>
    	<li><a href="#">Separated link</a></li>
	</ul>
</div>
                        

When you are creating the headers for the pages, you have multiple filter options. Since the majority of headers also need a title, it is best to add a filter over the image you are using. You have the option to use filters that are full colour or have gradient colours. The basic, black class is 'filter'. If you want to add full colour you can choose from one of the following classes 'filter-color-[black/gold/green/blue/purple]'. If you want to add filters with gradient colours, you can choose from the following classes filter-gradient-[black/gold/green/blue/purple].

H1 Gaia was the great mother of all.

H2 Gaia was the great mother of all.

H3 Gaia was the great mother of all: the primal Greek Mother Goddess.

H4 Gaia was the great mother of all: the primal Greek Mother Goddess.

H5 Gaia was the great mother of all: the primal Greek Mother Goddess.

H6 Gaia was the great mother of all: the primal Greek Mother Goddess.

p Gaia was the great mother of all: the primal Greek Mother Goddess.

There are 202 Stroke Icons Handcrafted by our friends from Pixeden. View all icons here.

<i class="pe-7s-car"></i>

The general class for a card is called card. All cards have also a plain version, without the background and shadow, and you can reach it by using the card-plain class.

<div class="card card-blog">
     <a href="#gaia" class="header">
         <img src="../assets/img/header-6.jpeg" class="image-header">
     </a>
     <div class="content">
         <h6 class="card-date">Feb 17</h6>
         <a href="#gaia" class="card-title">
             <h3>Nature &amp; The Catch of the Day</h3>
         </a>
         <div class="line-divider line-danger"></div>
         <h6 class="card-category">Nature</h6>
     </div>
 </div>

                        

<div class="card card-blog card-plain">
     <a href="#gaia" class="header">
         <img src="../assets/img/header-6.jpeg" class="image-header">
     </a>
     <div class="content">
         <h6 class="card-date">Feb 17</h6>
         <a href="#gaia" class="card-title">
             <h3>Nature &amp; The Catch of the Day</h3>
         </a>
         <div class="line-divider line-danger"></div>
         <h6 class="card-category">Nature</h6>
     </div>
 </div>

                        

<div class="card card-blog">
    <a href="javascript:;" class="header">
        <img src="../assets/img/header-7.jpeg" class="image-header">
    </a>
    <div class="content">
        <div class="circle-black">
            <div class="circle">
                <div class="date-wrapper">
                    <span class="month">Apr</span>
                    <span class="date">12</span>
                </div>
            </div>
        </div>
        <a href="javascript:;" class="card-title"><h3>We Are Here to Make Life Better</h3></a>
        <h6 class="card-category text-warning">Life Tips &amp; Tricks</h6>
        <p class="text-description text-gray">Royère doesn't make a Polar bear bed but the Polar bear couch is my favorite piece of furniture we own The Pablo pop up was almost a pop up of influence.</p>
    </div>
</div>

                        

<div class="card card-price">
    <div class="content">
        <h4 class="title-header">
            free trial
            <br>
            <small class="subtitle-header">month</small>
        </h4>
        <div class="price">
            <i class="fa fa-dollar"></i>
            <div class="number text-danger">0</div>
        </div>
        <p class="text-description">
            15 Messages<br>
            5 Contacts<br>
            <span>12/5 Support</span>
        </p>
        <div class="text-center">
            <button type="button" class="btn btn-danger btn-round btn-fill">
                Get Started
            </button>
        </div>
    </div>
</div>

                    

Besides the default navbar, we added 5 new colors: blue, azure, green, orange, red. If you want to use one of them, you have to replace the navbar-default with the class for the chosen color navbr-ct-[primary | blue | green | orange | red].

<nav class="navbar navbar-ct-primary" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-example">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-example">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

                        

Info Area

Our information areas are created using icons,a title and a description. The default color for the icon is grey and you can use other colors by using the corresponding class text-{ primary | info | success | warning | danger }.

<div class="info-icon">
    <div class="icon text-danger">
        <i class="pe-7s-car"></i>
    </div>
    <h3>Delivery</h3>
    <p class="description">We sketch your wardrobe down to the last detail and present it to you.</p>
</div>

                    

Each page from the archive is composed of parts called sections. Each section has modular information. As you will be able to see, there are sections that contain description, pictures, quotes, etc. Each section has 2 background possibilities. The default one, for the 'section' class is the white background. To use a gray background, you will need to add the 'section-gray' class.