Apps optimize

Options for customizing a Bootstrap site

Discover how easy it is to use custom designs to set your Bootstrap-based site apart from sites that use the default design of the Bootstrap framework.

The popular Bootstrap framework simplifies building responsive sites for those who are not front-end development wizards. While the default flavor of Bootstrap is great, the need to extend and customize the framework is critical for widespread adoption -- after all, it is easy to spot a site that uses the default Bootstrap design.

There are a number of ways to put your mark on a Bootstrap-based site: using custom templates, overriding CSS, or creating a custom build. Learn about these various options so you can determine which one may be right for you.

Using themes

The simplest way to extend or change the default Bootstrap presentation is through the use of themes -- that is, Bootstrap designs created by others or possibly yourself. Many themes are free; one of the more popular resources for free themes is the Bootswatch site.

The themes available via Bootswatch are easily utilized on a site by downloading a few files, with a couple replacing standard Bootstrap files. The main ones are two LESS formatted files (variables.less and bootswatch.less). The gallery area of the Bootswatch site allows you to browse and preview a design before using it -- the download link provides easy access to the necessary files. The free themes are open source and maintained on GitHub, so you can contribute to the development of existing themes or add new ones.

If the search for a free theme returns nothing, purchasing a theme is an option -- some of these themes are as affordable as a couple of bucks. A link to the {wrap}bootstrap is included on the Bootswatch site; it has a variety of themes available for purchase. In addition, a Google search yields an overwhelming number of options. Prices vary but using them is as easy as their free counterparts.

Given the number of free and commercial templates available, it seems like something should be available to fill your needs. If your search turns up empty, you might look for a savvy designer who could build a custom theme based upon your requirements. Using a template is an easy way to change a design, but you can dig into the Bootswatch code and make necessary changes to meet your needs.

Overriding Bootstrap CSS

The base design feature of Bootstrap is CSS, which is maintained in standard text files using the LESS format. If you are confident in your coding abilities, you can use your favorite editor to open up the Bootstrap source and make the necessary changes to meet the needs of a project. On the other hand, the Bootstrap site provides the ability to generate your own customized Bootstrap version depending on choices and values made on the page.

The Bootstrap customize page allows you to choose the components and jQuery plugins used along with specifying values for variables like typography and colors used for the many available options like links, navigation bars, and dropdowns. Once the customize page is complete with your choices, click the Customize And Download button at the bottom of the page to generate the Bootstrap source in a single zip file. There are a number of code generators available on the web; StyleBootstrap is one good example.

If you go through all of the code generator options and tweaks are still necessary, you can open up the source and try not to get lost in the sea of code. Changing the look and feel involves working with the CSS or LESS source code, which is available in the project's less directory. You can download the complete Bootstrap source code as a zip file as well.

Since the source Bootstrap uses is LESS (which is ultimately compiled to CSS), you have to be familiar with LESS and utilize a compiler to generate CSS. The variables.less file is one of the files altered; all of your customization work should begin in the variables.less file. If this does not provide what is needed, you should move on to other files within the Bootstrap source and let the fun begin. As always, create backups before making changes.

One caveat with changes that I have seen in much of the material available on the web is creating custom custom LESS files separate from Bootstrap source. This allows the base Bootstrap code to be updated as the framework grows. Also, this same approach can be taken with third-party templates as you can make changes to further customize the templates to meet your needs.

Just the beginning

As the Bootstrap framework seemingly takes over the web, it is important to remember that the base design is only a starting point. Bootstrap's core principles provide a responsive design, but you can easily utilize custom designs via a number of routes including templates and even manipulating the source code. I know some web designers who frown upon such frameworks, but it is a great tool for less experienced professionals and for building robust sites.

The adoption of Bootstrap continues to grow, with its inclusion in Visual Studio 2013 as a great example. The number of options for using and customizing the framework are impressive, so take it for a test drive with your latest project.

Keep your engineering skills up to date by signing up for TechRepublic's free Software Engineer newsletter, delivered each Tuesday.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

0 comments