Creating a front-end interface can be challenging if you are new to ReactJS. The Bootstrap framework, alongside its templates, makes it easier and faster.

Bootstrap has themed templates that anyone can customize and publish for free. You can choose from many templates before downloading and using them in your app.

Templates help you to quickly create remarkable frontend interfaces, leaving more time to focus on complex features. You can learn about Bootstrap templates by integrating one with a ReactJS App.

Create Your React App

Start by creating a ReactJS App in a folder on your machine. Alternatively, you can follow the official React guide on creating a new app.

Download a Bootstrap Template

Download a template of your choice from the Start Bootstrap themes website or another of your preference. There are several sites with free Bootstrap templates online.

For this guide, download the Bootstrap theme named Agency.

bootstrap template

Once downloaded, unzip the folder file to see its contents. You will notice that you have folders named assets, CSS, JS, and a file named index.html.

Add Bootstrap Template to ReactJS App

Next, copy the contents of the downloaded folder into the folder named public in your React App. You will notice that now you have two index.html files. Copy the contents of the Bootstrap index.html file into the React App's index.html file.

interface of react app with bootstrap template

Display Bootstrap Template

After adding the Bootstrap HTML to the App's index.html, run the App to see if the integration was successful. Use the following command:

        npm start
    

You should see the template in your browser, as the following picture illustrates.

bootstrap template shows on react app

Integrate Bootstrap Theme Into the App Components

To integrate the Bootstrap template into the React App, you must copy the HTML sections from index.html to each component. Components allow you to write code for different parts of the App and reuse them. This reduces repetition and also organizes the structure of your App.

The index.html file now has different sections Navigation, About us, Contact, and Footer. In the src folder, create two folders, components, and pages. Divide the sections into the folders shown below:

The components should include the following:

  • Header.jsx: The masthead section.
  • Navigation.jsx: The Navigation bar and footer.

The pages' folder will have the following:

  • AboutUs.jsx: About us information.
  • Home.jsx: Services, Portfolio, Clients, and Team sections.
  • Contacts.jsx: Contact information.

Copy the HTML of each section from the index.html file and add it to each component. The syntax should look like so:

        import React from 'react'

const Header = () => {
    return (
      <div>
        <header className="masthead">
          <div className="container">
            <div className="masthead-subheading">Welcome To Our Studio!</div>

            <div className="masthead-heading text-uppercase">
              It's Nice To Meet You
            </div>

            <a className="btn btn-primary btn-xl text-uppercase" href="#services">
              Tell Me More
            </a>
          </div>
        </header>
      </div>
    );
};

export default Header

Next, change the syntax of the HTML in the components into JSX. To do this automatically on the Vscode editor click Ctrl + Shift + P. Click on HTML to JSX option on the window that pops up, to change the HTML to JSX.

JSX is a syntax extension to JavaScript. It allows you to use a mixture of HTML and JavaScript to write code in components. Once you copy all the sections to the components, the index.html file remains with only the styling links and scripts.

It will look like so:

        <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>

    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />

    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root"></div>

    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Core theme JS-->
    <script src="%PUBLIC_URL%/js/scripts.js"></script>

    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->

    <!-- * * SB Forms JS * *-->

    <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->

    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->

    <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>

</html>

Create Routes for Components

Now that you have the links, scripts, and components in the App, you must create routes for them in the App.js file. The routes will render the pages on the App to make it dynamic.

To render the pages, install react-router-dom with the following command:

        npm install react-router-dom 
    

In the App.js file, import BrowserRouter as a Router, Routes, and Route from the react-router-dom library. Then import all the components and Pages. The file should look like so:

        import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from './components/Navigation';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact'
import Header from "./components/Header";

function App() {
    return (
      <div className="App">
        <Header />
        <Home />
        <About />
        <Contact/>

        <Router>
          <Navigation>
            <Routes>
              <Route exact path="/" element={<Home />} />
              <Route exact path="/about" element={<About />} />
              <Route exact path="/contact" element={<Contact />} />
            </Routes>
          </Navigation>
        </Router>
      </div>
    );
}

export default App;

You should see the rendered pages on the local host when you navigate the browser. Similar to the template you downloaded, as illustrated below.

integrated bootstrap template in a web browser

Congratulations, you have successfully integrated a Bootstrap theme into your React App. You can now customize the pages to your preference.

Why Use Bootstrap’s Themed Templates?

Bootstrap templates help to create remarkable front-end interfaces within a very short time. There are many themes to choose from. All the themes are of the latest Bootstrap version. They also come with MIT licenses and are the latest industry designs.

While the advantages are many, relying on templates reduces creativity. It is common to find one popular theme used on other sites online. However, you can customize a template to a unique design.

Now you can integrate a Bootstrap template with your React App. Start building with Bootstrap templates and enjoy beautiful front-end interfaces.