Introduction to Bootsrap
Tags: bootstrap, webdev, frontend
Published: 2024-07-03 11:52:40

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](https://w3techs.com/technologies/overview/css_framework).

This series is dedicated to Bootstrap v5.3.

## Table of contents

1. [Installation](#installation)
2. [Global style](#global-style)
3. [Bootstrap variables](#bootstrap-variables)

## Installation

There are three ways to start building projects with Bootstrap:
- Install via package manager: `npm install bootstrap`
and then set link for needed CSS Bootstrap file in html:
```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:
```javascript
const bootstrap = require('bootstrap');
```
However, we should remember that Bootstrap Javascript unlike CSS is [not fully compatible with JavaScript frameworks](https://getbootstrap.com/docs/5.3/getting-started/javascript/#usage-with-javascript-frameworks).
- Include cdn Bootstrap link in html file:
```html
<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/](https://getbootstrap.com/)

### Installation in React project with a module bundler

According to [Usage with JavaScript frameworks](https://getbootstrap.com/docs/5.3/getting-started/javascript/#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.

```bash
npm i react-bootstrap bootstrap
```
Also, we need library Sass to bundle Bootstrap's CSS:
```bash
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`:
```javascript
// Bootstrap CSS
import "bootstrap/dist/css/bootstrap.min.css";
```

As for `react-bootstrap`, we should just import components like:

```javascript
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-family` is set to system font stack;
- all heading elements don't have `margin-top` and `margin-bottom: .5rem`;
- paragraph elements don't have `margin-top` either and `margin-bottom: 1rem`;
- links change color on `:hover`, but don't on `:visisted`;
- horizontal rules `<hr>` have `opacity: .25`;
- all lists don't have `margin-top`, 'padding-left' and have `margin-bottom: 1rem`;
- `<textarea>` is resizable only vertically;
- `<button>` has `cursor: pointer` if 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](https://getbootstrap.com/docs/5.3/customize/css-variables/#root-variables)