info@54: --- info@54: layout: default info@54: title: Customize and download info@54: slug: customize info@54: lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version. info@54: base_url: "../" info@54: --- info@54: info@54: info@54:
info@54:
info@54: info@54:

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.

info@54: info@54:
info@54:
info@54:

Common CSS

info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:

Components

info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:

JavaScript components

info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54: info@54:

Utilities

info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54:
info@54:
info@54: info@54: info@54: info@54:
info@54: info@54:

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

info@54:
info@54:
info@54:

Linked to components

info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54:
info@54:

Magic

info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54:
info@54: info@54:
info@54:

Produces two files

info@54:

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.

info@54:
info@54: info@54:
info@54:

jQuery required

info@54:

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

info@54:
info@54:
info@54: info@54: info@54: info@54:
info@54: info@54:

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

info@54: info@54:

Basics

info@54: info@54: info@54:

Color system

info@54:
info@54:
info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Body scaffolding

info@54:
info@54:
info@54: info@54: info@54:

Background color for <body>.

info@54: info@54: info@54:

Global text color on <body>.

info@54:
info@54:
info@54: info@54: info@54:

Global textual link color

info@54: info@54: info@54:

Link hover color set via darken() function

info@54:
info@54:
info@54: info@54: info@54:

Typography

info@54:
info@54:
info@54:

Generic font variables

info@54: info@54: info@54:

Default sans-serif fonts.

info@54: info@54: info@54:

Default serif fonts.

info@54: info@54: info@54:

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

info@54: info@54:

Base type styes

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54:

Heading font sizes

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Headings

info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Code blocks

info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Media queries breakpoints

info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54:

Layout and grid system

info@54:
info@54:
info@54: info@54: info@54:

For @screen-sm-min and up.

info@54:
info@54:
info@54: info@54: info@54:

For @screen-md-min and up.

info@54:
info@54:
info@54:
info@54: info@54: info@54:

For @screen-lg-min and up.

info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54: info@54:

Number of columns in the grid.

info@54:
info@54:
info@54: info@54: info@54:

Padding between columns.

info@54:
info@54:
info@54:
info@54: info@54: info@54:

Point at which the navbar stops collapsing.

info@54:
info@54:
info@54: info@54: info@54:

Components

info@54: info@54:

Padding

info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54:

Rounded corners

info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54:

Component active state

info@54:
info@54:
info@54: info@54: info@54:

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

info@54:
info@54:
info@54: info@54: info@54:

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

info@54:
info@54:
info@54: info@54:

Carets

info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Buttons

info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54:
info@54:
info@54:

Default

info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Primary

info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Info

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54:

Success

info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Warning

info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Danger

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Form states and alerts

info@54:
info@54:
info@54:

Success

info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Warning

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54:

Danger

info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Info

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Alerts

info@54: info@54:

Base styles

info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54:

Warning

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Success

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54:

Danger

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Info

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Navbar

info@54: info@54:

Base styles

info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54:
info@54:
info@54:

Default navbar

info@54:

Basics

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Links

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Brand

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Toggle

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54: info@54:
info@54:

Inverted navbar

info@54: info@54:

Basics

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Links

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Brand

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Toggle

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Nav

info@54: info@54:

Default nav

info@54:
info@54:
info@54:

Common values

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Pills

info@54: info@54: info@54: info@54: info@54:
info@54:
info@54:

Tabs

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Tables

info@54:
info@54:
info@54: info@54: info@54:

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

info@54: info@54: info@54:

Default padding cells in .table-condensed

info@54:
info@54:
info@54: info@54: info@54:

Default background color used for all tables.

info@54: info@54: info@54:

Background color used for .table-striped.

info@54:
info@54:
info@54: info@54: info@54:

Background color used for .table-hover.

info@54: info@54: info@54:

Border color for table and cell borders.

info@54:
info@54:
info@54: info@54: info@54:

Forms

info@54: info@54:

Inputs

info@54:
info@54:
info@54: info@54: info@54:

Text color for <input>s

info@54: info@54: info@54:

<input> background color

info@54:
info@54:
info@54: info@54: info@54:

<input> border color

info@54: info@54: info@54:

<input> border radius

info@54:
info@54:
info@54: info@54: info@54:

Placeholder text color

info@54:
info@54:
info@54: info@54:

Input states

info@54:
info@54:
info@54: info@54: info@54:

Border color for inputs on focus

info@54:
info@54:
info@54: info@54: info@54:

<input disabled> background color

info@54:
info@54:
info@54: info@54:

Input sizes

info@54:
info@54:
info@54: info@54: info@54:

Default .form-control height

info@54:
info@54:
info@54: info@54: info@54:

Large .form-control height

info@54:
info@54:
info@54: info@54: info@54:

Small .form-control height

info@54:
info@54:
info@54: info@54:

Legend

info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54:

Input groups

info@54:
info@54:
info@54: info@54: info@54:

Background color for textual input addons

info@54:
info@54:
info@54: info@54: info@54:

Border color for textual input addons

info@54:
info@54:
info@54: info@54: info@54:

Dropdowns

info@54:
info@54:
info@54:

Dropdown menu

info@54: info@54: info@54:

Dropdown menu background color

info@54: info@54: info@54:

Dropdown menu border color

info@54: info@54: info@54:

Dropdown menu border color for IE8

info@54: info@54: info@54:

Indicator arrow for showing an element has a dropdown

info@54: info@54: info@54:

Dropdown divider top border color

info@54: info@54: info@54:

Text color for headers within dropdown menus

info@54:
info@54:
info@54:

Dropdown items

info@54: info@54: info@54:

Dropdown text color

info@54: info@54: info@54: info@54:

Hovered dropdown menu entry text color

info@54: info@54: info@54:

Hovered dropdown menu entry text color

info@54: info@54: info@54: info@54:

Active dropdown menu entry text color

info@54: info@54: info@54:

Active dropdown menu entry background color

info@54: info@54: info@54: info@54:

Disabled dropdown menu entry background color

info@54:
info@54:
info@54: info@54: info@54:

Panels and wells

info@54: info@54:

Common panel styles

info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:

Border color for elements within panels

info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54:

Contextual panel colors

info@54:
info@54:
info@54:

Default

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Primary

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Success

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54:

Info

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Warning

info@54: info@54: info@54: info@54: info@54: info@54: info@54: info@54:

Danger

info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54:

Wells

info@54: info@54: info@54: info@54: info@54:

Accordion

info@54: info@54: info@54: info@54: info@54:

Badges

info@54: info@54:

Base styles

info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54:

States

info@54:
info@54:
info@54: info@54: info@54:

Linked badge text color on hover

info@54:
info@54:
info@54: info@54: info@54:

Badge text color in active nav link

info@54:
info@54:
info@54: info@54: info@54:

Badge background color in active nav link

info@54:
info@54:
info@54: info@54: info@54:

Breadcrumbs

info@54:
info@54:
info@54: info@54: info@54:

Breadcrumb text color

info@54: info@54: info@54:

Breadcrumb background color

info@54:
info@54:
info@54: info@54: info@54:

Text color of current page in the breadcrumb

info@54: info@54: info@54:

Textual separator for between breadcrumb elements

info@54:
info@54:
info@54: info@54:

Jumbotron

info@54:
info@54:
info@54: info@54: info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Modals

info@54: info@54:

Base modal

info@54:
info@54:
info@54: info@54: info@54:

Padding applied to the modal body

info@54:
info@54:
info@54: info@54: info@54:

Modal backdrop background color

info@54:
info@54:
info@54: info@54:

Modal header and footer

info@54:
info@54:
info@54: info@54: info@54:

Padding applied to the modal title

info@54:
info@54:
info@54: info@54: info@54:

Modal title line-height

info@54:
info@54:
info@54: info@54: info@54:

Modal header border color

info@54: info@54: info@54:

Modal footer border color

info@54:
info@54:
info@54: info@54:

Modal content

info@54:
info@54:
info@54: info@54: info@54:

Background color of modal content area

info@54:
info@54:
info@54: info@54: info@54:

Modal content border color

info@54:
info@54:
info@54: info@54: info@54:

Modal content border color for IE8

info@54:
info@54:
info@54: info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

List group

info@54: info@54:

Base styles

info@54:
info@54:
info@54: info@54: info@54:

Background color on .list-group-item

info@54:
info@54:
info@54: info@54: info@54:

.list-group-item border color

info@54:
info@54:
info@54: info@54: info@54:

List group border radius

info@54:
info@54:
info@54: info@54:

Hover and active states

info@54:
info@54:
info@54: info@54: info@54:

Background color of single list elements on hover

info@54:
info@54:
info@54:
info@54:
info@54: info@54: info@54:

Text color of active list elements

info@54:
info@54:
info@54: info@54: info@54:

Background color of active list elements

info@54:
info@54:
info@54: info@54: info@54:

Border color of active list elements

info@54:
info@54:
info@54: info@54: info@54:

Thumbnails

info@54: info@54:

Base thumbnail

info@54:
info@54:
info@54: info@54: info@54:

Padding around the thumbnail image

info@54: info@54: info@54:

Thumbnail background color

info@54:
info@54:
info@54: info@54: info@54:

Thumbnail border color

info@54: info@54: info@54:

Thumbnail border radius

info@54:
info@54:
info@54: info@54:

Thumbnail captions

info@54:
info@54:
info@54: info@54: info@54:

Padding around the thumbnail caption

info@54:
info@54:
info@54: info@54: info@54:

Custom text color for thumbnail captions

info@54:
info@54:
info@54: info@54: info@54:

Progress bars

info@54: info@54:

Shared styles

info@54:
info@54:
info@54: info@54: info@54:

Background color of the whole progress component

info@54:
info@54:
info@54: info@54: info@54:

Info progress bar text color

info@54:
info@54:
info@54: info@54: info@54:

Info progress bar text shadow

info@54:
info@54:
info@54: info@54: info@54:

Default progress bar color

info@54:
info@54:
info@54: info@54:

Contextual states

info@54:
info@54:
info@54: info@54: info@54:

Success progress bar color

info@54: info@54: info@54:

Info progress bar color

info@54:
info@54:
info@54: info@54: info@54:

Warning progress bar color

info@54: info@54: info@54:

Danger progress bar color

info@54:
info@54:
info@54: info@54: info@54:

Pagination

info@54: info@54:

Default styles

info@54:
info@54:
info@54: info@54: info@54:

Background color

info@54:
info@54:
info@54: info@54: info@54:

Border color

info@54:
info@54:
info@54: info@54: info@54:

Background hover color

info@54:
info@54:
info@54: info@54:

Disabled and active states

info@54:
info@54:
info@54: info@54: info@54:

Disabled text color

info@54:
info@54:
info@54: info@54: info@54:

Active background color

info@54:
info@54:
info@54: info@54: info@54:

Active text color

info@54:
info@54:
info@54: info@54: info@54:

Pager

info@54:
info@54:
info@54: info@54: info@54:

Pager border radius

info@54:
info@54:
info@54: info@54: info@54:

Pager disabled state color

info@54:
info@54:
info@54: info@54: info@54:

Labels

info@54:
info@54:
info@54: info@54: info@54:

Default label text color

info@54:
info@54:
info@54: info@54: info@54:

Default text color of a linked label

info@54:
info@54:
info@54: info@54: info@54:

Default label background color

info@54:
info@54:
info@54: info@54:
info@54:
info@54: info@54: info@54:

Primary label background color

info@54: info@54: info@54:

Success label background color

info@54:
info@54:
info@54: info@54: info@54:

Info label background color

info@54: info@54: info@54:

Warning label background color

info@54:
info@54:
info@54: info@54: info@54:

Danger label background color

info@54:
info@54:
info@54: info@54: info@54:

Tooltips and popovers

info@54: info@54:

Tooltip

info@54:
info@54:
info@54: info@54: info@54:

Tooltip text color

info@54: info@54: info@54:

Tooltip background color

info@54:
info@54:
info@54: info@54: info@54:

Tooltip arrow width

info@54: info@54: info@54:

Tooltip arrow color

info@54:
info@54:
info@54: info@54: info@54:

Tooltip max width

info@54:
info@54:
info@54: info@54:

Popovers

info@54: info@54:

Base styles

info@54:
info@54:
info@54: info@54: info@54:

Popover body background color

info@54: info@54: info@54:

Popover maximum width

info@54:
info@54:
info@54: info@54: info@54:

Popover border color

info@54: info@54: info@54:

Popover fallback border color

info@54:
info@54:
info@54: info@54: info@54:

Popover title background color

info@54:
info@54:
info@54: info@54:

Popover arrows

info@54:
info@54:
info@54: info@54: info@54:

Popover arrow width

info@54:
info@54:
info@54: info@54: info@54:

Popover arrow color

info@54:
info@54:
info@54:
info@54:
info@54: info@54: info@54:

Popover outer arrow width

info@54:
info@54:
info@54: info@54: info@54:

Popover outer arrow color

info@54:
info@54:
info@54: info@54: info@54:

Popover outer arrow fallback color

info@54:
info@54:
info@54: info@54: info@54:

Close button

info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:
info@54:
info@54: info@54: info@54:

Type

info@54:
info@54:
info@54: info@54: info@54:

Text muted color

info@54:
info@54:
info@54: info@54: info@54:

Abbreviations and acronyms border color

info@54:
info@54:
info@54: info@54: info@54:

Headings small color

info@54:
info@54:
info@54: info@54: info@54:

Blockquote small color

info@54:
info@54:
info@54: info@54: info@54:

Blockquote border color

info@54:
info@54:
info@54: info@54: info@54:

Page header border color

info@54:
info@54:
info@54: info@54: info@54:

Other

info@54:
info@54:
info@54: info@54: info@54:

Horizontal line color

info@54:
info@54:
info@54: info@54: info@54:

Horizontal offset for forms and lists

info@54:
info@54:
info@54:
info@54: info@54:
info@54: info@54:

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

info@54:
info@54: info@54:
info@54:
info@54: