Blog

Bootstrap is the most popular CSS framework on the web. It makes it incredibly easy to create beautiful, responsive designs that just work. However, it’s not always possible to use Bootstrap for your entire website. Often the website’s main CSS is outside of your control. You just need to use a portion of Bootstrap CSS. For example, at FormDen, we want all of our users to be able to use Bootstrap’s excellent form CSS even if they aren’t using Bootstrap on their website.

If you just add Bootstrap CSS to your webpage it will conflict with your page’s existing CSS creating a jumbled mess of styles. Wouldn't it be nice if we could isolate Bootstrap CSS to a particular class? We can! We just need to use LESS to prefix all Bootstrap CSS with a class name.

LESS is a CSS processor that lets you change variables before compiling to CSS. This allows you to change one variable (e.g. base font-size) and LESS will automatically adjust all styles that depend on it (e.g. line heights, headings, etc). This short tutorial will show you how to use LESS to customize bootstrap CSS and then prefix all Bootstrap styles with the class bootstrap-iso. If you want to skip the tutorial and just get the finished CSS file, you can download it below:

bootstrap-iso.css

To use Bootstrap CSS, simply wrap your HTML in a div with the class bootstrap-iso, like so:

<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

Tutorial

1. Customize Bootstrap CSS

   First, you want to customize your Bootstrap CSS using the Bootstrap CSS customization tool. When you are done, download the results. You should end up with two files: bootstrap.css and bootstrap-theme.css (optional)

2. Install LESS on your computer

   Install LESS using one of the following links:

   • Linux Command Line
   • Windows Command Line
   • OSX Command Line
   • GUIS for all platforms!

3. Create a LESS file to prefix your CSS

   Create a file called prefix.less that contains the following:

   .bootstrap-iso {
     @import (less) 'bootstrap.css';
     @import (less) 'bootstrap-theme.css';  /* optional */
   }
   

4. Compile your LESS file

   Compile prefix.less into bootstrap-iso.css. Using the command line, this looks like:

   lessc prefix.less bootstrap-iso.css
   

5. Replace .bootsrap-iso body

   Open boostrap-iso.css in a text editor. You will notice that .bootstrap-iso prefixes body elements. It’s not possible for a class to prefix the body. We really want these styles to apply to just the class. We can fix this with a simple find and replace:

   1. Find all instance of: .bootstrap-iso body and .bootstrap-iso html
   2. Replace with: .bootstrap-iso

6. You're done!

   Simply add bootstrap-iso.css to your page and wrap any content you want styled by Boostrap with the class bootstrap-iso.

Download

Download all of the files used in the above tutorial

Download Files

Example

Below is an iFrame demonstrating how Bootstrap CSS can be selectively applied to a form.

References

This article is partially based on information found in this Stackoverflow thread