• Facebook
  • Twitter

Houses – Responsive HTML5 Template

Support Our Blog

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!


Scope of free support


We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

HTML Structure

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

Page structure

Below you will find default page structure :

CSS Files and Structure

If you would like to edit the color, font, or style of any elements, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.


So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.


The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:


We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

  1. Animations
  2. Divided Section
  3. List Box
  4. Promo
  5. Divided Widget
  6. Counter Box
  7. Ratings
  8. Weather
  9. Board
  10. Google Map
  11. Headroom
  12. Blog Box
  13. Pagination
  14. Lists
  15. Bootsrap Media
  16. Categories
  17. Dividers
  18. Media section, owl thumbnails
  19. Divided Media Sections
  20. Info Boxes
  21. Calendar
  22. Divider slider
  23. Testimonial
  24. Date picker
  25. Contact
  26. Gallery Container

Navigation Menu

Scroll page down to see animated fixed menu.

What you need to do is put the proper class to the body for example (ct-headroom–scrollUpMenu):

We han have fixed menu, animated, hided etc. We can add the moment when navbar should disappear, show itself etc.


 The whole docs how to use ir properly, is in the_../assets/plugins/headroom/init.js


There are 3 pages for houses listing:

  • book slider
  • book 2 columns
  • book 3 columns

EXAMPLE (book slider):

And there is common book page.


Use one of two elements dedicated for ratings:

  • ratingBox
  • rating stars:

Board and wallBox

Houses comes with board content on the top of the footer and wallBox elements:


Info Box

Info box.



We have few kinds of blogs in {Theme):

  • normal index blog
  • blog sidebar left
  • blog full width
  • blog single post.

Common blog post looks like:

We can put there any images, video, audio or slider medias. An example:

After entering any blog to blog single post we’ll get full blog post.


Navigate between blog posts with simple pagination:

How it looks?


Widgets can be used in footer and sidebar.


Sidebar widgets:


Bootstrap media

Houses comes with several variations for Bootstrap media – read more about Bootstrap media object:

  • media
  • media-slider
  • media-sidebar
  • media-author
  • media-comment

Code snippet:





All media can be nested inside its parent media-body.


All sliders included in Houses have the following common HTML markup:

There are three types of slider basis on this markup. To select each type you need to add one of the following CSS classes to <div class="item"> tag:


Slider -type 1

Slider -type 1


Slider - type 2

Slider – type 2

owl-carousel–arrowsOutside – navigation arrows will be displayed outside the slider content

Remember to include the following script in page with slider:

Learn more:
Check slider advanced option in plugin documentation.

Gallery and Magnific Popup Image

Use gallery with Magnific Popup Images with simple HTML markup:

Inside the gallery:

We put ct-js-popupGallery to the container which is going to be parent of certain gallery. And then we add one image and other images with empty links so that is why we can achieve effect of many galliers in one pages after one click.



Gallery Box

Gallery Box

Gallery Box

Put any image in columns in Gallery Box and you’ll get equal elements as images.
HTML markup:


There are several available variations of List Elements :

  • ct-list
  • ct-list–extended
  • ct-list–tagged
  • ct-list–colour
  • ct-list–taggedNoBorder

Common HTML markup:


ct-list ct-list–extended

ct-list ct-list–tagged

ct-list ct-list–colour

ct-list ct-list–taggedNoBorder


Each testimonial containes user’s feedback and his/her picture.




Use the simple HTML markup to create a button:

Define button size by adding one of the following classes to HTML:

  • btn
  • btn-xs
  • btn-sm
  • btn-lg

And select one of the following color variations:

  • btn-default
  • btn-primary
  • btn-secondary
  • btn-link
  • btn-transparent


Houses comes with two types of socials. Each type has it’s CSS variation:




Small socials

Small socials

Both types have the same basic HTML markup:


We’re using tooltips for each social button.



Tooltip can be added with the following HTML markup:

You can change tooltip placement also to:

  • bottom,
  • left,
  • right,

Media Sections

There are three types if media sections:

  • Parallax,
  • Video,
  • Kenburns

Inside each of them you can add your custom content.

We recommend you to use at least 1900px widht image as background
HTML markup:

Consider having to 2 extended files: mp4 and webm.
HTML markup:

In kenburs we can add 3 images.
HTML markup:

Require scripts for Media sections:

Divided Section

We have two divided sections on media sections:

– ct-dividedSection–primary

– ct-dividedSection–secondary


Divided Media Section

We have divided media section where on the left side there is a video frame.

Divided Section Widget (simpleWeather)

There is divided section widget where we have plugin weather on the right side.

To add weather to any element we inject this code snippet:


Javascript markup (in main.js file) 

To set your location insert the name of the location or the latitude/longitude param.

Script Source

For more information please check plugin documentation: LINK



All javascripts are placed in folder /js.

Javascript library structure

Javascript library structure

In main.js file we implement all functions calls.
This theme uses following Javascript scripts:

Files needed for initialising the animation number after loading pages.

Scripts for choosing the date from small calendar and attaching it to the input form.

This calendar is devoted to planning the events in the calendar. User can put some events there and review them between e.g. months, years etc.

Plugin needed for displaying google map on the page.

Needed for galleries and their popups images where we can review them with slides via arrows.

Plugin which creates select box for select tag in the page. It generates html code via javascript so that each browser can have the same select box.

Weather plugin where we can see weathe on live.

One big file where are minifixed javascript files:_ 1.jquery 2.boostrap 3.placeholder 4. easing 5. device.min.js 6. jquery browser 7.Snap min JS 8. jquery appear_

The main javascript initializaions and other major snippets.

Media sections where we can add parralax, kenburns or video to the section. Dynamical content of medias.

Animated/fixed navbars. Plugin needed for detecting scrollbar and attaching animations for menu.

Files which initialize sliders in the page.


This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/


Houses comes extenden calendar where you can attach any info events into it in javascript. If you want to invoke calendar, the only one thing is to put the code snippet in HTML:

Javascript Example of events, how to add:


Full calendar documentation: http://fullcalendar.io/docs/

Sources & Credits

The following sources and files have been used to build up this theme

Elite Author
We are elite
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!