DEV Community

loading...
Cover image for Integrate Bootstrap in your React Projects with these 2 libraries

Integrate Bootstrap in your React Projects with these 2 libraries

asayerio_techblog profile image Asayer Tech Blog Originally published at blog.asayer.io ・7 min read

by author Nwose Lotanna

There are a lot of ways to build a web app, most people use popular JavaScript frameworks like React, Vue, and Angular who have a lot of support to easily scaffold, and follow best practices with respect to logic and how it ties to templates, file organization and building in components. A lot of developers have a hard time with CSS or just plainly do not have an eye for design, CSS frameworks come in handy to make sure you get great designs in your web apps.

What is Bootstrap?

Styling a web application just like adding logic to markup or template has also now evolved greatly over time. From layouts, shapes, interactions, animations, and typography to frameworks, pre and post-processors, methodologies, and even CSS-in-JS.
Bootstrap is the most used, most popular, and arguably the most advanced CSS framework that currently exists. It is the most responsive, accessible mobile-first, and easy-to-use user interface toolkit that does not just cater to styles but also to the logic of your web app.

Why use Bootstrap in React

Bootstrap as a toolkit is compatible with React, so this means all the great things about Bootstrap can be brought into a React app. For a React developer here are a few more reasons to use Bootstrap in your project asides from making your life easier:

  • The layout in Bootstrap is one of the most advanced yet responsive I have seen, the styles though customizable adjust to all types of screens starting from mobile, to tablets to desktops.
  • Bootstrap has one of the biggest communities, it makes sense seeing it has the most users. This is a great thing as it means that there are more Bootstrap resources than any other CSS toolkit currently existing. It is also quite easy to get started (more on that later).
  • Finally, the docs are easy to use with practical examples and illustrations. The docs style Bootstrap uses has now been adopted by almost all other CSS frameworks in their docs. ## Using Bootstrap with React

Now that you are convinced, you can bring Bootstrap into your React project in a lot of ways:

  1. Use a package manager like NPM to install a compiled version of the CSS and JS files.

Install Bootstrap in the source file of your React projects with the npm package:

    npm install bootstrap@next
Enter fullscreen mode Exit fullscreen mode

You can then add the line below

    import bootstrap from 'bootstrap' 
Enter fullscreen mode Exit fullscreen mode

in your import statements for the component that you want to use Bootstrap in.

  1. Use a plug-and-play CDN, Bootstrap recommends jsDelivr You can skip downloads and go straight with jsDelivr to get a cached version of Bootstrap’s compiled CSS and JS to your project.
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
Enter fullscreen mode Exit fullscreen mode

If you want to add Popper before our JS, through the CDN, use this instead.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
Enter fullscreen mode Exit fullscreen mode
  1. Using a third party library There are libraries that exist that put together React and Bootstrap in such a way that leverages the best of both. The two we will focus on in this post are Reactstrap and React Bootstrap.

What is Reactstrap?

With over 9,000 stars on the project on GitHub, Reactstrap provides a stateless and simple React components support for Bootstrap 4. It is easy to use with good documentation, that way there is no learning curve. It does not depend on jQuery or the JavScript that ships with Bootstrap only popper through the React popper package.

Getting started
All you need to do to get started is to install Reactstrap in your React project like this:

    npm install --save reactstrap react react-dom
Enter fullscreen mode Exit fullscreen mode

How it is used
Now that you have installed Reactstrap, in any new component you create, import the Reactstrap and it works right out of the box! See a button implementation below:

    import React from 'react';
    import { Button } from 'reactstrap';

    const Example = (props) => {
      return (
        <div>
          <Button color="primary">primary</Button>{' '}
          <Button color="secondary">secondary</Button>{' '}
          <Button color="success">success</Button>{' '}
          <Button color="info">info</Button>{' '}
          <Button color="warning">warning</Button>{' '}
          <Button color="danger">danger</Button>{' '}
          <Button color="link">link</Button>
        </div>
      );
    }

    export default Example;
Enter fullscreen mode Exit fullscreen mode

Buttons with Reactstrap

A few other things you need to know while using Reactstrap:

1) Your content is expected to be composed via props.children rather than using named props to pass in Components. Here is a sample of how both techniques look using a tooltip content in a tooltip component, you can see how clean it is with the child nodes.

    // Content passed in via props
    const Example = (props) => {
      return (
        <p>This is a tooltip <TooltipTrigger `tooltip={props.TooltipContent}’ >example</TooltipTrigger>!</p>
      );
    }
    // Content passed in as children (Preferred)
    const PreferredExample = (props) => {
      return (
        <p>
          This is a <a href="#" id="TooltipExample">tooltip</a> example.
          <Tooltip target="TooltipExample">
            <TooltipContent/>
          </Tooltip>
        </p>
      );
    }
Enter fullscreen mode Exit fullscreen mode

2) Attributes in this library are used to pass in-state, conveniently apply modifier classes, enable advanced functionality (like PopperJS), or automatically include non-content based elements.
Here is the list of attributes you can use:

isOpen - current state for items like dropdown, popover, tooltip
toggle - callback for toggling isOpen in the controlling component
color - applies color classes, ex: <Button color="danger"/>
size for controlling size classes. ex: <Button size="sm"/>
tag - customize the component output by passing in an element name or Component
Enter fullscreen mode Exit fullscreen mode

See how the “isOpen” and “toggle” attributes are used to do checks on a dropdown component.

    import React, { useState } from 'react';
    import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

    const Example = (props) => {
      const [dropdownOpen, setDropdownOpen] = useState(false);

      const toggle = () => setDropdownOpen(prevState => !prevState);

      return (
        <Dropdown isOpen={dropdownOpen} toggle={toggle}>
          <DropdownToggle caret>
            Dropdown
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header>Header</DropdownItem>
            <DropdownItem>Some Action</DropdownItem>
            <DropdownItem text>Dropdown Item Text</DropdownItem>
            <DropdownItem disabled>Action (disabled)</DropdownItem>
            <DropdownItem divider />
            <DropdownItem>Foo Action</DropdownItem>
            <DropdownItem>Bar Action</DropdownItem>
            <DropdownItem>Quo Action</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      );
    }
Enter fullscreen mode Exit fullscreen mode

What is React Bootstrap?

React bootstrap is a library that you can use React (with the state) in a comfortable Bootstrap environment. In my opinion, React bootstrap lets you stretch the power of React inside Bootstrap. All Bootstrap components were re-imagined, the classes are now templates in React with custom options that you can easily pick up with the docs.

The documentation is designed in a Bootstrap-like way and this helps with the feeling of familiarity. It is also significantly less code than using Bootstrap itself.

Getting started
Just like Reactstrap you install the library with your package manager with the command below:

    npm install react-bootstrap bootstrap
Enter fullscreen mode Exit fullscreen mode

Notice that a bootstrap package is required here during installation.

How it is used
To use a component, you would just import that particular component inside your new React component file. Here is a button implementation just like the one we did with Reactstrap:

    import React from 'react';
    import Button from 'react-bootstrap/Button';

    const Example = (props) => {
      return (
        <>
      <div className="mb-2">
        <Button variant="primary" size="lg">
          Large button
        </Button>{' '}
        <Button variant="secondary" size="lg">
          Large button
        </Button>
      </div>
      <div>
        <Button variant="primary" size="sm">
          Small button
        </Button>{' '}
        <Button variant="secondary" size="sm">
          Small button
        </Button>
      </div>
    </>
      );
    }

    export default Example;
Enter fullscreen mode Exit fullscreen mode

You can immediately tell that this goes into a template section of a React component, the support is seamless too, the newest React version is supported. You can see this button example above as fragments.

Buttons created with React Bootstrap

Which one should I use?

The two libraries are great to use and you can choose any of them, however, my suggestions are:

  • Use Reactstrap if you are coming from a beginner-level and already know your way around using Bootstrap (or any CSS framework), the docs feel more familiar.
  • Use Reactstrap if you are concerned about file and bundle size, you import Bootstrap in React bootstrap so that means Reactstrap will be smaller in size.
  • Use React Bootstrap if you are coming from a heavy React background and have not used Bootstrap before, it feels more comfortable for people in this demographic.
  • Use React bootstrap if you are looking to use and manipulate state in your React template.

Observability for Production React Apps

Whether you go with Reacstrap or React Boostrap, truth is that debugging React apps in production may be challenging and time consuming. Asayer is a frontend monitoring tool that replays everything your users do and shows how your app behaves and renders for every issue. It’s like having your browser’s inspector open while looking over your user’s shoulder.

Asayer Frontend Monitoring

Asayer helps to quickly get to the root cause by reproducing issues as if they happened in your own browser. It also monitors your frontend performance by capturing key metrics such as page load time, memory consumption and slow network requests.

With Asayer, you can enjoy debugging modern frontend apps - Start monitoring your web app for free.

Conclusion

Now we have gone through to use Bootstrap in our React projects, we have seen why this might interest you and all the possible ways to go about it. We also took some time to look into two React and Bootstrap libraries and which one fits best for any background and skill level. Which of the two have you tried out?

Discussion (0)

pic
Editor guide