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. Show Common CSSPrint media styles Typography Code Grid system Tables Forms Buttons Responsive utilities ComponentsGlyphicons Button groups Input groups Navs Navbar Breadcrumbs Pagination Pager Labels Badges Jumbotron Thumbnails Alerts Progress bars Media items List groups Panels Responsive embed Wells Close icon JavaScript componentsComponent animations (for JS) (includes Collapse) Dropdown Tooltip Popover Modal Carousel 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 componentsAlert dismissal Advanced buttons Carousel functionality Dropdowns Modals Tooltips Popovers (requires Tooltips) Togglable tabs MagicAffix Collapse Scrollspy Transitions (required for any kind of animation) Produces two filesAll checked plugins will be compiled into a readable jQuery requiredAll plugins require the latest version of jQuery to be included. Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets. ColorsGray and brand colors for use across Bootstrap. @gray-base @gray-darker @gray-dark @gray @gray-light @gray-lighter @brand-primary @brand-success @brand-info @brand-warning @brand-danger ScaffoldingSettings for some of the most global styles. @body-bg Background color for @text-color Global text color on @link-color Global textual link color. @link-hover-color Link hover color set via @link-hover-decoration Link hover decoration. TypographyFont, line-height, and color for body text, headings, and more. @font-family-sans-serif @font-family-serif @font-family-monospace Default monospace fonts for @font-family-base @font-size-base @font-size-large @font-size-small @font-size-h1 @font-size-h2 @font-size-h3 @font-size-h4 @font-size-h5 @font-size-h6 @line-height-base Unit-less @line-height-computed Computed "line-height" ( @headings-font-family By default, this inherits from the @headings-font-weight @headings-line-height @headings-color IconographySpecify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. @icon-font-path Load fonts from this directory. @icon-font-name File name for all font files. @icon-font-svg-id Element ID within SVG icon file. ComponentsDefine common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). @padding-base-vertical @padding-base-horizontal @padding-large-vertical @padding-large-horizontal @padding-small-vertical @padding-small-horizontal @padding-xs-vertical @padding-xs-horizontal @line-height-large @line-height-small @border-radius-base @border-radius-large @border-radius-small @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). @caret-width-base Width of the `bootstrap.min.js`4 for generating carets that indicate dropdowns. @caret-width-large Carets increase slightly in size for larger components. TablesCustomizes the `bootstrap.min.js`5 component with basic values, each used across all table variations. @table-cell-padding Padding for `bootstrap.min.js`6s and `bootstrap.min.js`7s. @table-condensed-cell-padding Padding for cells in `bootstrap.min.js`8. @table-bg Default background color used for all tables. @table-bg-accent Background color used for `bootstrap.min.js`9. @table-bg-hover Background color used for `<body>`0. @table-bg-active @table-border-color Border color for table and cell borders. ButtonsFor each of Bootstrap's buttons, define text, background and border color. @btn-font-weight @btn-default-color @btn-default-bg @btn-default-border @btn-primary-color @btn-primary-bg @btn-primary-border @btn-success-color @btn-success-bg @btn-success-border @btn-info-color @btn-info-bg @btn-info-border @btn-warning-color @btn-warning-bg @btn-warning-border @btn-danger-color @btn-danger-bg @btn-danger-border @btn-link-disabled-color @btn-border-radius-base @btn-border-radius-large @btn-border-radius-small Forms@input-bg `<body>`1 background color @input-bg-disabled `<body>`2 background color @input-color Text color for `<body>`1s @input-border `<body>`1 border color @input-border-radius Default `<body>`5 border radius @input-border-radius-large Large `<body>`5 border radius @input-border-radius-small Small `<body>`5 border radius @input-border-focus Border color for inputs on focus @input-color-placeholder Placeholder text color @input-height-base Default `<body>`5 height @input-height-large Large `<body>`5 height @input-height-small Small `<body>`5 height @form-group-margin-bottom `<body>`1 margin @legend-color @legend-border-color @input-group-addon-bg Background color for textual input addons @input-group-addon-border-color Border color for textual input addons @cursor-disabled Disabled cursor for form controls and buttons. DropdownsDropdown menu container and contents. @dropdown-bg Background for the dropdown menu. @dropdown-border Dropdown menu `<body>`2. @dropdown-fallback-border Dropdown menu `<body>`2 for IE8. @dropdown-divider-bg Divider color for between dropdown items. @dropdown-link-color Dropdown link text color. @dropdown-link-hover-color Hover color for dropdown links. @dropdown-link-hover-bg Hover background for dropdown links. @dropdown-link-active-color Active dropdown menu item text color. @dropdown-link-active-bg Active dropdown menu item background color. @dropdown-link-disabled-color Disabled dropdown menu item background color. @dropdown-caret-color Deprecated `<body>`4 as of v3.1.0 Define the breakpoints at which your layout will change, adapting to different screen sizes. @screen-xs Deprecated `<body>`5 as of v3.0.1 @screen-xs-min Deprecated `<body>`6 as of v3.2.0 @screen-phone Deprecated `<body>`7 as of v3.0.1 @screen-sm Deprecated `<body>`8 as of v3.0.1 @screen-sm-min @screen-tablet Deprecated `<body>`9 as of v3.0.1 @screen-md Deprecated `darken()`0 as of v3.0.1 @screen-md-min @screen-desktop Deprecated `darken()`1 as of v3.0.1 @screen-lg Deprecated `darken()`2 as of v3.0.1 @screen-lg-min @screen-lg-desktop Deprecated `darken()`3 as of v3.0.1 @screen-xs-max @screen-sm-max @screen-md-max Grid systemDefine your custom responsive grid. @grid-columns Number of columns in the grid. @grid-gutter-width Padding between columns. Gets divided in half for the left and right. @grid-float-breakpoint Point at which the navbar becomes uncollapsed. @grid-float-breakpoint-max Point at which the navbar begins collapsing. Container sizesDefine the maximum width of `darken()`4 for different screen sizes. @container-tablet @container-sm For `darken()`5 and up. @container-desktop @container-md For `darken()`6 and up. @container-large-desktop @container-lg For `darken()`7 and up. Navbar@navbar-height @navbar-margin-bottom @navbar-border-radius @navbar-padding-horizontal @navbar-padding-vertical @navbar-collapse-max-height @navbar-default-color @navbar-default-bg @navbar-default-border @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 @navbar-default-brand-color @navbar-default-brand-hover-color @navbar-default-brand-hover-bg @navbar-default-toggle-hover-bg @navbar-default-toggle-icon-bar-bg @navbar-default-toggle-border-color Inverted navbar@navbar-inverse-color @navbar-inverse-bg @navbar-inverse-border @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 @navbar-inverse-brand-color @navbar-inverse-brand-hover-color @navbar-inverse-brand-hover-bg @navbar-inverse-toggle-hover-bg @navbar-inverse-toggle-icon-bar-bg @navbar-inverse-toggle-border-color NavsShared nav styles@nav-link-padding @nav-link-hover-bg @nav-disabled-link-color @nav-disabled-link-hover-color Tabs@nav-tabs-border-color @nav-tabs-link-hover-border-color @nav-tabs-active-link-hover-bg @nav-tabs-active-link-hover-color @nav-tabs-active-link-hover-border-color @nav-tabs-justified-link-border-color @nav-tabs-justified-active-link-border-color Pills@nav-pills-border-radius @nav-pills-active-link-hover-bg @nav-pills-active-link-hover-color @pagination-color @pagination-bg @pagination-border @pagination-hover-color @pagination-hover-bg @pagination-hover-border @pagination-active-color @pagination-active-bg @pagination-active-border @pagination-disabled-color @pagination-disabled-bg @pagination-disabled-border @pager-bg @pager-border @pager-border-radius @pager-hover-bg @pager-active-bg @pager-active-color @pager-disabled-color Jumbotron@jumbotron-padding @jumbotron-color @jumbotron-bg @jumbotron-heading-color @jumbotron-font-size @jumbotron-heading-font-size Form states and alertsDefine colors for form feedback states and, by default, alerts. @state-success-text @state-success-bg @state-success-border @state-info-text @state-info-bg @state-info-border @state-warning-text @state-warning-bg @state-warning-border @state-danger-text @state-danger-bg @state-danger-border @tooltip-max-width Tooltip max width @tooltip-color Tooltip text color @tooltip-bg Tooltip background color @tooltip-opacity @tooltip-arrow-width Tooltip arrow width @tooltip-arrow-color Tooltip arrow color Popovers@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-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 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 @label-color Default label text color @label-link-hover-color Default text color of a linked label 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-backdrop-opacity Modal backdrop opacity @modal-header-border-color @modal-footer-border-color @modal-lg @modal-md @modal-sm AlertsDefine alert colors, border radius, and padding. @alert-padding @alert-border-radius @alert-link-font-weight @alert-success-bg @alert-success-text @alert-success-border @alert-info-bg @alert-info-text @alert-info-border @alert-warning-bg @alert-warning-text @alert-warning-border @alert-danger-bg @alert-danger-text @alert-danger-border Progress bars@progress-bg Background color of the whole progress component @progress-bar-color Progress bar text color @progress-border-radius Variable for setting rounded corners on progress bar. @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 List group@list-group-bg Background color on `darken()`8 @list-group-border `darken()`8 border color @list-group-border-radius List group border radius @list-group-hover-bg 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 Border color of active list elements @list-group-active-text-color Text color for content within active list items @list-group-disabled-color Text color of disabled list items @list-group-disabled-bg Background color of disabled list items @list-group-disabled-text-color Text color for content within disabled list items @list-group-link-color @list-group-link-hover-color @list-group-link-heading-color Panels@panel-bg @panel-body-padding @panel-heading-padding @panel-footer-padding @panel-border-radius @panel-inner-border Border color for elements within panels @panel-footer-bg @panel-default-text @panel-default-border @panel-default-heading-bg @panel-primary-text @panel-primary-border @panel-primary-heading-bg @panel-success-text @panel-success-border @panel-success-heading-bg @panel-info-text @panel-info-border @panel-info-heading-bg @panel-warning-text @panel-warning-border @panel-warning-heading-bg @panel-danger-text @panel-danger-border @panel-danger-heading-bg 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-color Custom text color for thumbnail captions @thumbnail-caption-padding Padding around the thumbnail caption WellsBadges@badge-color @badge-link-hover-color Linked badge text color on hover @badge-bg @badge-active-color Badge text color in active nav link @badge-active-bg Badge background color in active nav link @badge-font-weight @badge-line-height @badge-border-radius @breadcrumb-padding-vertical @breadcrumb-padding-horizontal @breadcrumb-bg Breadcrumb background color @breadcrumb-color Breadcrumb text color @breadcrumb-active-color Text color of current page in the breadcrumb @breadcrumb-separator Textual separator for between breadcrumb elements Carousel@carousel-text-shadow @carousel-control-color @carousel-control-width @carousel-control-opacity @carousel-control-font-size @carousel-indicator-active-bg @carousel-indicator-border-color @carousel-caption-color Close@close-font-weight @close-color @close-text-shadow Code@code-color @code-bg @kbd-color @kbd-bg @pre-bg @pre-color @pre-border-color @pre-scrollable-max-height Type@component-offset-horizontal Horizontal offset for forms and lists. @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-font-size Blockquote font size @blockquote-border-color Blockquote border color @page-header-border-color @dl-horizontal-offset Width of horizontal description list titles @dl-horizontal-breakpoint Point at which .dl-horizontal becomes horizontal @hr-border Horizontal line color. Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process. |
