Bootstrap Templates News

Bootstrap Templates Launched at TemplateMonster

5/5 (1)

Eighteen months ago nobody couldn't even imagine that web design community will be rocked to bottom with Bootstrap framework. Previously the only one association with the word bootstrap was something like this:

Now we've got an absolutely new connotation for this word form. Let’s leave linguistics aside and get back to our subject at hand.

We'd like to remind you what Bootstrap is. Basically, it's a framework for quick development of front-end web interfaces that has changed the way how web designs are being built. Not surprisingly, in the few months that Bootstrap had been available, it rose to become the most popular repository on GitHub of all-times.

All native functionality of Bootstrap has already been described in one of our previous blog posts.

Today is a great date, TemplateMonster launches bootstrap templates. Feel free to visit presentational page of this product. Further we are going to speak about this symbiosis of Bootstrap and TemplateMonster's designs. These templates include native Bootstrap functionality and a great amount of fully-optimized unique add-ons developed specifically for this product line by TemplateMonster dev team.

Here is a brief of unique add-ons we'll run through in this blog post:

Bootstrap templates have one distinctive feature - they are built on the Bootstrap framework. To ease the acquaintance of the user with this new product all the documentation, is included into the template package. Each theme has a panel at the top with links to all must-read info.

First four links: Scaffolding, Base CSS, Components and Javascript are the native features of the framework. By the way we need to mention that native Bootstrap features complement the so-popular flow of responsive design. Each theme is based on the fluid grid and supports a handful of media queries:

LabelLayout widthColumn widthGutter width
Large display1200px and up70px30px
Default980px and up60px20px
Portrait tablets768px and above42px20px
Phones to tablets767px and belowFluid columns, no fixed widths
Phones480px and belowFluid columns, no fixed widths

Still there are four major layouts that will fit all popular hand-held devices.


Add-ons from TemplateMonster


The most important part here are the add-ons created by the Monster team. They are gathered in the last link on the panel shown above, here is what it contains:

Now, let's run through each of these links.




Under the Pages link you will find three subpages: Under Construction, Intro Page and 404 Page. The link allows to get a quick access to these pages.

Under Construction


Intro Page


404 Page




When you visit this page you'll be amazed with scrupulousness to the detail. Generally this page’ functionality allows you modify the look of your portfolio page. Upon default 7 portfolio layouts are available for you. Pick the one you will find the most appropriate for your website.

Simply clicking through the icons of the layouts you’ll get the access to the code of this layout: Copy+Paste the code into the page body and your portfolio page is ready...




The Slider page allows to modify the image flipping effects on your website pages. By default there are available two variants of Camera Slideshow Slider:

Basic Slider


Slider with thumbnails

Here is the list of possible image changing effects:

'simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight', 'scrollLeft', 'scrollRight', 'scrollHorz', 'scrollBottom', 'scrollTop'

The principle is the same as with Portfolio page, Copy+Paste the code and you slider is ready to flip on!


Social Media


The Social & Media page gives some tips on how to implement S&M features to the pages of your website:

To implement these widgets to your website pages all you need to is copy and paste the code, simple as a pie! You can add Twitter, Flickr, Facebook's likebox, YouTube videos, Vimeo videos, and bunch of other Social Media services using the icons provided in the documentation.


CSS3 Tricks


If you are fond of various visual effects that this part will a real Mecca for you. Here you will find numerous effects grouped into three categories: Image Hovers, Animated Buttons and CSS3 Styles. As it was described previously simply Copy and Paste the code and each effect will be immediately implemented.

Animated hover

Here you can choose animation for your images. Upon default 8 image hovering effects are available. Enjoy!


Pick preferable animation for the buttons on your website’s pages.

Simply add necessary class to the < a > tag to enable button animation:

 Button Text 


This part will be especially pleasant for special connoisseurs. All exquisite visual CCS3 effects are gathered here. Check them out!


This is what we wanted to tell you about the true Monster’s features in Bootstrap themes, and now it’s time to run through the ready-made products. Below you will find 5 awesome Bootstrap Themes produced by TemplateMonster development team! Check out the unique panel in the header of each template.

Business Website Template


Architecture Website Template


Fashion Website Template


Business Website Template


Business Website Template


Free Bootstrap Template


Leave a Reply

Your email address will not be published. Required fields are marked *