• Facebook
  • Twitter

Charlotte – 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:

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

In order to create mega menus read the documentation here:

Yamm 3 Documentation


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. Snap mobile
2. Sidebar
3. Content
4. Frame box
5. Image box
6. Contact
7. Popup
8. Sliders
9. Animations
10. Food box
11. To Top button
12. Navigations blog
13. Blog section
15. Google Map
16. Loader


Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

  • Charlotte uses utilities for the following categories:
  • Typography
  • Display Types
  • Paddings
  • Margins
  • Line height
  • Borders
  • Colors
  • Transform
  • Section elements


Charlotte comes with the following template for blog posts

Blog post

Blog post

You can use it with the following HTML markup:

Check also how our blog comments look like

Blog comments

Blog comments

Use it with the following HTML markup:


Display your posts on several pages and navigate between them with simple pagination.



Use for it simple HTML markup:


We use several types of sliders in Charlotte.
Main Slider

Main slider

Main slider

HTML markup:


gallery slider

gallery slider

HTML markup:

Gallery Simple

Simple gallery

Simple gallery

HTML markup:

To use any of the following sliders you need to include javascript, which can be found here.


Check all buttons, that you can create with Charlotte!



Use the following basic HTML markup:

And of the following variations:
Types of buttons:
– btn
– btn-sm
– btn-md

Different looks:



Social Buttons

There are two available types of social buttons:

  • rounded buttons – it’s a default type, which will be displayed when you use in markup class ct-socials
    Rounded socials buttons

    Rounded socials buttons

  • squared buttons – can be used with class ct-socials–square
    Squared socials buttons

    Squared socials buttons

Both types use the following basic HTML markup:


Check our beautiful accordion!



You can use it with simple HTML markup:


You can easily display your content in Tabs.



Categories widget

Use simple HTML markup to display a widget.

Categories widget

Categories widget

HTML markup:


All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:

  • HTML/assets/js/jquery.min.js – Jquery Plugin
  • HTML/assets/js/bootstrap.min.js – Bootstrap Plugin
  • HTML/assets/js/placeholder.min.js
  • HTML/assets/js/easing.1.3.js
  • HTML/assets/js/device.min.js
  • HTML/assets/js/jquery.browser.min.js
  • HTML/assets/js/snap.min.js – Snap Plugin is for responsive menu
  • HTML/assets/js/jquery.appear.js
  • HTML/assets/js/masonry.min.js – This is using in home page and in gallery
  • HTML/assets/plugins/owl/owl.carousel.min.js – slider plugin
  • HTML/assets/plugins/owl/init.js
  • HTML/assets/js/portfolio/imagesloaded.js – Needed for gallery
  • HTML/assets/plugins/magnific-popup/jquery.magnific.min.js – Needed for gallery, using when you want to see a big image after click on thumbnail
  • HTML/assets/plugins/magnific-popup/init.js
  • HTML/assets/js/main.js – Main scripts
  • HTML/assets/js/less.min.js

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

  • data-location – address to show
  • data-height – map height (if undefined height will be 220px)
  • data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here
HTML Markup:

All javascript code can be found in js/main.js file.


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/


This plugin is used to make graphics.
Documentation: http://www.chartjs.org/

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!