Golang React JS Technology Blog

Integrate Bootstrap with ReactJS Application

Bootstrap is most open source popular CSS framework, which was originally developed by Twitter. CSS framework like Bootstrap simplifies the process of creating a consistent theme throughout an application. Bootstrap styles are applied via the className prop, which is the counterpart to the class attribute, and is used to group related elements. Bootstrap gives classes that allow the style contexts to be applied to various HTML elements.

Create React App

Type the following command to create a new react app:

npx create-react-app bootstrapdemo

Now, go to the project folder:

cd bootstrapdemo

Install the Bootstrap CSS framework

npm install bootstrap@4.3.1

To include Bootstrap CSS style in the application, update index.js as shown below:

src\index.js

Example

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
 
import 'bootstrap/dist/css/bootstrap.css';
 
ReactDOM.render(<App />, document.getElementById('root'));
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

This is the JavaScript file that is responsible for configuring and starting the React application, we have updated this file to import the Bootstrap CSS framework to the application.

Replace the contents of the index.html file in the public with below:

public\index.html

Example

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Demo Application</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

This is the HTML file that is loaded by the browser and it contains an element in which the application is displayed.

Replace the contents of the App.js file in the src folder with below code snippet:

src\App.js

Example

import React, { Component } from 'react';
 
class App extends Component {
  render = () =>
    <span class="d-block p-2 bg-dark text-white">
      Bootstap Demo Application
    </span>
}
 
export default App;

This is the React component, that will be displayed to the user which contains the HTML content and the JavaScript code.

Run the demo application

Example

Usethe command prompt to run the below command in the bootstrapdemo folder

npm start

Demo Application

Example

The React development tools will get start, and once the initial preparations are completed, a new browser window will get open and display the content shown below:

Use Bootstrap classes to styling content

src\App.js

Example

import React, { Component } from 'react';
 
const title = "Bootstap Demo Application";
const content = "Use this document as a way to quickly start any new project.";
 
class App extends Component {
  render = () =>
    <main role="main" class="container bg-dark text-white text-center">
      <div class="starter-template">
        <h1>{ title }</h1>
        <p class="lead">{ content }</p>        
      </div>
    </main>
}
 
export default App;

Most Helpful This Week
React Elements Using this keyword access component properties and methods How to set property values using expression? React Components How to create Functional Component? Create React App