Bootstrap and React-Bootstrap

Bootstrap is a popular open-source front-end framework used to design responsive and mobile-first websites and web applications. It provides a collection of CSS and JavaScript components, like grids, buttons, forms, navigation bars, and more, that make it easier to create consistent and visually appealing user interfaces. Bootstrap simplifies the process of building websites by offering pre-built components and a grid system, which can be easily customized.

Bootstrap is designed to be responsive, meaning that the layout and components adapt to different screen sizes and devices. This is achieved through a fluid grid system and responsive utility classes that allow developers to hide, show, or resize elements depending on the screen size.

Bootstrap includes a wide range of utility classes that allow for quick and easy styling of elements. These classes cover a variety of tasks, such as spacing, text alignment, visibility, and more, allowing developers to apply styles without writing custom CSS.

Bootstrap grid system

The grid system in Bootstrap is a powerful and flexible layout system designed to help developers create complex, responsive layouts with ease. It is based on a 12-column layout that can be customized to fit various screen sizes and devices. By using a combination of rows, columns, and predefined classes, you can control the layout of your content across different screen widths.

Key Concepts of the Bootstrap Grid System

  1. Containers:
    • Containers are used to wrap the grid system and provide padding and alignment. Bootstrap offers two types of containers:
      • .container: A responsive fixed-width container that adapts to the screen size.
      • .container-fluid: A full-width container that spans the entire width of the viewport.
  2. Rows:
    • Rows are horizontal groups of columns that ensure proper alignment and spacing. They are created using the .row class. Rows must be placed inside a container.
  3. Columns:
    • Columns are the building blocks of the grid system. They are placed inside rows and use classes like .col-, .col-sm-, .col-md-, .col-lg-, and .col-xl- to define their width relative to the 12-column grid. The classes are suffixed with a number (1–12) to specify the number of columns the element should span.
  4. Breakpoints:
    • Bootstrap’s grid system is responsive and uses breakpoints to determine the layout on different screen sizes. The available breakpoints are:
      • xs (extra small): <576px (No suffix required, uses .col-)
      • sm (small): ≥576px
      • md (medium): ≥768px
      • lg (large): ≥992px
      • xl (extra large): ≥1200px
      • xxl (extra extra large): ≥1400px
    • You can combine different column classes to create layouts that adjust based on the screen size.

How the Grid System Works

  • The grid system divides the screen into 12 equal columns. Each column can be used to define a portion of the width that an element should occupy.
  • By combining columns within a row, you can create complex layouts. The columns within a row should add up to 12 or less. If they exceed 12, the excess columns will wrap to a new line.
<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4">Column 1</div>
    <div class="col-12 col-sm-6 col-md-4">Column 2</div>
    <div class="col-12 col-md-4">Column 3</div>
  </div>
</div>

Explanation:

  • This example demonstrates how columns can adjust based on screen size:
    • On extra small screens (xs), each column takes up the full width (col-12).
    • On small screens (sm), the first two columns take up half the width each (col-sm-6), while the third column continues to take up the full width (col-12).
    • On medium screens (md) and larger, each column takes up one-third of the width (col-md-4).

Installing Bootstrap via npm

This method allows for better control and easier integration into your build process.

npm install bootstrap

Import Bootstrap CSS in your src/index.js or src/App.js:

import 'bootstrap/dist/css/bootstrap.min.css';

You can now use Bootstrap classes in your React components.

import React from 'react';

function App() {
  return (
    <div className="container">
      <h1 className="text-center mt-5">Hello, Bootstrap!</h1>
      <button className="btn btn-primary">Click Me</button>
    </div>
  );
}

export default App;

Some popular and useful classes in Bootstrap

Buttons

  • .btn: The base class for buttons.
  • .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark: These classes style buttons with different colors to indicate various actions or statuses.
  • .btn-outline-*: Creates an outline button with a transparent background and a colored border.
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-outline-secondary">Outline Button</button>

Typography

  • .h1 to .h6: Utility classes to apply heading styles without using actual <h1> to <h6> tags.
  • .lead: Makes the text stand out by giving it a larger font size and lighter weight.
  • .text-center, .text-right, .text-left: Aligns text to the center, right, or left.
<h1 class="h1">Heading with .h1 class</h1>
<p class="lead">This is a lead paragraph.</p>
<p class="text-center">This text is centered.</p>

Cards

  • .card: The base class for creating a card component, a flexible content container.
  • .card-body: Wraps the card’s content (text, links, etc.).
  • .card-title, .card-text, .card-link: Used for styling the card’s title, text, and links respectively.
  • .card-img-top: Styles an image at the top of the card.
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="image.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="card-link">Card link</a>
  </div>
</div>

Modals

  • .modal: The base class for creating a modal (dialog box).
  • .modal-dialog, .modal-content, .modal-header, .modal-body, .modal-footer: Classes used to structure the modal content.
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Alerts

  • .alert: The base class for alert messages.
  • .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, .alert-dark: Classes that style alerts in different colors based on the type of message.
  • .alert-dismissible: Allows alerts to be dismissed (closed) by the user.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> This is a warning alert.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Other popular CSS frameworks

MUI (Material UI)

Semantic UI

Tailwind

shadcn/ui

Scroll to Top