Introduction to Bootsrap

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.

Installation
Global style
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:

<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-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

Blog

Introduction to Bootsrap

Julia Shlykova

Table of contents

Installation

Installation in React project with a module bundler

Global style

Bootstrap variables

Join Our Newsletter. No Spam, Only the good stuff.

Related