Introduction

I think all frontend developers have faced the dilemma of choosing the right CSS framework for their next project. Currently, there are numerous approaches to CSS styling, ranging from writing plain CSS to advanced frameworks such as Tailwind CSS, Material UI, and more. In fact, there are so many options available that it can be quite overwhelming to determine the best tool for your upcoming project.

I believe that each framework has its own strengths and is well-suited for particular use cases. That's why I'm embarking on this journey to tell you about the best CSS frameworks that you should definitely consider when building a React app. Instead of reviewing the entire documentation for each framework, I will focus on highlighting the key features that set them apart from the rest. Finally, I'll share my personal opinion, based on my experience, regarding when to use each specific framework.

We'll begin this series with React Bootstrap, a potent library that I have already mentioned in my previous blog posts.

What is React Bootstrap?

Bootstrap is one of the most widely-used CSS frameworks available today. It provides developers with a comprehensive collection of pre-defined classes. This consistent design language allows to create aesthetically pleasing web pages with minimal effort.

React Bootstrap is a specialized library that re-implements all of the Bootstrap functionality using React by condensing the original Bootstrap styling into React-styled components. It offers a wide range of pre-made components that allow building visually pleasing web applications while reaping the benefits of the React ecosystem.

Pre-Designed Components

One of the major advantages of React Bootstrap is its wide range of available components. The library contains dozens of pre-made components that you can easily use in your app right out of the box without worrying about styling. Time is precious, and nobody enjoys investing it in building website components from scratch.

Let me convince you by examining a few examples:

• Navigation bar

Isn't it impressive? It's simple, smooth, and adapts perfectly to any screen. Here's all the code required to recreate this navbar:

function App() {
  return (
    <Navbar expand="lg" variant="dark" bg="dark">
      <Container>
        <Navbar.Brand href="#">Brand</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#">Home</Nav.Link>
            <Nav.Link href="#">Settings</Nav.Link>
            <NavDropdown title="More" id="basic-nav-dropdown">
              <NavDropdown.Item href="#">Something</NavDropdown.Item>
              <NavDropdown.Item href="#">Something</NavDropdown.Item>
              <NavDropdown.Item href="#">Something</NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}

• Buttons

React Bootstrap offers a variety of button styles in seven different colors, allowing you to choose the one that best suits your needs with just a single line of code!

<Button size="lg" variant="primary">
    Button 1
</Button>
<Button size="sm" variant="outline-danger">
    Button 2
</Button>

Let's go through one more example together, just to make sure you're completely confident in how simple this process is 😃

• Forms

React Bootstrap has made handling form design incredibly easy as well! Take a look at this example of a form featuring a variety of input fields with different input types, and notice its responsiveness:

The code snippet for this form is provided below. There is no additional CSS styling required whatsoever! This saves a significant amount of time by eliminating the need to write dozens of CSS classes for a single form.

<Form>
    <Form.Group className="mb-3">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
    </Form.Group>
     <Row className="mb-3">
         <Form.Group as={Col}>
            <Form.Label>First name</Form.Label>
            <Form.Control type="text" placeholder="Enter first name" />
        </Form.Group>
        <Form.Group as={Col}>
            <Form.Label>Last name</Form.Label>
            <Form.Control type="text" placeholder="Enter last name" />
        </Form.Group>
     </Row>
     <Form.Select className="mb-3">
         <option>Select your country</option>
         <option value="1">UK</option>
         <option value="2">US</option>
         <option value="3">Canada</option>
     </Form.Select>
     <Form.Group className="mb-3">
         <Form.Label>Upload your picture</Form.Label>
         <Form.Control type="file" />
     </Form.Group>
     <Button type="submit" variant="outline-dark">
        Submit
     </Button>
</Form>

We just had a quick look at some components made using React Bootstrap. There's a whole lot more to discover in their docs, but one thing's for sure - it's a real time-saver since we don't have to write as much styling.

Layout System

Bootstrap's layout system is based on the combination of containers, rows, and columns that resemble its flexible grid system.

You can think of the container as a block that aligns the content contained within it. Then each row can be divided into 12 columns, and elements are placed within these columns. The benefit of this system is that the developers have the flexibility to create different column configurations for various screen sizes.

In the following example, I am creating a Container component that contains two rows. Each row is divided into columns, within which I have placed div elements with different background colors. The first row consists of four columns, while the second row has two columns. Take note of how Bootstrap automatically manages the spacing of these components on the screen without requiring any CSS, all the while keeping them within a padded container!

The code for the provided demonstration is as follows:

function App() {
  return (
    <Container>
      <Row>
        <Col>
          <div className="bg-info" />
        </Col>
        <Col>
          <div className="bg-success" />
        </Col>
        <Col>
          <div className="bg-dark" />
        </Col>
        <Col>
          <div className="bg-warning" />
        </Col>
      </Row>
      <Row>
        <Col>
          <div className="bg-danger" />
        </Col>
        <Col>
          <div className="bg-primary" />
        </Col>
      </Row>
    </Container>
  );
}

Responsiveness

One of Bootstrap's powerful features is its mobile-first development approach, meaning it prioritizes responsive design and ensures that your website functions well on smaller screens. As a result, components created with Bootstrap, like buttons and cards, are fully responsive and display neatly on devices of any screen size.

To give developers more control over the website's responsiveness, Bootstrap introduces the concept of breakpoints. These are adjustable widths that control how your website layout changes on different screen sizes. If you're familiar with the concept of media queries in vanilla CSS, the breakpoints in Bootstrap function similarly to media queries that use the min-width expression.

The table below, sourced from the Bootstrap documentation, outlines the six default breakpoints in Bootstrap:

So, by assigning specific breakpoints to different components in React Bootstrap, I can change their appearance for various devices. Now, let's return to our previous example involving the grid system. By making minor adjustments to my code, I can control how different colors are displayed.

In the code below, you can see that I changed the space occupied by some of the columns by using the xs, md, and lg props on the Col component. The first two columns in the first row will occupy different fractions of the screen for xs (576px and less) and md (768px and more) breakpoints. Simultaneously, I modified the space taken by the first column in the second row for xs (576px and less) and lg (992px and more) breakpoints.

function App() {
  return (
    <Container>
      <Row>
        {/* 768px and less - 50% of space */}
        {/* 768px and more - ~33% of space */}
        <Col xs={6} md={4}>
          <div className="bg-info" />
        </Col>
        {/* 768px and less - ~33% of space */}
        {/* 768px and more - 50% of space */}
        <Col xs={4} md={6}>
          <div className="bg-success" />
        </Col>
        <Col>
          <div className="bg-dark" />
        </Col>
        <Col>
          <div className="bg-warning" />
        </Col>
      </Row>
      <Row>
        {/* 992px and less - ~33% of space */}
        {/* 992px and more - ~83% of space */}
        <Col xs={8} lg={10}>
          <div className="bg-danger" />
        </Col>
        <Col>
          <div className="bg-primary" />
        </Col>
      </Row>
    </Container>
  );
}

To give you a more practical example, here's a slightly more advanced instance featuring a sidebar and a grid of cards that adjust the amount of space they occupy as the screen size decreases:

Downsides of React Bootstrap

Although this article primarily focuses on the advantages of React Bootstrap, the downsides are still worth mentioning. This will help you make an informed decision about which CSS framework to use in different scenarios.

Think about these downsides:

• Websites created with Bootstrap tend to look similar. Due to the abundance of pre-made components and a predictable layout system, it can be challenging for Bootstrap websites to stand out from the rest. As a result, you'll need to put in extra effort to make your website unique using Bootstrap, to the point where it might be more reasonable to switch to another framework.

• Mastering Bootstrap has a learning curve despite its relative ease of use. I suggest adopting a hands-on approach, which means not attempting to learn everything at once, but rather keeping the documentation open while you're working on a project. This practical approach is the most efficient way to learn.

I usually prefer using React Bootstrap for my smaller projects, particularly those focused on learning features unrelated to styling. It enables me to swiftly improve my website's design by using pre-defined components from React Bootstrap. In this way, I can achieve an attractive appearance for my web application without spending an excessive amount of time on manual styling.

Conclusion

As I publish more blog posts related to the subject of CSS frameworks, you will gain a clearer understanding of which styling option to select when constructing any web page or application.

After this brief tutorial, I hope you can see why and, most importantly, when to use React Bootstrap. This CSS framework is incredibly powerful, as it allows you to achieve a polished look for your web application without dedicating an excessive amount of time to manual styling. However, it's important to realize that, like any tool, it comes with trade-offs.

If you have any questions or need assistance, don't hesitate to reach out to me. Feel free to contact me, even if it's not related to this topic 😃

As usual, if you enjoyed this article, remember to follow me on Twitter, where I share daily updates. And feel free to connect with me on LinkedIn.