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

# 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

### Basics

#### Layout

Normalize (CSS reset)
Scaffolding
Grid system
Print media styles

#### Global CSS

Typography
Code
Tables
Forms
Buttons

#### Utility classes

Basic utilities
Responsive utilities
Component animations (for JS)

### Components

#### Navigation

Navs
Navbar
Pagination
Pager
Breadcrumbs

#### Content blocks

Jumbotron
Accordion
Panels
Wells

#### Behavioral (requires JS)

Alerts
Dropdowns
Tooltips
Popovers
Modals
Carousel

#### Media

Thumbnails
List groups
Media items

#### Miscellaneous

Button groups
Progress bars
Badges
Labels
Close icon

# 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)
Toggable tabs

#### Magic

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

#### Heads up!

All checked plugins will be compiled into a single file, `bootstrap.js`. 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.

#### 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-tiny @screen-small
@screen-medium @screen-large

### Container sizes

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

@container-tablet

For `@screen-small` and up.

@container-desktop

For `@screen-medium` and up.

@container-large-desktop

For `@screen-large` and up.

### Grid system

Define your custom responsive grid.

@grid-columns

Number of columns in the 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

#### 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 and border radius.

#### Border radius

@alert-border-radius

#### Success

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

#### Warning

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

#### Links

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

#### Brand

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

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

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

### Background

@input-bg

`<input>` background color

@input-bg-disabled

`<input disabled>`background color

### Placeholder

@input-color-placeholder

Placeholder text color

### Border

@input-border

`<input>` border color

@input-border-radius

`<input>`border radius

## Dropdowns

### Background

@dropdown-bg

Dropdown menu background color

@dropdown-link-active-bg

Active dropdown menu entry background color

@dropdown-link-hover-bg

Hovered dropdown menu entry background color

### Colors

@dropdown-link-color

Dropdown text color

@dropdown-link-active-color

Active dropdown menu entry text color

@dropdown-link-hover-bg

Hovered dropdown menu entry text color

### Dividers

@dropdown-divider-top

Dropdown divider top border color

@dropdown-divider-bottom

Dropdown divider bottom border color

## Panels and wells

### Default panel styles

@panel-bg

Panel body background color

@panel-heading-bg

Panel heading background color

@panel-footer-bg

Panel footer background color

@panel-border

Panel border color

@panel-border-radius

Panel border radius

### Contextual panel colors

#### Primary

@panel-primary-text

Primary text color

@panel-primary-border

Primary border color

@panel-primary-heading-bg

Primary heading background color

#### Success

@panel-success-text

Success text color

@panel-success-border

Success border color

@panel-success-heading-bg

Success heading background color

#### Info

@panel-info-text

Info text color

@panel-info-border

Info border color

@panel-info-heading-bg

Info heading background color

#### Warning

@panel-warning-text

Warning text color

@panel-warning-border

Warning border color

@panel-warning-heading-bg

Warning heading background color

#### Danger

@panel-danger-text

Danger text color

@panel-danger-border

Danger border color

@panel-danger-heading-bg

Danger heading background color

### Wells

@well-bg

## Jumbotron

@jumbotron-bg

Jumbotron background color

@jumbotron-heading-color

Jumbotron heading color

@jumbotron-lead-color

Jumbotron lead paragraph 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

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

Custom text color for thumbnail captions

@thumbnail-bg

Thumbnail background color

@thumbnail-border

Thumbnail border color

@thumbnail-border-radius

Thumbnail border radius

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

## Pagination

@pagination-bg

Background color

@pagination-border

Border color

@pagination-active-bg

Active background color

## Labels

@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

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

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

Customize and Download

#### What's included?

Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.