What is Bootstrap? If you haven't heard about CSS frameworks, then imagine that you don't have to create styles with CSS, you just use already existing classes and there is no need to puzzle over responsive design. It will certainly facilitate and accelerate development of the webpage. Alongside with Bootstrap there are various other CSS frameworks like Tailwind, Bulma, Foundation, but Bootstrap is a leader of them according to statistics.
This series is dedicated to Bootstrap v5.3.
Table of contents
Installation
There are three ways to start building projects with Bootstrap:
- Install via package manager:
npm install bootstrapand then set link for needed CSS Bootstrap file in html:
<head>
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
The difference between bootstrap.min.css and bootstrap.css is that original version is more readable while minified one's size is less since all whitespace and other extra characters are removed.
If you want to use Boostrap Javascript, you should include it in script file:
const bootstrap = require('bootstrap');
However, we should remember that Bootstrap Javascript unlike CSS is not fully compatible with JavaScript frameworks.
- Include cdn Bootstrap link in html file:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
- Download the source code from https://getbootstrap.com/
Installation in React project with a module bundler
According to Usage with JavaScript frameworks Bootstrap JavaScript is not fully compatible with React: "Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position". Thus, it's better to use a framework-specific package instead of the Bootstrap JavaScript.
npm i react-bootstrap bootstrap
Also, we need library Sass to bundle Bootstrap's CSS:
npm i -D sass
Then, we should import Bootstrap CSS library in root module. For example, if the project built with Vite, it's src/main.jsx:
// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
As for react-bootstrap, we should just import components like:
import Button from 'react-bootstrap/Button';
// or less ideally
import { Button } from 'react-bootstrap';
Global style
Bootstrap's global style has tendency towards normalization of cross browser styles. Some important style to mention:
-
box-sizing: border-box- this allows to include padding and border size into element width; -
font-familyis set to system font stack; - all heading elements don't have
margin-topandmargin-bottom: .5rem; - paragraph elements don't have
margin-topeither andmargin-bottom: 1rem; - links change color on
:hover, but don't on:visisted; - horizontal rules
<hr>haveopacity: .25; - all lists don't have
margin-top, 'padding-left' and havemargin-bottom: 1rem; -
<textarea>is resizable only vertically; -
<button>hascursor: pointerif not disabled.
Bootstrap variables
Bootstrap sets some CSS variables, which we can use. All Bootstrap variables are prefixed with bs- to avoid conflicts with other style. To see a list of root variables to use visit https://getbootstrap.com/docs/5.3/customize/css-variables/#root-variables
Top comments (0)