Better HTML Starter Templates for Twitter Bootstrap 3

bootstrap-3-text

UPDATE: Due to the popularity of this post, we launched a project call Start Bootstrap built around offering a library of free, open source Bootstrap 3 templates to anyone who wants them.

See all of the free HTML starter templates we have have to offer at http://startbootstrap.com!

First of all I’d like to say that  Bootstrap is great. When it comes to frameworks, Bootstrap offers and intuitive, user-friendly, and beautifully responsive option for rapid development. Their latest update, Bootstrap 3, features a clean, flat, and flexible front-end, not to mention all of the great back-end changes they did.

My only problem with Bootstrap is that their HTML Examples aren’t too great. Every time I have gone to that page searching for a starting point, I’m always disappointed. All of the HTML examples have weird file paths that need to be changed, and some of them are loaded with custom CSS that isn’t even responsive, which seems pretty silly for a responsive framework.

Since their official starter templates don’t truly showcase the quality of their framework, I created a few started templates of my own. I’ve been using these templates for personal projects which have mostly consisted of quick websites for small clients and projects. Recently, I’ve begun the process of updating my own personal starter templates to be compatible with Bootstrap 3, and I’ve decided to share them with you! Below are my two most used starter templates, and I’ll be releasing more if there is enough demand. If there is something specific you’d like to see feel free to let me know in the comments below! Feel free to use these at will for any reason!

Template #1 Basic Company Template for Bootstrap 3

I wanted to share the more exciting one first. This is a template that I use for some super quick, basic company website designs. By using this template, I’ve been able to complete a website from start to finish within just a few hours (in one sitting). All you need to do is add some images, add some pages, and change the fonts/colors if you wish. The best part is that it is optimized for conversions!

company-starter-template

 

Click Here to View Template and Downlod HTML

Features Include: Fixed navigation, Responsive full-width image banner, Custom tagline with text-shadow for legibility, 16px font size for legibility, Responsive marketing images, Commented code for customization details. With this template, when viewing the source code, you will want to grab the custom CSS file along with the HTML.

Template #2 Barebones

This is essentially the same thing as their default Bootstrap Starter Template, except you can just copy/paste and go. No need to change file extensions! Just download Bootstrap 3, and copy this HTML to your index file, simple as that! I use this when the project requires a bit more customization.

barebones-starter-template

Click Here to View Template and Download HTML

For both templates, as a reminder, make sure that you add jQuery to the JavaScript section right before the end of the body tag so bootstrap.js can do it’s thing. I hope you enjoy these templates, and I’m sure that if there is enough demand I will release some more starter templates in the future for even faster development!

UPDATE: Due to the fact there has been a good bit of interest in developing some more starter HTML examples, we put together a GitHub repository for this project. You can view it here.

UPDATE TWO: We’re releasing these templates and many more on a new website managed by Iron Summit Media called Start Bootstrap. See the template library at http://startbootstrap.com!

  • Lars Faye

    Just a heads up, you have some errors on the first template. Your images have appended to then, truncating the col-sm-4 divs:

    <img class="img-circle img-responsive" src="http://placehold.it/300×300&quot;

    Should be:

    • IronSummitMedia

      Thank you! I must have cut those off when putting in new placeholders.

  • Web Hazard

    I like your effort. That’s why I am sorry to say your first template demo doesn’t look good in Firefox.

    • IronSummitMedia

      Thanks for the heads up. We got that fixed a while back when we migrated the template to a new site, but never updated the one in the post. I’ve gone ahead and updated it here to link to the new one.

      If you are interested in these templates, we launched a whole project around them at http://startbootstrap.com. There you can see more templates, free to use. Thanks again for the heads up!

      • Web Hazard

        Thanks a lot!

  • Web Hazard

    I like startbootstrap.com already a lot! For anyone who wants to fade a background-image, I found this simple css-only method by Dudley Storey: http://demosthenes.info/blog/618/Fading-Background-Images