The Grandiose Advent of Bootstrap Templates on TemplateMonster
Did you have the association with the word bootstrap other than this before?
After reading this blog post, the term will acquire an absolutely new sense for you.
So, according to our definition, a bootstrap is a framework for quick development of front-end web interfaces that has changed the way of web designs building for good and all. No wonder that since Bootstrap has become available, it turned into the most popular repository on GitHub, which is unprecedented.
You can get acquainted with all functional specifications of Bootstrap in this blog post.
Today is a special date as TemplateMonster launches Bootstrap templates. You are weclome to visit presentational page of this product. Hereinafter we will speak about the interpenetration of Bootstrap and TemplateMonster’s designs. The templates possess native Bootstrap functionality and large amount of fully-optimized original add-ons developed exclusively for this product line by TemplateMonster’s team.
All Bootstrap templates are built on the bootstrap framework. Comprehensive documentation on the product is enclosed into the template package. Each and every theme has a panel at the top with links to essential info the user should read.
Scaffolding, Base CSS, Components and Javascript links are native features of the framework. Please admit that native Bootstrap features complement the popular flow of responsive design. Each theme is based on the fluid grid and supports a certain number of media queries:
| Label | Layout width | Column width | Gutter width |
|---|---|---|---|
| Large display | 1200px and up | 70px | 30px |
| Default | 980px and up | 60px | 20px |
| Portrait tablets | 768px and above | 42px | 20px |
| Phones to tablets | 767px and below | Fluid columns, no fixed widths | |
| Phones | 480px and below | Fluid columns, no fixed widths | |
Four major layouts are preserved to fit all popular portable devices.
TemplateMonster’s Add-ons
Valuable TemplateMonster’s add-ons are compilated in the last link of the above panel, look what it contains:
Now, it’s time to visit each of those points.
Pages
Three subpages are hidden under the Pages link, they are: Under Construction, Intro Page and 404 Page. The link provides a quick access to these pages.
Under Construction
* * *
Intro Page
* * *
404 Page
Portfolio
The page’ functionality lets you transform the look of your portfolio page. 7 portfolio layout options are available in addition to the default one. Choose the arrangement that suits your website most.
Click the layout icons and get access to the relevant code, then Copy+Paste it into the page body and your portfolio page is done…
Below you see the example of the code of the first Portfolio page layout (the one on the screenshot):
Slider
The Slider page allows to change the image transition effects on your website pages. Two variants of Camera Slideshow Slider are available by default:
Basic Slider
* * *
Slider with thumbnails
Look at the amazing list of possible image flipping 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’
Follow the same principle used with Portfolio page: Copy+Paste the code and your slider is customized to your taste!
Social & Media
Social & Media page gives some guidelines on how to implement S&M features to your website pages:
If you want to integrate these widgets into your website pages, all you need to do is copy and paste the code, simple isn’t it? You can add Twitter, Flickr, Facebook’s likebox, YouTube videos, Vimeo videos, and a load of other Social Media services using the icons provided in the documentation.
CSS3 Tricks
Do you like various visual effects? Here you will find a bunch of them falling under three categories: Image Hovers, Animated Buttons and CSS3 Styles. Keep to the regular procedure, Copy and Paste the code and the effects will be immediately implemented.
Animated hover
Select the animation for your images here. 8 image hovering effects are available for you upon default.
* * *
Pick out animation for the buttons on your web pages.
Simply add the appropriate class to the following tag to enable button animation:
* * *
Try all dizzy visual CCS3 effects that are collected here for your gourmet taste!
* * *
We hope your interest to ultimate Monster’s features in Bootstrap themes is satisfied, and now it’s high time to browse through the ready-made products. Below we’ve posted 5 outstanding Bootstrap Themes worked out by TemplateMonster’s development team! Test the unique panel in the header of each template.
* * *
* * *
* * *
* * *
* * *
