Bootstrap is best maintained when you treat it as a separate and independently-versioned dependency in your development environment. Doing this makes upgrading Bootstrap easier in the future.

Once you've downloaded and included Bootstrap's styles and scripts, you can customize its components. Just create a new stylesheet (LESS, if you like, or just plain CSS) to house your customizations.

Compiled or minified?

Unless you plan on reading the CSS, go with minified stylesheets. It's the same code, just compacted. Minified styles use less bandwidth, which is good, especially in production environments.

From there, include whatever Bootstrap components and HTML content you need to create templates for your site's pages.

Customizing components

You can customize components to varying degrees, but most fall into two camps: light customizations and overhauls. Plenty examples of both are available from third parties.

We define light customizations as superficial changes, for example, color and font changes to existing Bootstrap components. A light customization example is the Twitter Translation Center (coded by @mdo). Let's look at how to implement the custom button we wrote for this site, .btn-ttc.

The stock Bootstrap buttons require just one class, .btn, to start. Here we extend the .btn style with a new modifier class, .btn-ttc, that we will create. This gives us a distinct custom look with minimal effort.

Our customized button will be coded like this:

<button type="button" class="btn btn-ttc">Save changes</button>

Note how .btn-ttc is added to the standard .btn class.

To implement this, in the custom stylesheet, add the following CSS:

/* Custom button
-------------------------------------------------- */

/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007da7;
}

/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ttc {
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
  ...
}

/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ttc:hover {
  background-position: 0 -15px;
}

In short: Look to the style source and duplicate the selectors you need for your modifications.

In summary, here's the basic workflow:

  • For each element you want to customize, find its code in the compiled Bootstrap CSS.
  • Copy the component's selector and styles and paste them in your custom stylesheet. For instance, to customize the navbar background, just copy the .navbar style specification.
  • In your custom stylesheet, edit the CSS you just copied from the Bootstrap source. No need for prepending additional classes, or appending !important here. Keep it simple.
  • Rinse and repeat until you're happy with your customizations.

Once you are comfortable performing light customizations, visual overhauls are just as straightforward. For a site like Karma, which uses Bootstrap as a CSS reset with heavy modifications, more extensive work is involved. But the same principle applies: include Bootstrap's default stylesheet first, then apply your custom stylesheet.

Alternate customization methods

While not recommended for folks new to Bootstrap, you may use one of two alternate methods for customization. The first is modifying the source .less files (making upgrades super difficult), and the second is mapping source LESS code to your own classes via mixins. For the time being, neither of those options are documented here.

Removing potential bloat

Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production environments where optimizing bandwidth is an issue. We encourage you to remove whatever is unused with our Customizer.

Using the Customizer, simply uncheck any component, feature, or asset you don't need. Hit download and swap out the default Bootstrap files with these newly customized ones. You'll get vanilla Bootstrap, but without the features *you* deem unnecessary. All custom builds include compiled and minified versions, so use whichever works for you.

Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the CSS and Components pages in the docs.

Common CSS

Components

JavaScript components

Utilities

Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the JavaScript page in the docs.

Linked to components

Magic

Produces two files

All checked plugins will be compiled into a readable bootstrap.js and a minified bootstrap.min.js. We recommend you use the minified version in production.

jQuery required

All plugins require the latest version of jQuery to be included.

Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.

Basics

Color system

Body scaffolding

Background color for <body>.

Global text color on <body>.

Global textual link color

Link hover color set via darken() function

Typography

Generic font variables

Default sans-serif fonts.

Default serif fonts.

Default monospace fonts for <code> and <pre>.

Base type styes

Heading font sizes

Headings

Code blocks

Media queries breakpoints

Layout and grid system

For @screen-sm-min and up.

For @screen-md-min and up.

For @screen-lg-min and up.

Number of columns in the grid.

Padding between columns.

Point at which the navbar stops collapsing.

Components

Padding

Rounded corners

Component active state

Global color for active items (e.g., navs or dropdowns)

Global background color for active items (e.g., navs or dropdowns)

Carets

Buttons

Default

Primary

Info

Success

Warning

Danger

Form states and alerts

Success

Warning

Danger

Info

Alerts

Base styles

Warning

Success

Danger

Info

Navbar

Base styles

Default navbar

Basics

Links

Brand

Toggle

Inverted navbar

Basics

Links

Brand

Toggle

Nav

Default nav

Common values

Pills

Tabs

Tables

Default padding for <th>s and <td>s

Default padding cells in .table-condensed

Default background color used for all tables.

Background color used for .table-striped.

Background color used for .table-hover.

Border color for table and cell borders.

Forms

Inputs

Text color for <input>s

<input> background color

<input> border color

<input> border radius

Placeholder text color

Input states

Border color for inputs on focus

<input disabled> background color

Input sizes

Default .form-control height

Large .form-control height

Small .form-control height

Legend

Input groups

Background color for textual input addons

Border color for textual input addons

Dropdowns

Dropdown menu

Dropdown menu background color

Dropdown menu border color

Dropdown menu border color for IE8

Indicator arrow for showing an element has a dropdown

Dropdown divider top border color

Text color for headers within dropdown menus

Dropdown items

Dropdown text color

Hovered dropdown menu entry text color

Hovered dropdown menu entry background color

Active dropdown menu entry text color

Active dropdown menu entry background color

Disabled dropdown menu entry background color

Panels and wells

Common panel styles

Border color for elements within panels

Contextual panel colors

Default

Primary

Success

Info

Warning

Danger

Wells

Accordion

Badges

Base styles

States

Linked badge text color on hover

Badge text color in active nav link

Badge background color in active nav link

Breadcrumbs

Breadcrumb text color

Breadcrumb background color

Text color of current page in the breadcrumb

Textual separator for between breadcrumb elements

Jumbotron

Modals

Base modal

Padding applied to the modal body

Modal backdrop background color

Modal header and footer

Padding applied to the modal title

Modal title line-height

Modal header border color

Modal footer border color

Modal content

Background color of modal content area

Modal content border color

Modal content border color for IE8

List group

Base styles

Background color on .list-group-item

.list-group-item border color

List group border radius

Hover and active states

Background color of single list elements on hover

Text color of active list elements

Background color of active list elements

Border color of active list elements

Thumbnails

Base thumbnail

Padding around the thumbnail image

Thumbnail background color

Thumbnail border color

Thumbnail border radius

Thumbnail captions

Padding around the thumbnail caption

Custom text color for thumbnail captions

Progress bars

Shared styles

Background color of the whole progress component

Info progress bar text color

Info progress bar text shadow

Default progress bar color

Contextual states

Success progress bar color

Info progress bar color

Warning progress bar color

Danger progress bar color

Pagination

Default styles

Background color

Border color

Background hover color

Disabled and active states

Disabled text color

Active background color

Active text color

Pager

Pager border radius

Pager disabled state color

Labels

Default label text color

Default text color of a linked label

Default label background color

Primary label background color

Success label background color

Info label background color

Warning label background color

Danger label background color

Tooltips and popovers

Tooltip

Tooltip text color

Tooltip background color

Tooltip arrow width

Tooltip arrow color

Tooltip max width

Popovers

Base styles

Popover body background color

Popover maximum width

Popover border color

Popover fallback border color

Popover title background color

Popover arrows

Popover arrow width

Popover arrow color

Popover outer arrow width

Popover outer arrow color

Popover outer arrow fallback color

Close button

Type

Text muted color

Abbreviations and acronyms border color

Headings small color

Blockquote small color

Blockquote border color

Page header border color

Other

Horizontal line color

Horizontal offset for forms and lists

Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.