Incorporating Bootstrap CSS Framework into Your React.js Project

Bootstrap Library

Bootstrap, the most widely used CSS framework among web developers, finds its application in numerous websites, including those built using the React.js JavaScript language.

There are several ways to incorporate the Bootstrap library into React.js web projects. Let's explore these methods:

1. Directly include the Bootstrap CSS library file or URL in your React project.

   Start by installing Bootstrap as a dependency in your React.js library. You can use npm or yarn to install Bootstrap. Open your terminal or command prompt and run the following command:

   npm install bootstrap

   This will install Bootstrap and its dependencies in your project.

   Next, in your React.js library, you need to import the Bootstrap CSS file so that it gets included in your project. You can do this in your main entry file, such as index.js or App.js. Import the Bootstrap CSS file using one of the following methods:

   a. Importing the Bootstrap CSS file from the node_modules directory:

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

   b. Importing the Bootstrap CSS file from a URL:

   import 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'
   

   Here's an example of using Bootstrap classes on React.js JSX components:

   import React from 'react'
   
   function MyComponent() {
     return (
       <div className="container">
         <h1 className="text-center">Hello, Bootstrap!</h1>
         <div className="row">
           <div className="col-md-6">
             <p className="text-primary">This is a Bootstrap column.</p>
             <button className="btn btn-primary">Click Me</button>
           </div>
           <div className="col-md-6">
             <p className="text-danger">Another Bootstrap column.</p>
             <button className="btn btn-danger">Click Me</button>
           </div>
         </div>
       </div>
     )
   }
   
   export default MyComponent
   

   Choose the method that best suits your requirements, whether it's including the Bootstrap CSS file directly or using a URL. Ensure to adjust the version number or URL according to the specific version or source you want to utilize. Additionally, if you have custom CSS assets that you wish to integrate, you can seamlessly incorporate them alongside the Bootstrap CSS.

2. Include the Bootstrap SCSS library from the node_modules package.

   SCSS (Sassy CSS) is a popular preprocessor that extends the capabilities of traditional CSS, empowering developers to create more efficient and maintainable styles. One of its standout features is the enhanced support for pseudo-elements ::before and ::after. In the upcoming sections, let's dive into the fascinating world of SCSS and discover how we can harness its potential to style and manipulate the ::before and ::after pseudo-elements. For more insights into SCSS functionality with CSS Pseudo elements, check out our other post here.

   If you prefer working with SCSS/SASS, Next.js offers SASS node modules that can be seamlessly integrated into your project. You have the flexibility to organize your SCSS assets directly within the Next.js root directory, making it convenient to manage and style your project using SCSS/SASS.

   Install Bootstrap: Start by installing Bootstrap as a dependency in your React.js library. Use npm or yarn to install Bootstrap. Open your terminal or command prompt and run the following command:

   npm install bootstrap

   This will install Bootstrap and its dependencies in your project.

   Set up SCSS: Next, you need to set up SCSS support in your React.js library. This involves installing the necessary dependencies and configuring your build system to process SCSS files. You can use node-sass or any other SCSS compiler of your choice. Install node-sass by running the following command:

   npm install node-sass

   Create SCSS files: Create SCSS files for your custom styles. You can create a main SCSS file, such as styles.scss, where you can import the necessary Bootstrap SCSS files, including functions, variables, and mixins, to access their functionality. In addition, you can define your custom styles in this file. For example:

   // Import Bootstrap SCSS files
   @import '~bootstrap/scss/functions';
   @import '~bootstrap/scss/variables';
   @import '~bootstrap/scss/mixins';
   // ... import any other Bootstrap SCSS files you need
   
   // Define your custom styles here
   .custom-button {
     // Your custom button styles
     background-color: $primary; // Using Bootstrap's primary color variable
     padding: 10px;
     border: none;
     color: $white;
     cursor: pointer;
   
     &:hover {
       background-color: darken(
         $primary,
         10%
       ); // Darken the primary color on hover
     }
   }
   

   Import SCSS file: In your React.js library, import the SCSS file you created in your main entry file, such as index.js or App.js. Import the SCSS file using the following statement:

   import './styles.scss'
   

   This will import and include your SCSS file in your project.

   Start using Bootstrap and custom styles: With Bootstrap and your custom SCSS file included, you can start using Bootstrap classes, components, and your custom styles in your React.js library. Refer to the Bootstrap documentation to explore the available styles and components that you can leverage in your project. Use the custom styles defined in your SCSS file as needed. Read our blog posts on SCSS to enhance your familiarity with this powerful CSS preprocessor. Explore here to learn about the benefits and fun aspects of using Sass, and dive into here to discover how to leverage SCSS functions, including for and each, for more efficient and dynamic styling capabilities.

   Using

Once you have completed these steps, you are all set to commence your React.js project with the integrated Bootstrap CSS library.

Bootstrap is a widely adopted CSS framework in website development. Its popularity ensures that developers can readily recognize and continue development when encountering a project built with Bootstrap.

React.js Bootstrap UI Library

Now, let's consider using other React.js UI libraries that encompass all the components and features of Bootstrap. These libraries provide pre-built, ready-to-use components derived from the Bootstrap CSS framework. Here are some notable React.js UI libraries based on Bootstrap:

When it comes to React.js, there are several libraries that utilize the Bootstrap CSS framework. Here, I'd like to highlight a couple of libraries that I have personally used in my past projects:

1. React Bootstrap: As the official React implementation of Bootstrap components, React-Bootstrap offers a comprehensive collection of pre-built UI components styled using Bootstrap. This library simplifies the integration of Bootstrap into your React projects.

2. Reactstrap: Reactstrap is another popular library that brings Bootstrap components to React. It provides a range of customizable components, including buttons, modals, navbars, and more. These components are built on top of Bootstrap, ensuring consistency and ease of use.

Read our other blog post where we discuss the integration of Bootstrap with Reactstrap and React Bootstrap in detail. You can find it here.

By opting for these libraries, you can leverage their comprehensive set of components, streamlining the development process.

Other React Libraries to Consider

Besides Bootstrap library, you might want to consider using other React UI libraries for your projects, such as Material UI and Mantine. These UI libraries are popular among developers, with a huge number of daily downloads, and are considered to be the most favorable UI frameworks.

Thank you for taking the time to read this post. Happy coding!

** All images and logos belong to their respective owners.