Common Bootstrap Customizations

The latest version of Bootstrap 3.x has some great UI features out of the box, but you’ll have to customize it to really make it your own. You can override the Bootstrap CSS with your own, but it’s so much easier to make small edits to the source LESS files and then compile them into CSS. You’ll end up writing “less” code and it will be easier to maintain.

In no particular order are the most common overrides or additions we make:

Disabling the “large” media query

We’ve been doing conversions of older websites into a responsive theme with Bootstrap. Oftentimes they’re designed on a 960 grid and we don’t have access to the source design files or images to upscale or resize. We also run into situations where the “large” 1200px container throws off the look of the original site, so we simply opt to not use it.

To disable the “large” screen layout, simply set @screen-lg to a large number in the variables.less file

// Large screen / wide desktop
@screen-lg: 1200px;

// Make this a really large number
@screen-lg: 9999px;

The default media queries look for minimum width. Since the web browser will never reach that width, those styles will never kick in. With a one line code change, we disable an entire section of CSS.

Collapse the navbar for “small” screens (tablets)

If you have a navigation bar with a lot of menu items, you want to collapse it for visitors on larger tablet devices like an iPad held in portrait mode.

@grid-float-breakpoint:     @screen-sm-min;

You can set it to a specific pixel width or use of the presets. I usually set it to @screen-sm-max (979px by default)

@grid-float-breakpoint:     @screen-sm-max;

Create Custom Button Sizes

Bootstrap comes with a “normal” button class (.btn) and 3 variations – large, small, and extra small. But what if you want extra large? or extra extra large?

Take advantage of the .button-size mixin. From mixins.less:

// Button sizes
// -------------------------
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
 padding: @padding-vertical @padding-horizontal;
 font-size: @font-size;
 line-height: @line-height;
 border-radius: @border-radius;
}

The mixin accepts inputs for:

1. Vertical padding (@padding-vertical)
2. Horizontal padding (@padding-horizontal)
3. Font size (@font-size)
4. Line height (@line-height)
5. Border radius (@border-radius)

All of the inputs are required and must be in that order.

To generate your own button size, call the mixin from your LESS file from your custom button class name :

.btn-xl {
   .button-size(20px; 20px; 24px; 1; 10px);
}

Now you can use your new custom button or link style:

<a href="..." class="btn btn-xl">Extra Large Button!</a>

Square Buttons

Want to rid of the round corners altogether? Edit the mixins.less and override the border-radius to always be “0”:

// Button sizes
// -------------------------
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
 padding: @padding-vertical @padding-horizontal;
 font-size: @font-size;
 line-height: @line-height;
 border-radius: 0; // Set to 0
}

By forcing it to be 0 in the mixin, you don’t need to edit any other variable or instance of where .button-size is called.

Change the navbar height

Edit this value in variables.less to your desired height:

// Basics of a navbar
@navbar-height:                    50px;