customize and download · bootstrap

5/22/2018 Customize and Download Bootstrap

1/17

Customize and downloadCustomize Bootstrap's components, Less variables, and jQuery pluginsto get your very own version.

Toggle allLess files

Choose which Less files to compile into your custom build of Bootstrap. Not sure

which files to use? Read through the CSS (../css/) and Components

(../components/) pages in the docs.

Common CSS

Print media styles

Typography

Code

Grid system

Tables

Forms

Buttons

Responsive utilities

Components

Glyphicons

Button groups

Input groups

Navs

Navbar

Breadcrumbs

Pagination

Pager

Labels

Badges

Jumbotron

Thumbnails

Alerts

Progress bars

Media items

List groups

JavaScriptcomponents

Component animations (for JS)

Dropdowns

Tooltips

Popovers

Modals

Carousel

http://getbootstrap.com/customize/

1 of 17 5/07/2014 8:47 pm


2/17

Toggle alljQuery plugins

Choose which jQuery plugins should be included in your custom JavaScript files.

Unsure what to include? Read the JavaScript (../javascript/) page in the docs.

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 (http://jquery.com/) to be included.

Panels

Responsive embed

Wells

Close icon

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)


2 of 17 5/07/2014 8:47 pm


3/17

Reset to defaults

@gray-darker

lighten(#000, 13.5%)

@gray-dark

lighten(#000, 20%)

@gray

lighten(#000, 33.5%)

@gray-light

lighten(#000, 46.7%)

@gray-lighter

lighten(#000, 93.5%)

@brand-primary

#428bca

@brand-success

#5cb85c

@brand-info

#5bc0de

@brand-warning

#f0ad4e

@brand-danger

#d9534f

@body-bg

#fff

Background color for .

@text-color

@gray-dark

Global text color on .

@link-color

@brand-primary

Global textual link color.

@link-hover-color

darken(@link-color, 15%

Link hover color set via darken()

function.

@font-family-sans-serif

"Helvetica Neue", Helve

@font-family-serif

Georgia, "Times New Rom

@font-family-monospace

Menlo, Monaco, Consolas

Default monospace fonts for ,

, and .

@font-family-base @font-size-base @font-size-large

Less variables

Customize Less variables to define colors, sizes and more inside your custom

CSS stylesheets.

ColorsGray and brand colors for use across Bootstrap.

ScaffoldingSettings for some of the most global styles.

TypographyFont, line-height, and color for body text, headings, and more.


3 of 17 5/07/2014 8:47 pm


4/17

@font-family-sans-serif 14px ceil((@font-size-base *

@font-size-small

ceil((@font-size-base *

@font-size-h1

floor((@font-size-base

@font-size-h2


@font-size-h3


@font-size-h4


@font-size-h5

@font-size-base

@font-size-h6


@line-height-base

1.428571429

Unit-less line-height for use in

components like buttons.

@line-height-computed


Computed "line-height" (font-size *

line-height) for use with margin ,

padding , etc.

@headings-font-family

inherit

By default, this inherits from the

.

@headings-font-weight

500

@headings-line-height

1.1

@headings-color

inherit

@icon-font-path

"../fonts/"Load fonts from this directory.

@icon-font-name

"glyphicons-halflings-rFile name for all font files.

@icon-font-svg-id

"glyphicons_halflingsreElement ID within SVG icon file.

@padding-base-vertical

6px

@padding-base-horizontal

12px

@padding-large-vertical

10px

@padding-large-horizontal

16px

@padding-small-vertical

5px

@padding-small-horizontal

10px

@padding-xs-vertical

1px

@padding-xs-horizontal

5px

@line-height-large

1.33

@line-height-small

1.5

@border-radius-base

4px

@border-radius-large

6px

@border-radius-small

3px

@component-active-color

#fff

@component-active-bg

@brand-primary

IconographySpecify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via

Bower.

ComponentsDefine common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height

(~20px to start).


4 of 17 5/07/2014 8:47 pm


5/17

Global color for active items (e.g., navs

or dropdowns).

Global background color for active items

(e.g., navs or dropdowns).@caret-width-base

4px

Width of the border for generating

carets that indicator dropdowns.

@caret-width-large

5px

Carets increase slightly in size for larger

components.

@table-cell-padding

8px

Padding for s and s.

@table-condensed-cell-padding

5px

Padding for cells in .table-

condensed .

@table-bg

transparent

Default background color used for all

tables.

@table-bg-accent

#f9f9f9

Background color used for .table-

striped .

@table-bg-hover

#f5f5f5

Background color used for .table-

hover .

@table-bg-active

@table-bg-hover

@table-border-color

#ddd

Border color for table and cell borders.

@btn-font-weight

normal

@btn-default-color

#333

@btn-default-bg

#fff

@btn-default-border

#ccc

@btn-primary-color

#fff

@btn-primary-bg

@brand-primary

@btn-primary-border

darken(@btn-primary-bg,

@btn-success-color

#fff

@btn-success-bg

@brand-success

@btn-success-border

darken(@btn-success-bg,

@btn-info-color

#fff

@btn-info-bg

@brand-info

@btn-info-border

darken(@btn-info-bg, 5%

@btn-warning-color

#fff

@btn-warning-bg

@brand-warning

@btn-warning-border

darken(@btn-warning-bg,

@btn-danger-color

#fff

@btn-danger-bg

@brand-danger

TablesCustomizes the .table component with basic values, each used across all table variations.

ButtonsFor each of Bootstrap's buttons, define text, background and border color.


5 of 17 5/07/2014 8:47 pm


6/17

@btn-danger-border

darken(@btn-danger-bg,

@btn-link-disabled-color

@gray-light

@input-bg

#fff

background color

@input-bg-disabled

@gray-lighter

background color

@input-color

@gray

Text color for s

@input-border

#ccc

border color

@input-border-radius

@border-radius-base

border radius

@input-border-focus

#66afe9

Border color for inputs on focus

@input-color-placeholder

@gray-light

Placeholder text color

@input-height-base

(@line-height-computed

Default .form-control height

@input-height-large

(ceil(@font-size-large

Large .form-control height

@input-height-small

(floor(@font-size-small

Small .form-control height

@legend-color

@gray-dark

@legend-border-color

#e5e5e5

@input-group-addon-bg

@gray-lighter

Background color for textual input

addons

@input-group-addon-border-color

@input-border

Border color for textual input addons

@dropdown-bg

#fff

Background for the dropdown menu.

@dropdown-border

rgba(0,0,0,.15)

Dropdown menu border-color .

@dropdown-fallback-border

#ccc

Dropdown menu border-color for

IE8.

@dropdown-divider-bg

#e5e5e5

Divider color for between dropdown

items.

@dropdown-link-color

@gray-dark

Dropdown link text color.

@dropdown-link-hover-color

darken(@gray-dark, 5%)

Hover color for dropdown links.

@dropdown-link-hover-bg

#f5f5f5

Hover background for dropdown links.

@dropdown-link-active-color


Active dropdown menu item text color.

@dropdown-link-active-bg


Active dropdown menu item background

@dropdown-link-disabled-color

@gray-light

Disabled dropdown menu item

@dropdown-header-color

@gray-light

Text color for headers within dropdown

Forms

DropdownsDropdown menu container and contents.


6 of 17 5/07/2014 8:47 pm


7/17

color. background color. menus.

@dropdown-caret-color

#000

Deprecated @dropdown-caret-color

as of v3.1.0

@screen-xs

480px

Deprecated @screen-xs as of v3.0.1

@screen-xs-min

@screen-xs

Deprecated @screen-xs-min as of

v3.2.0

@screen-phone

@screen-xs-min

Deprecated @screen-phone as of

v3.0.1

@screen-sm

768px

Deprecated @screen-sm as of v3.0.1

@screen-sm-min

@screen-sm

@screen-tablet

@screen-sm-min

Deprecated @screen-tablet as of

v3.0.1

@screen-md

992px

Deprecated @screen-md as of v3.0.1

@screen-md-min

@screen-md

@screen-desktop

@screen-md-min

Deprecated @screen-desktop as of

v3.0.1

@screen-lg

1200px

Deprecated @screen-lg as of v3.0.1

@screen-lg-min

@screen-lg

@screen-lg-desktop

@screen-lg-min

Deprecated @screen-lg-desktop as

of v3.0.1

@screen-xs-max

(@screen-sm-min - 1)

@screen-sm-max

(@screen-md-min - 1)

@screen-md-max

(@screen-lg-min - 1)

@grid-columns

12

Number of columns in the grid.

@grid-gutter-width

30px

Padding between columns. Gets divided

in half for the left and right.

@grid-float-breakpoint

@screen-sm-min

Point at which the navbar becomes

uncollapsed.

@grid-float-breakpoint-max

(@grid-float-breakpoint

Point at which the navbar begins

collapsing.

Media queries breakpointsDefine the breakpoints at which your layout will change, adapting to di!erent screen sizes.

Grid systemDefine your custom responsive grid.


7 of 17 5/07/2014 8:47 pm


8/17

@container-tablet

((720px + @grid-gutter-

@container-sm

@container-tablet

For @screen-sm-min and up.

@container-desktop

((940px + @grid-gutter-

@container-md

@container-desktop

For @screen-md-min and up.

@container-large-desktop

((1140px + @grid-gutter

@container-lg

@container-large-deskto

For @screen-lg-min and up.

@navbar-height

50px

@navbar-margin-bottom

@line-height-computed

@navbar-border-radius

@border-radius-base

@navbar-padding-horizontal

floor((@grid-gutter-wid

@navbar-padding-vertical

((@navbar-height - @lin

@navbar-collapse-max-height

340px

@navbar-default-color

#777

@navbar-default-bg

#f8f8f8

@navbar-default-border

darken(@navbar-default-

@navbar-default-link-color

#777

@navbar-default-link-hover-color

#333

@navbar-default-link-hover-bg

transparent

@navbar-default-link-active-color

#555

@navbar-default-link-active-bg


@navbar-default-

link-disabled-color

#ccc

@navbar-default-link-disabled-bg

transparent

@navbar-default-brand-color

@navbar-default-link-co

@navbar-default-brand-

hover-color


@navbar-default-brand-hover-bg

transparent

@navbar-default-toggle-hover-bg

#ddd

@navbar-default-toggle-

icon-bar-bg

#888

@navbar-default-toggle-

border-color

#ddd

@navbar-inverse-color

@gray-light

@navbar-inverse-bg

#222

@navbar-inverse-border

darken(@navbar-inverse-

@navbar-inverse-link-color

@gray-light

Container sizesDefine the maximum width of .container for di!erent screen sizes.

Navbar


8 of 17 5/07/2014 8:47 pm


9/17

@navbar-inverse-link-hover-color

#fff

@navbar-inverse-link-hover-bg

transparent

@navbar-inverse-link-active-color

@navbar-inverse-link-ho

@navbar-inverse-link-active-bg

darken(@navbar-inverse-

@navbar-inverse-

link-disabled-color

#444

@navbar-inverse-link-disabled-bg

transparent

@navbar-inverse-brand-color

@navbar-inverse-link-co

@navbar-inverse-brand-

hover-color

#fff

@navbar-inverse-brand-hover-bg

transparent

@navbar-inverse-toggle-hover-bg

#333

@navbar-inverse-toggle-

icon-bar-bg

#fff

@navbar-inverse-toggle-

border-color

#333

@nav-link-padding

10px 15px

@nav-link-hover-bg

@gray-lighter

@nav-disabled-link-color

@gray-light

@nav-disabled-link-hover-color

@gray-light

@nav-open-link-hover-color

#fff

@nav-tabs-border-color

#ddd

@nav-tabs-link-hover-

border-color

@gray-lighter

@nav-tabs-active-link-hover-bg

@body-bg

@nav-tabs-active-link-hover-color

@gray

@nav-tabs-active-link-hover-

border-color

#ddd

@nav-tabs-justified-

link-border-color

#ddd

@nav-tabs-justified-active-

link-border-color

@body-bg

@nav-pills-border-radius

@border-radius-base

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


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


Navs

Shared nav styles

Tabs

Pills

Pagination


9 of 17 5/07/2014 8:47 pm


10/17

@pagination-color

@link-color

@pagination-bg

#fff

@pagination-border

#ddd

@pagination-hover-color

@link-hover-color

@pagination-hover-bg

@gray-lighter

@pagination-hover-border

#ddd

@pagination-active-color

#fff

@pagination-active-bg

@brand-primary

@pagination-active-border

@brand-primary

@pagination-disabled-color

@gray-light

@pagination-disabled-bg

#fff

@pagination-disabled-border

#ddd

@pager-bg

@pagination-bg

@pager-border

@pagination-border

@pager-border-radius

15px

@pager-hover-bg

@pagination-hover-bg

@pager-active-bg

@pagination-active-bg

@pager-active-color

@pagination-active-colo

@pager-disabled-color

@pagination-disabled-co

@jumbotron-padding

30px

@jumbotron-color

inherit

@jumbotron-bg

@gray-lighter

@jumbotron-heading-color

inherit

@jumbotron-font-size


@state-success-text

#3c763d

@state-success-bg

#dff0d8

@state-success-border

darken(spin(@state-succ

@state-info-text

#31708f

@state-info-bg

#d9edf7

@state-info-border

darken(spin(@state-info

@state-warning-text

#8a6d3b

@state-warning-bg

#fcf8e3

@state-warning-border

darken(spin(@state-warn

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

Pager

Jumbotron

Form states and alerts

Define colors for form feedback states and, by default, alerts.


10 of 17 5/07/2014 8:47 pm


11/17

#a94442 #f2dede darken(spin(@state-dang

@tooltip-max-width

200px

Tooltip max width

@tooltip-color

#fff

Tooltip text color

@tooltip-bg

#000

Tooltip background color

@tooltip-opacity

.9

@tooltip-arrow-width

5px

Tooltip arrow width

@tooltip-arrow-color

@tooltip-bg

Tooltip arrow color

@popover-bg

#fff

Popover body background color

@popover-max-width

276px

Popover maximum width

@popover-border-color

rgba(0,0,0,.2)

Popover border color

@popover-fallback-border-color

#ccc

Popover fallback border color

@popover-title-bg

darken(@popover-bg, 3%)

Popover title background color

@popover-arrow-width

10px

Popover arrow width

@popover-arrow-color

#fff

Popover arrow color

@popover-arrow-outer-width

(@popover-arrow-width +

Popover outer arrow width

@popover-arrow-outer-color

fadein(@popover-border-

Popover outer arrow color

@popover-arrow-outer-

fallback-color

darken(@popover-fallbac

Popover outer arrow fallback color

@label-default-bg

@gray-light

Default label background color

@label-primary-bg

@brand-primary

Primary label background color

@label-success-bg

@brand-success

Success label background color

@label-info-bg

@brand-info

Info label background color

@label-warning-bg

@brand-warning

Warning label background color

@label-danger-bg

@brand-danger

Danger label background color

@label-color

#fff

@label-link-hover-color

#fff

Tooltips

Popovers

Labels


11 of 17 5/07/2014 8:47 pm


12/17

Default label text color Default text color of a linked label

@modal-inner-padding

15px

Padding applied to the modal body

@modal-title-padding

15px

Padding applied to the modal title

@modal-title-line-height

@line-height-base

Modal title line-height

@modal-content-bg

#fff

Background color of modal content area

@modal-content-border-color

rgba(0,0,0,.2)

Modal content border color

@modal-content-fallback-

border-color

#999

Modal content border color for IE8

@modal-backdrop-bg

#000

Modal backdrop background color

@modal-backdrop-opacity

.5

Modal backdrop opacity

@modal-header-border-color

#e5e5e5

Modal header border color

@modal-footer-border-color

@modal-header-border-co

Modal footer border color

@modal-lg

900px

@modal-md

600px

@modal-sm

300px

@alert-padding

15px

@alert-border-radius

@border-radius-base

@alert-link-font-weight

bold

@alert-success-bg

@state-success-bg

@alert-success-text

@state-success-text

@alert-success-border


@alert-info-bg

@state-info-bg

@alert-info-text

@state-info-text

@alert-info-border

@state-info-border

@alert-warning-bg

@state-warning-bg

@alert-warning-text

@state-warning-text

@alert-warning-border


@alert-danger-bg

@state-danger-bg

@alert-danger-text

@state-danger-text

@alert-danger-border

@state-danger-border

@progress-bg @progress-bar-color @progress-bar-bg

Modals

AlertsDefine alert colors, border radius, and padding.

Progress bars


12 of 17 5/07/2014 8:47 pm


13/17

#f5f5f5

Background color of the whole progress

component

#fff

Progress bar text color

@brand-primary

Default progress bar color

@progress-bar-success-bg

@brand-success

Success progress bar color

@progress-bar-warning-bg

@brand-warning

Warning progress bar color

@progress-bar-danger-bg

@brand-danger

Danger progress bar color

@progress-bar-info-bg

@brand-info

Info progress bar color

@list-group-bg

#fff

Background color on .list-

group-item

@list-group-border

#ddd

.list-group-item border color

@list-group-border-radius

@border-radius-base

List group border radius

@list-group-hover-bg

#f5f5f5

Background color of single list items on

hover

@list-group-active-color


Text color of active list items

@list-group-active-bg


Background color of active list items

@list-group-active-border

@list-group-active-bg

Border color of active list elements

@list-group-active-text-color

lighten(@list-group-act

Text color for content within active list

items

@list-group-disabled-color

@gray-light

Text color of disabled list items

@list-group-disabled-bg

@gray-lighter

Background color of disabled list items

@list-group-disabled-text-color

@list-group-disabled-co

Text color for content within disabled list

items

@list-group-link-color

#555

@list-group-link-hover-color

@list-group-link-color

@list-group-link-heading-color

#333

@panel-bg

#fff

@panel-body-padding

15px

@panel-heading-padding

10px 15px

@panel-footer-padding @panel-border-radius @panel-inner-border

List group

Panels


13 of 17 5/07/2014 8:47 pm


14/17

@panel-heading-padding @border-radius-base #ddd

Border color for elements within panels

@panel-footer-bg

#f5f5f5

@panel-default-text

@gray-dark

@panel-default-border

#ddd

@panel-default-heading-bg

#f5f5f5

@panel-primary-text

#fff

@panel-primary-border

@brand-primary

@panel-primary-heading-bg

@brand-primary

@panel-success-text

@state-success-text

@panel-success-border


@panel-success-heading-bg

@state-success-bg

@panel-info-text

@state-info-text

@panel-info-border

@state-info-border

@panel-info-heading-bg

@state-info-bg

@panel-warning-text

@state-warning-text

@panel-warning-border


@panel-warning-heading-bg

@state-warning-bg

@panel-danger-text

@state-danger-text

@panel-danger-border

@state-danger-border

@panel-danger-heading-bg

@state-danger-bg

@thumbnail-padding

4px

Padding around the thumbnail image

@thumbnail-bg

@body-bg

Thumbnail background color

@thumbnail-border

#ddd

Thumbnail border color

@thumbnail-border-radius

@border-radius-base

Thumbnail border radius

@thumbnail-caption-color

@text-color

Custom text color for thumbnail captions

@thumbnail-caption-padding

9px

Padding around the thumbnail caption

@well-bg

#f5f5f5

@well-border

darken(@well-bg, 7%)

@badge-color

#fff

@badge-link-hover-color

#fff

Linked badge text color on hover

@badge-bg

@gray-light

Thumbnails

Wells

Badges


14 of 17 5/07/2014 8:47 pm


15/17

@badge-active-color

@link-color

Badge text color in active nav link

@badge-active-bg

#fff

Badge background color in active nav

link

@badge-font-weight

bold

@badge-border-radius

10px

@breadcrumb-padding-vertical

8px

@breadcrumb-padding-horizontal

15px

@breadcrumb-bg

#f5f5f5

Breadcrumb background color

@breadcrumb-color

#ccc

Breadcrumb text color

@breadcrumb-active-color

@gray-light

Text color of current page in the

breadcrumb

@breadcrumb-separator

"/"

Textual separator for between

breadcrumb elements

@carousel-text-shadow

0 1px 2px rgba(0,0,0,.6

@carousel-control-color

#fff

@carousel-control-width

15%

@carousel-control-opacity

.5

@carousel-control-font-size

20px

@carousel-indicator-active-bg

#fff

@carousel-indicator-border-color

#fff

@carousel-caption-color

#fff

@close-font-weight

bold

@close-color

#000

@close-text-shadow

0 1px 0 #fff

@code-color

#c7254e

@code-bg

#f9f2f4

@kbd-color

#fff

@kbd-bg

#333

@pre-bg

#f5f5f5

@pre-color

@gray-dark

@pre-border-color

#ccc

@pre-scrollable-max-height

340px

Breadcrumbs

Carousel

Close

Code


15 of 17 5/07/2014 8:47 pm


16/17

StarStar ForkFork Follow @twbootstrap 181K followers Tweet 4,712

Designed and built with all the love in the world by @mdo (http://twitter.com/mdo) and @fat (http://twitter.com/fat).

Maintained by the core team (https://github.com/twbs?tab=members) with the help of our contributors

(https://github.com/twbs/bootstrap/graphs/contributors).

Code licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE), documentation under CC BY

3.0 (http://creativecommons.org/licenses/by/3.0/).

Currently v3.2.0 GitHub (https://github.com/twbs/bootstrap) Examples (../getting-started/#examples) v2.3.2

@component-offset-horizontal

180px

Horizontal o!set for forms and lists.

@text-muted

@gray-light

Text muted color

@abbr-border-color

@gray-light

Abbreviations and acronyms border

color

@headings-small-color

@gray-light

Headings small color

@blockquote-small-color

@gray-light

Blockquote small color

@blockquote-font-size

(@font-size-base * 1.25

Blockquote font size

@blockquote-border-color

@gray-lighter

Blockquote border color

@page-header-border-color

@gray-lighter

Page header border color

@dl-horizontal-offset

@component-offset-horiz

Width of horizontal description list titles

@hr-border

@gray-lighter

Horizontal line color.

Type

Download

Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click

the button below to finish the process.

Compile and Download


16 of 17 5/07/2014 8:47 pm


17/17

docs (../2.3.2/) About (../about/) Expo (http://expo.getbootstrap.com) Blog (http://blog.getbootstrap.com)

Issues (https://github.com/twbs/bootstrap/issues?state=open) Releases (https://github.com/twbs/bootstrap

/releases)


17 of 17 5/07/2014 8:47 pm

customize and download · bootstrap

Documents

5bc0d color

graydarkglobal text

link hover color set

brand colors

custom build of bootstrap

use incomponents

jquery requiredall plugins

custom javascript files