7 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!22716Docs redesign,!17021v4
description:A brief overview of Bootstrap's features and limitations for the creation of accessible content.
group:getting-started
toc:true
---
Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create web sites and applications that are visually appealing, functionally rich, and accessible out of the box.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Overview and limitations
The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create web sites and applications with Bootstrap that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.0](https://www.w3.org/TR/WCAG20/)(A/AA/AAA), [Section 508](https://www.section508.gov/) and similar accessibility standards and requirements.
description:Learn which browsers and devices are supported by Bootstrap.
description:Learn about the browsers and devices, from modern to told, that are supported by Bootstrap, including known quirks and bugs for each.
group:getting-started
toc:true
---
Bootstrap supports a wide variety of modern browsers and devices, and some older ones. See which exact ones below, as well as detailed information on known quirks and bugs.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Supported browsers
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 10-11 / Microsoft Edge**.
description:Details on how to use Bootstrap's included build tools to compile source code, run tests, and more.
description:Learn how to use Bootstrap's included npm scripts to build our documentation, compile source code, run tests, and more.
group:getting-started
toc:true
---
Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/v4-dev/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Tooling setup
Bootstrap uses [NPM scripts](https://docs.npmjs.com/misc/scripts) for its build system. Our [package.json](https://github.com/twbs/bootstrap/blob/v4-dev/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock:
1.[Download and install Node](https://nodejs.org/download/), which we use to manage our dependencies.
description:Learn about what's included in Bootstrap's precompiled and source code directories.
description:Discover what's included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap's JavaScript plugins require jQuery.
group:getting-started
toc:true
---
Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each flavor's contents and structure below. Remember, no matter the implementation flavor, **Bootstrap's JavaScript plugins require jQuery**.
## Precompiled Bootstrap
Once downloaded, unzip the compressed folder and you'll see something like this:
description:Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager.
description:Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, Bower, RubyGems, and more.
group:getting-started
toc:true
---
**Bootstrap v{{ site.current_version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Bootstrap CSS and JS
**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files.
description:Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more.
description:Bring Bootstrap to life with our JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.
group:getting-started
toc:true
---
Bootstrap includes a handful of JavaScript to help bring some of our components to life. Learn more about how to include it, our data and programmatic API options, and more.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Individual or compiled
Plugins can be included individually (using Bootstrap's individual `*.js` files), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both).
description:Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
description:Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new Sass variables.
group:getting-started
toc:true
---
Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed.
## Customizing variables
Bootstrap 4 ships with a `_custom.scss` file for easy overriding of default variables in `/scss/_variables.scss`. Copy and paste relevant lines from there into the `_custom.scss` file, modify the values, and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.**
...
...
@@ -27,6 +26,8 @@ Do the same for any variable you need to override, including the global options
## Global options
Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed.
You can find and customize these variables for key global options in our `_variables.scss` file.
description:Learn how to install Bootstrap using webpack 2
description:Learn how to include Bootstrap in your project using Webpack 2.
group:getting-started
toc:true
---
Use [webpack v2.x](https://webpack.js.org/) to bundle Bootstrap into your project.
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Installing Bootstrap
[Install bootstrap](/getting-started/download/#npm) as a node module using npm.
...
...
@@ -60,16 +53,16 @@ Notice that if you chose to **import plugins individually**, you must also insta
### Importing Precompiled SASS
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.
First, create your own `_custom.scss` and use it to override the [built-in custom variables](/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap:
First, create your own `_custom.scss` and use it to override the [built-in custom variables](/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap:
{% highlight scss %}
@import "custom";
@import "~bootstrap/scss/bootstrap";
{% endhighlight %}
For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/postcss/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack) and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes). With minimal setup, your webpack config should include this rule or similar:
