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

# LESS files

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

Print media styles
Typography
Code
Grid system
Tables
Forms
Buttons

### Components

Glyphicons
Button groups
Input groups
Navs
Navbar
Breadcrumbs
Pagination
Pager
Labels
Badges
Jumbotron
Thumbnails
Alerts
Progress bars
Media items
List groups
Panels
Wells
Close icon

### JavaScript components

Dropdowns
Tooltips
Popovers
Modals
Carousel

### Utilities

Basic utilities
Responsive utilities
Component animations (for JS)

# jQuery plugins

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

Alert dismissal
Advanced buttons
Carousel functionality
Dropdowns
Modals
Tooltips
Popovers (requires Tooltips)
Togglable tabs

#### Magic

Affix
Collapse
Scrollspy
Transitions (required for any kind of animation)

#### 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.

# LESS variables

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

## Basics

### Color system

@brand-primary @brand-success @brand-warning
@brand-danger @brand-info

### Body scaffolding

@body-bg

Background color for `<body>`.

@text-color

Global text color on `<body>`.

@link-color

Global textual link color

@link-hover-color

Link hover color set via `darken()` function

### Typography

#### Generic font variables

@font-family-sans-serif

Default sans-serif fonts.

@font-family-serif

Default serif fonts.

@font-family-monospace

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

#### Base type styes

@font-family-base @font-size-base @line-height-base @line-height-large @line-height-small

#### Heading font sizes

@font-size-h1 @font-size-h2 @font-size-h3 @font-size-h4 @font-size-h5 @font-size-h6

### Headings

@headings-font-family @headings-font-weight
@headings-line-height @headings-color

### Code blocks

@code-color @code-bg
@pre-color @pre-bg @pre-border-color

### Media queries breakpoints

@screen-xs-min
@screen-sm-min
@screen-md-min
@screen-lg-min

### Layout and grid system

@container-sm

For `@screen-sm-min` and up.

@container-md

For `@screen-md-min` and up.

@container-lg

For `@screen-lg-min` and up.

@grid-gutter-width

Padding between columns.

@grid-float-breakpoint

Point at which the navbar stops collapsing.

### Components

#### Padding

@padding-base-vertical @padding-base-horizontal
@padding-large-vertical @padding-large-horizontal
@padding-small-vertical @padding-small-horizontal

#### Rounded corners

@border-radius-base
@border-radius-large
@border-radius-small

#### Component active state

@component-active-color

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

@component-active-bg

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

#### Carets

@caret-width-base
@caret-width-large

## Buttons

@btn-font-weight
@btn-link-disabled-color

#### Default

@btn-default-color @btn-default-bg @btn-default-border

#### Primary

@btn-primary-color @btn-primary-bg @btn-primary-border

#### Info

@btn-info-color @btn-info-bg @btn-info-border

#### Button hover

@btn-hover-color

#### Success

@btn-success-color @btn-success-bg @btn-success-border

#### Warning

@btn-warning-color @btn-warning-bg @btn-warning-border

#### Danger

@btn-danger-color @btn-danger-bg @btn-danger-border

## Form states and alerts

#### Success

@state-success-text @state-success-bg @state-success-border

#### Warning

@state-warning-text @state-warning-bg @state-warning-border

#### Danger

@state-danger-text @state-danger-bg @state-danger-border

#### Info

@state-info-text @state-info-bg @state-info-border

## Alerts

#### Base styles

@alert-padding
@alert-border-radius
@alert-link-font-weight

#### Warning

@alert-warning-text @alert-warning-bg @alert-warning-border

#### Success

@alert-success-text @alert-success-bg @alert-success-border

#### Danger

@alert-danger-text @alert-danger-bg @alert-danger-border

#### Info

@alert-info-text @alert-info-bg @alert-info-border

## Navbar

### Base styles

@navbar-height @navbar-margin-bottom
@navbar-padding-horizontal @navbar-padding-vertical
@navbar-border-radius

### Default navbar

#### Basics

@navbar-default-color @navbar-default-bg @navbar-default-border

#### Links

@navbar-default-link-color @navbar-default-link-hover-color @navbar-default-link-hover-bg @navbar-default-link-active-color @navbar-default-link-active-bg @navbar-default-link-disabled-color @navbar-default-link-disabled-bg

#### Brand

@navbar-default-brand-color @navbar-default-brand-hover-color @navbar-default-brand-hover-bg

#### Toggle

@navbar-default-toggle-hover-bg @navbar-default-toggle-icon-bar-bg @navbar-default-toggle-border-color

### Inverted navbar

#### Basics

@navbar-inverse-color @navbar-inverse-bg @navbar-inverse-border

#### Links

@navbar-inverse-link-color @navbar-inverse-link-hover-color @navbar-inverse-link-hover-bg @navbar-inverse-link-active-color @navbar-inverse-link-active-bg @navbar-inverse-link-disabled-color @navbar-inverse-link-disabled-bg

#### Brand

@navbar-inverse-brand-color @navbar-inverse-brand-hover-color @navbar-inverse-brand-hover-bg

#### Toggle

@navbar-inverse-toggle-hover-bg @navbar-inverse-toggle-icon-bar-bg @navbar-inverse-toggle-border-color

## Nav

### Default nav

#### Common values

@nav-link-padding @nav-link-hover-bg @nav-disabled-link-color @nav-disabled-link-hover-color @nav-open-link-hover-color @nav-open-caret-border-color

#### Pills

@nav-pills-active-link-hover-color @nav-pills-active-link-hover-bg

#### Tabs

@nav-tabs-border-color @nav-tabs-link-hover-border-color @nav-tabs-active-link-hover-color @nav-tabs-active-link-hover-bg @nav-tabs-active-link-hover-border-color @nav-tabs-justified-link-border-color @nav-tabs-justified-active-link-border-color

## Tables

@table-cell-padding

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

@table-condensed-cell-padding

Default padding cells in `.table-condensed`

@table-bg

Default background color used for all tables.

@table-bg-accent

Background color used for `.table-striped`.

@table-bg-hover

Background color used for `.table-hover`.

@table-border-color

Border color for table and cell borders.

## Forms

### Inputs

@input-color

Text color for `<input>`s

@input-bg

`<input>` background color

@input-border

`<input>` border color

@input-border-radius

`<input>` border radius

@input-color-placeholder

Placeholder text color

### Input states

@input-border-focus

Border color for inputs on focus

@input-bg-disabled

`<input disabled>` background color

### Input sizes

@input-height-base

Default `.form-control` height

@input-height-large

Large `.form-control` height

@input-height-small

Small `.form-control` height

### Legend

@legend-color
@legend-border-color

### Input groups

@input-group-addon-bg

Background color for textual input addons

@input-group-addon-border-color

Border color for textual input addons

## Dropdowns

### Dropdown menu

@dropdown-bg

Dropdown menu background color

@dropdown-border

Dropdown menu border color

@dropdown-fallback-border

Dropdown menu border color for IE8

@dropdown-caret-color

Indicator arrow for showing an element has a dropdown

@dropdown-divider-bg

Dropdown divider top border color

@dropdown-header-color

Text color for headers within dropdown menus

### Dropdown items

@dropdown-link-color

Dropdown text color

@dropdown-link-hover-color

Hovered dropdown menu entry text color

@dropdown-link-hover-bg

Hovered dropdown menu entry text color

@dropdown-link-active-color

Active dropdown menu entry text color

@dropdown-link-active-bg

Active dropdown menu entry background color

@dropdown-link-disabled-color

Disabled dropdown menu entry background color

## Panels and wells

### Common panel styles

@panel-bg @panel-inner-border

Border color for elements within panels

@panel-border-radius @panel-footer-bg

### Contextual panel colors

#### Default

@panel-default-text @panel-default-border @panel-default-heading-bg

#### Primary

@panel-primary-text @panel-primary-border @panel-primary-heading-bg

#### Success

@panel-success-text @panel-success-border @panel-success-heading-bg

#### Info

@panel-info-text @panel-info-border @panel-info-heading-bg

#### Warning

@panel-warning-text @panel-warning-border @panel-warning-heading-bg

#### Danger

@panel-danger-text @panel-danger-border @panel-danger-heading-bg

### Wells

@well-bg

## Accordion

@accordion-border-bg

## Badges

### Base styles

@badge-font-weight @badge-color
@badge-bg
@badge-border-radius

### States

@badge-link-hover-color

Linked badge text color on hover

@badge-active-color

Badge text color in active nav link

@badge-active-bg

Badge background color in active nav link

## Breadcrumbs

@breadcrumb-color

Breadcrumb text color

@breadcrumb-bg

Breadcrumb background color

@breadcrumb-active-color

Text color of current page in the breadcrumb

@breadcrumb-separator

Textual separator for between breadcrumb elements

## Jumbotron

@jumbotron-padding
@jumbotron-bg
@jumbotron-color
@jumbotron-heading-color

## Modals

### Base modal

@modal-inner-padding

Padding applied to the modal body

@modal-backdrop-bg

Modal backdrop background color

### Modal header and footer

@modal-title-padding

Padding applied to the modal title

@modal-title-line-height

Modal title line-height

@modal-header-border-color

Modal header border color

@modal-footer-border-color

Modal footer border color

### Modal content

@modal-content-bg

Background color of modal content area

@modal-content-border-color

Modal content border color

@modal-content-fallback-border-color

Modal content border color for IE8

## Carousel

@carousel-text-shadow
@carousel-control-color
@carousel-caption-color
@carousel-indicator-border-color
@carousel-indicator-active-bg

## List group

### Base styles

@list-group-bg

Background color on `.list-group-item`

@list-group-border

`.list-group-item` border color

@list-group-border-radius

List group border radius

### Hover and active states

@list-group-hover-bg

Background color of single list elements on hover

@list-group-active-color

Text color of active list elements

@list-group-active-bg

Background color of active list elements

@list-group-active-border

Border color of active list elements

## Thumbnails

### Base thumbnail

@thumbnail-padding

Padding around the thumbnail image

@thumbnail-bg

Thumbnail background color

@thumbnail-border

Thumbnail border color

@thumbnail-border-radius

Thumbnail border radius

### Thumbnail captions

@thumbnail-caption-padding

Padding around the thumbnail caption

@thumbnail-caption-color

Custom text color for thumbnail captions

## Progress bars

### Shared styles

@progress-bg

Background color of the whole progress component

@progress-bar-color

Info progress bar text color

@progress-bar-text-shadow

Info progress bar text shadow

@progress-bar-bg

Default progress bar color

### Contextual states

@progress-bar-success-bg

Success progress bar color

@progress-bar-info-bg

Info progress bar color

@progress-bar-warning-bg

Warning progress bar color

@progress-bar-danger-bg

Danger progress bar color

## Pagination

### Default styles

@pagination-bg

Background color

@pagination-border

Border color

@pagination-hover-bg

Background hover color

### Disabled and active states

@pagination-disabled-color

Disabled text color

@pagination-active-bg

Active background color

@pagination-active-color

Active text color

## Pager

@pager-border-radius

Pager border radius

@pager-disabled-color

Pager disabled state color

## Labels

@label-color

Default label text color

@label-link-hover-color

Default text color of a linked label

@label-default-bg

Default label background color

@label-primary-bg

Primary label background color

@label-success-bg

Success label background color

@label-info-bg

Info label background color

@label-warning-bg

Warning label background color

@label-danger-bg

Danger label background color

## Tooltips and popovers

### Tooltip

@tooltip-color

Tooltip text color

@tooltip-bg

Tooltip background color

@tooltip-arrow-width

Tooltip arrow width

@tooltip-arrow-color

Tooltip arrow color

@tooltip-max-width

Tooltip max width

### Popovers

### Base styles

@popover-bg

Popover body background color

@popover-max-width

Popover maximum width

@popover-border-color

Popover border color

@popover-fallback-border-color

Popover fallback border color

@popover-title-bg

Popover title background color

### Popover arrows

@popover-arrow-width

Popover arrow width

@popover-arrow-color

Popover arrow color

@popover-arrow-outer-width

Popover outer arrow width

@popover-arrow-outer-color

Popover outer arrow color

@popover-arrow-outer-fallback-color

Popover outer arrow fallback color

## Close button

@close-font-weight
@close-color
@close-text-shadow

## Type

@text-muted

Text muted color

@abbr-border-color

Abbreviations and acronyms border color

@headings-small-color

Headings small color

@blockquote-small-color

Blockquote small color

@blockquote-border-color

Blockquote border color

@page-header-border-color

Page header border color

## Other

@hr-border

Horizontal line color

@component-offset-horizontal

Horizontal offset for forms and lists

# Download

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