Learn how to include Bootstrap in your project using Webpack or other bundlers.
Install bootstrap as a Node.js module using npm.
Import Bootstrap’s JavaScript by adding this line to your app’s entry point (usually index.js
or app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
Alternatively, if you only need just a few of our plugins, you may import plugins individually as needed:
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap depends on Popper, which is specified in the peerDependencies
property. This means that you will have to make sure to add both of them to your package.json
using npm install popper.js
.
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 _backbone.scss
and use it to override the built-in custom variables. Then, use your main Sass file to import your custom variables, followed by Bootstrap:
@import "backbone";
@import "~bootstrap/scss/bootstrap";
For Bootstrap to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer. With minimal setup, your webpack config should include this rule or similar:
...
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
...
Alternatively, you may use Bootstrap’s ready-to-use CSS by simply adding this line to your project’s entry point:
import 'bootstrap/dist/css/bootstrap.min.css';
In this case you may use your existing rule for css
without any special modifications to webpack config, except you don’t need sass-loader
just style-loader and css-loader.
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...
Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the .sr-only
class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>
For visually hidden interactive controls, such as traditional “skip” links, use the .sr-only-focusable
class. This will ensure that the control becomes visible once focused (for sighted keyboard users). Watch out, since Bootstrap 5 the .sr-only-focusable
class may not be used in combination with the .sr-only
class.
<a class="sr-only-focusable" href="#content">Skip to main content</a>
Bootstrap includes support for the prefers-reduced-motion
media feature. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled.