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

### Body background

@body-bg

Background color applied to `<body>`.

### Typography

@font-family-sans-serif

Default sans-serif fonts.

@font-family-serif

Default serif fonts.

@font-family-monospace

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

@font-family-base

Used to globally set font-family in Bootstrap.

@font-size-base

Used to calculate font-size throughout Bootstrap.

@line-height-base

Used to calculate line-height throughout Bootstrap.

### Code blocks

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

#### Headings

@headings-font-family

Choose a separate font-family for headings.

@headings-font-weight

Choose a separate font-weight for headings.

@headings-line-height

Choose a separate line-height for headings.

### Colors

Define custom colors used in several contexts.

@brand-primary

Used for primary buttons, panels and more.

@brand-success

Used to indicate success.

@brand-warning

Used to indicate a warning.

@brand-danger

Used to indicate danger.

@brand-info

Used to indicate informational content.

Define your preferred colors for standard text and links.

@text-color

Global color set on the body.

@link-color

Global link color for text.

@link-color-hover

Automatically darken links on hover via color function.

### Media queries breakpoints

Define the breakpoints at which your layout will change, adapting to different screen sizes.

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

### Container sizes

Define the maximum width of `.container` for different screen sizes.

@container-tablet

For `@screen-sm` and up.

@container-desktop

For `@screen-md` and up.

@container-lg-desktop

For `@screen-lg` and up.

### Grid system

Define your custom responsive grid.

@grid-gutter-width

Padding between columns.

@grid-float-breakpoint

Point at which the navbar stops collapsing.

### Components

Define common padding and border radius sizes and more.

#### Padding

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

#### Border radius sizes

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

#### Active background color

@component-active-bg

Used for active or hovered items in places like navs or dropdowns.

## Buttons

For each of Bootstrap's buttons, define text, background and border 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

Define colors for form feedback states and, by default, 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

Define alert colors, border radius, and padding.

#### Border radius

@alert-padding @alert-border-radius

#### Default (Warning)

@alert-text @alert-bg @alert-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

### Default navbar

#### Basics

@navbar-height @navbar-margin-bottom @navbar-default-color @navbar-default-bg @navbar-border-radius

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

#### 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-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-bg-disabled

`<input disabled>` background color

### Placeholder

@input-color-placeholder

Placeholder text color

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

@badge-color

Badge text color

@badge-bg

Badge background color

@badge-link-hover-color

Linked badge text color on hover

@badge-active-color

Badge text color in active nav link

@badge-active-bg

Badge text 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

## Jumbotron

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

## Modals

@modal-inner-padding

Padding applied to the modal body

@modal-title-padding

Padding applied to the modal title

@modal-title-line-height

Modal title line-height

@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

@modal-backdrop-bg

Modal backdrop background color

@modal-header-border-color

Modal header border color

@modal-footer-border-color

Modal footer border color

## Carousel

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

## List group

### Background

@list-group-bg

Default background color

@list-group-hover-bg

Background color of single list elements on hover

@list-group-active-bg

Background color of active list elements

### Borders

@list-group-border

Default border color

@list-group-border-radius

List group border radius

@list-group-active-border

Border color of active list elements

@list-group-active-color

Text color of active list elements

## Thumbnails

@thumbnail-padding

Padding around the thumbnail image

@thumbnail-bg

Thumbnail background color

@thumbnail-border

Thumbnail border color

@thumbnail-border-radius

Thumbnail border radius

@thumbnail-caption-padding

Padding around the thumbnail caption

@thumbnail-caption-color

Custom text color for thumbnail captions

## Progress bars

@progress-bg

Background color of the whole progress component

@progress-bar-bg

Default progress bar color

@progress-bar-success-bg

Success progress bar color

@progress-bar-warning-bg

Warning progress bar color

@progress-bar-danger-bg

Danger progress bar color

@progress-bar-info-bg

Info progress bar color

@progress-bar-color

Info progress bar text color

@progress-bar-text-shadow

Info progress bar text shadow

## Pagination

@pagination-bg

Background color

@pagination-border

Border color

@pagination-active-bg

Active background color

@pagination-active-color

Active text color

@pagination-disabled-color

Disabled text color

## Pager

@pager-border-radius

Pager border radius

@pager-disabled-color

Pager disabled state color

## Labels

@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 styles

@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

### Popover styles

@popover-bg

Popover body background color

@popover-title-bg

Popover title background color

@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

@popover-max-width

Popover maximum width

@popover-border-color

Popover border color

@popover-fallback-border-color

Popover fallback border color

## Close button

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