Bootstrap and React Bootstrap#

To download the demo code for this lecture, run:

$ dmget wb-bootstrap --demo

Then install the dependencies and run the dev server:

$ npm install
$ npm run dev

Intro#

Goals#

Introduce CSS Frameworks and Bootstrap
Learn how to use ReactBootstrap to get Bootstrap features in React

CSS Frameworks#

CSS frameworks usually provide:

A grid system for laying out responsive pages of content
CSS for UI components like buttons, navbars
CSS for accessibility like screen-reader-only styles

Why Use a CSS Framework?#

Writing CSS to make responsive pages that are compatible for all devices and browsers is hard!
Why rebuild the wheel when the work has already been done for you?
It’s easy to make your site look different by adding custom CSS

Bootstrap#

Bootstrap was the first major, open-source CSS framework
Many CSS frameworks and libraries are inspired by Bootstrap
The prime example of a site built with Bootstrap is Bootstrap!
The documentation is excellent and comprehensive.

Bootstrap Examples#

Newsweek

El Paso Plaza

ReactBootstrap#

ReactBootstrap is an implementation of Bootstrap using React components
Besides CSS, ReactBootstrap also has interactive UI components that fit seamlessly with React
Standard Bootstrap’s CSS classes can also be used with React, but using ReactBootstrap can make your code more customizable and scalable

Installing and loading ReactBootstrap#

To install the ReactBootstrap components and stylesheet:
```
$ npm install react-bootstrap bootstrap
```

Then, import the stylesheet in main.jsx:

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

Interactive ReactBootstrap components need to be imported separately (we’ll get to those later!)

The Grid System#

Good things come in 12’s#

Bootstrap and ReactBootstrap use a 12-unit grid system for laying out responsive webpages

Grid System

Fixed-width containers#

All ReactBootstrap layout needs to be inside a container. (Remember to import Container!)

import Container from 'react-bootstrap/Container';

function ContainerExample() {
  return (
    <Container>
      {/* Rest of layout goes here */}
    </Container>
  );
}

By default, containers have whitespace on the left and right to center page content.

Fixed Width Container

Full-width containers#

To get rid of whitespace and have content take up full width, use a fluid Container instead:

import Container from 'react-bootstrap/Container';

function ContainerFluidExample() {
  return (
    <Container fluid>
      {/* Rest of layout goes here */}
    </Container>
  );
}

Rows and Columns#

A container can contain rows and columns. Columns go inside of rows. Content goes inside the columns.

By default, columns in the same row will have equal width.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function ContainerFluidExample() {
  return (
    <Container fluid>
      <Row>
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
      </Row>
      <Row>
        <Col>1 of 1</Col>
      </Row>
    </Container>
  );
}

Differently-sized columns#

You can make differently sized columns by specifying widths using the 12-unit grid.
So a 6-unit column will take up half the row, a 3-unit column will be 25%, etc.
To specify a column width, use the xs prop.
- This actually stands for “extra small screen size”, but it will actually apply to all screen sizes (extra small and bigger)

src/Components/ColumnSizingExample.jsx#

export default function ColumnSizingExample() {
  return (
    <Container fluid>
      <Row>
        <Col xs="9">Column width 9</Col>
        <Col xs="3">Column width 3</Col>
      </Row>
      <Row>
        <Col>Column</Col>
        <Col xs="6">Column width 6</Col>
        <Col>Column</Col>
      </Row>
    </Container>
  );
}

Responsive Design#

Responsive Columns#

Bootstrap’s grid system allows you to change your site’s layout based on a user’s screen size.

Size	Screen width (px)	Example
xl (x-large)	≥ 1200 px	large desktops/laptops
lg (large)	992 ≤ px < 1200	desktops/laptops
md (medium)	768 ≤ px < 992	tablets
sm (small)	576 ≤ px < 768	phones in landscape mode
xs (x-small)	px < 576	phones in portrait mode

Use xs if you want the column width to apply to all screens.

Widths for a given screen size are also automatically applied to larger screen sizes, unless overridden.

function SidebarExample() {
  return (
    <Container fluid>
      <Row>
        <Col xs='12'>Sidebar</Col>
        <Col xs='12'>Main Content</Col>
      </Row>
    </Container>
  );
}

Let’s adjust the layout so that it uses space more effectively for medium screens and bigger.

export default function ResponsiveSidebarExample() {
  return (
    <Container fluid>
      <Row>
        <Col xs="12" md="6" lg="3">
          Sidebar
        </Col>
        <Col xs="12" md="6" lg="9">
          Main Content
        </Col>
      </Row>
    </Container>
  );
}

Now, columns will be size 12 if the screen is less than medium width (768 px), and size 6 for medium screens.
For large screens, the sidebar will be size 3.

Breakpoints

The screen sizes (xs, sm, etc) are sometimes called breakpoints, because they are the points where the column sizing changes.

Offset and Order#

Rather than just specifying a number for the column size, you can also use an object.

<Col xs={'span': 6, 'offset': 3, 'order': 1}>Column</Col>

The column size becomes the value of 'span'.

This allows you to specify offsets and ordering effects for each column.

Offset#

Offset is a way to move columns to the right by x units.

src/Components/OffsetExample.jsx#

export default function OffsetExample() {
  return (
    <Container fluid>
      <Row>
        <Col className="no-border" xs={{ span: 5, offset: 7 }}>
          <img src="../../img/puppy.png" />
        </Col>
      </Row>
      <Row>
        <Col className="no-border" xs="12">
          <h1>Offset Puppy</h1>
          Puppy ipsum dolor sit good dog window paws...
        </Col>
      </Row>
    </Container>
  );
}

Customizing Order#

Normally, sections that are on top of one another on a small screen:

Stacked

Will move to a left-to-right order on a larger screen:

Left to Right

But what if we want this on a phone:

Stacked

and this on a monitor:

Reversed

To get this effect, we can customize the order:

src/Components/OrderExample.jsx#

export default function OrderExample() {
  return (
    <Container fluid>
      <Row>
        <Col xs="12" md={{ span: 3, order: 2 }}>
          <h1>Table of Contents</h1>
          <p>On top for small screens. Appears last (on the right) for medium screens.</p>
        </Col>
        <Col xs="12" md={{ span: 9, order: 1 }}>
          <h1>Article</h1>
          <p>On the bottom for small screens. Appears first (on the left) for medium screens.</p>
        </Col>
      </Row>
    </Container>
  );
}

ReactBootstrap Components#

Besides CSS and layout, ReactBootstrap also has many interactive UI components that you can use.

Nav Bars#

ReactBootstrap has a powerful navbar component.

You can put images, buttons, forms, links, and non-nav text in the navbar.
You can also fix the navbar to the top or allow it to scroll away.
The docs are pretty thorough and the example code is very helpful.

Other ReactBootstrap Components#

Modal Windows

Modal windows are a clean, design-friendly way to include more information without cluttering the interface. Common uses include log-in/log-out windows, forms, extra information, and anything else that you want to show a user without navigating them to a new page.
Carousels

A slideshow component for cycling through elements (e.g. images or slides of text) like a carousel.
Forms

Default HTML forms don’t look great. Bootstrap form components provide styling and the grid system can be used to adjust alignment and layout of forms
Dropdowns

Like HTML dropdowns, but with better styling.
Tables

Upgrade HTML tables with styling (such as striped tables) and increased responsiveness.

Bootstrap Icons#

Bootstrap Icons have 1000+ free and high quality icons

To install, run npm install bootstrap-icons

To import:

import "bootstrap-icons/font/bootstrap-icons.css";

src/Components/IconsExample.jsx#

import 'bootstrap-icons/font/bootstrap-icons.css';

export default function IconsExample() {
  return (
    <>
      <div>
        <i className="bi bi-heart-fill"></i>
      </div>
      <div>
        <i className="bi bi-film"></i>
      </div>

      <p>You can add color</p>
      <i className="bi bi-heart-fill" style={{ fontSize: '2rem', color: 'pink' }}></i>
      <h3>You can make the icon bigger</h3>
      <i className="bi bi-heart-fill" style={{ fontSize: '10rem', color: 'greenyellow' }}></i>
    </>
  );
}

For a more detailed explanation on how this works, check out the documentation

Documentation#

ReactBootstrap Docs

Also keep in mind that all of the vanilla Bootstrap CSS classes are available in ReactBootstrap.

So check out the vanilla Bootstrap docs for additional styling options such as preset borders, color schemes, utilities for accessibility, and more.