DEV Community

Julia Shlykova
Julia Shlykova

Posted on

Introduction to Bootsrap

#bootstrap #webdev #frontend

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

  1. Installation
  2. Global style
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Also, we need library Sass to bundle Bootstrap's CSS:

npm i -D sass
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Read next

ngoantr profile image

opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ]

Ann -

hanna_fischer_69a29e3a4c4 profile image

5 Schritte zum Scraping mehrerer Bilder mit Python

hanna Fischer -

imsushant12 profile image

Scaling Node.js Applications: Strategies and Best Practices

Sushant Gaurav -

dperrymorrow profile image

A Simple, mostly CSS code editor

David Morrow -