What are Bootstrap themes?
by Alexander Rechsteiner - Last updated
Bootstrap themes are a great way to kick-start your website or web app project and save money and design effort. But what exactly are these themes and how do they help you reach your goal quicker?
Summary
Bootstrap themes are packages of HTML, CSS and JavaScript code that provide styling, UI components and page layouts for you to use in a web project. In essence, they are pre-built website templates for you to adapt and build upon. They are built on top of Bootstrap and add to its feature set. If you know the framework already, you’ll find that you’re already familiar with parts of the code.
To effectively utilize a Bootstrap theme, you should know how HTML, CSS and JavaScript work together, and you should be able to edit and render HTML. Typically you will render HTML using a technology of your choosing such as PHP, Ruby, Java, .NET, Angular, etc.
An exception to this are Bootstrap themes that integrate with an existing CMS such as WordPress. Here you might even get away without touching code at all.
Benefits
Much like with Bootstrap itself, having some components ready-made from the beginning can save you a lot of time and money, since you don’t have to worry about hiring a designer or writing lots of front-end code. Themes are especially appropriate when you’re operating on a shoestring budget or when you want to build a minimum viable product quickly. It’s also a nice way to build a good-looking internal application without the hefty costs associated with a custom UI design.
Drawbacks
The trade-off to all of this is that you’re never going to be the only one to use a particular theme. They typically sell hundreds or thousands of copies, so there are other people out there who will be using the exact same components. This can be mitigated by customizing the theme, applying new colors and using different stock images.
Another drawback is that you are limited to the features that your chosen theme provides. If you find yourself in need of an uncommon component, you either need to add it yourself, or hire someone to do it for you. Some theme vendors offer customizations as an additional service to help with this.
Themes, Templates, Skins, UI Kits, …
Unfortunately the terms “Theme” and “Template”, and to some extent “Skin” are used interchangeably. This is true within the Bootstrap ecosystem, as well as on a larger scope. What is called a theme in WordPress is called a template in Joomla and a skin in DNN (DotNetNuke). It’s a big mess and everyone uses the same terms to describe different things; or different terms to describe the same thing. I’m guilty of this too.
So semantics won’t help you make a distinction between products. However, when it comes to Bootstrap, there are about four different types of themes with varied feature sets:
- Themes that modify the look and feel of Bootstrap’s existing components
- Themes that add new components and page layouts
- Themes that do both of the above
- Themes that integrate with a CMS (e.g. WordPress) on top of all that
1. A theme that modifies the looks of standard Bootstrap components
This is the simplest form of a Bootstrap theme, and is usually free. All it does is apply a new look and feel to the existing components of Bootstrap. Buttons have different colors or receive bevels or shadows. Corners get more or less rounded. All in all, simply cosmetic changes to the framework. These consist only of a simple CSS file that you can apply to an existing Bootstrap project to give your project a distinct look.
Some good examples can be found at bootswatch.com.
2. A theme that adds new components and page layouts
This type of theme is used by developers with little ability or desire to do design and front-end work. It adds new components and layouts that go beyond the scope of standard Bootstrap. What you get here is basically a pre-built static website where you can fill in your own content into the existing pages as you see fit. You can also mix and match the components to create new pages.
Generally each theme includes an array of different page layouts that have been designed to look good together. The contents of such a theme include HTML, CSS (usually LESS or SASS), JavaScript and sometimes images.
The type of layouts and components that are included depend on the purpose of the theme. A blog theme will include an article layout with a comment section, an article overview, maybe a category listing and other blog related things. An admin theme will include dashboard-like layouts and components suitable for building a web application such as charts, tables, widgets, etc. Business themes will include pages and components you would need to present your business online, such as an “About us” site or a contact form. Multipurpose themes combine a myriad of different components that allow for a wide variety of use cases.
There is no standardized feature set so you will have to explore each theme and assess if the included features are convenient for your current project.
This is the type of theme most suited to be used with any kind of back-end technology you might be using. You can use Ruby, Python, Java, C#, JavaScript or whatever else you’re comfortable with to render the proper HTML syntax. Obviously this requires work on your end. Some themes already include starter projects in popular frameworks and languages such as AngularJS, ASP.NET MVC or Ruby on Rails.
Some examples in this category (Note: I receive 10% commission if you buy one):
- Velocity: Well designed theme for products or businesses (Bootstrap 3)
- Grove: My own latest Bootstrap 3 theme for business websites (Bootstrap 3)
- Unify: Very extensive website template, also a top seller (Bootstrap 3)
3. A theme that adds new components, layouts and also modifies standard Bootstrap components
This type of theme is fairly similar to a theme described under number 2, with the addition that it also contains reworked styles of standard Bootstrap components. It’s simply a combination between 1 and 2.
I’m making this its own bullet point mainly because it’s something to be aware of. With some themes, standard Bootstrap components might look different while with other themes they look exactly as they do with vanilla Bootstrap. It’s a matter of preference whether you prefer one or the other.
Some examples in this category (Note: I receive 10% commission if you buy Inspinia)
- The official themes: Made by the makers of Bootstrap itself (Bootstrap 3 and 4)
- Inspinia: Probably the best selling admin theme out there (Bootstrap 3)
- Charming Pro: The Bootstrap 4 template that I’m currently working on (Bootstrap 4)
4. A theme that integrates with an existing content management system
Some themes take it one step further still, and integrate with a popular content management system such as WordPress. These are typically built as installable packages and can only be used with the one CMS they’re built for. They’re significantly more expensive but they can take a lot of work off you and be well worth the price.
I would recommend such a theme only when you are planning on using that particular CMS. If you intend to roll your own back-end solution then you should definitely stick with a theme from category 2 or 3.
Examples of some WordPress themes based on Bootstrap 3 can be found at WrapBootstrap in the WordPress category (Note: I receive 10% commission if you buy one).
Feedback
I hope you enjoyed this rundown and have a clearer idea when browsing for a good Bootstrap theme. If you like this article make sure to share it with your friends, followers and colleagues.