Setting Up Bootstrap for Modern Web Development | Step-by-Step Guide

Bootstrap is one of the most popular front-end frameworks for building responsive, mobile-first web applications. It provides a wide range of components, utilities, and layout options that make UI development easier and more efficient. In this guide, we will cover:

• Installing Bootstrap in Angular and React
• Using Bootstrap components to create a responsive UI
• Customizing Bootstrap with SCSS for better styling

1. Installing Bootstrap in Angular and React

Installing Bootstrap in Angular

To add Bootstrap to an Angular project, follow these steps:

Step 1: Install Bootstrap via npm

Navigate to your Angular project directory and run:

npm install bootstrap

You may also install @popperjs/core for proper tooltip and popover functionality:

npm install @popperjs/core

Step 2: Import Bootstrap in angular.json

Open angular.json and add Bootstrap CSS in the styles array:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Step 3: Import Bootstrap JavaScript (Optional)

To use Bootstrap components that require JavaScript (like modals, tooltips, and dropdowns), add Bootstrap JS in the scripts array:

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Now, Bootstrap is fully integrated into your Angular application.

Installing Bootstrap in React

To integrate Bootstrap with React, follow these steps:

Step 1: Install Bootstrap

Run the following command inside your React project:

npm install bootstrap

Step 2: Import Bootstrap in index.js or App.js

Add the following import statement at the top of your index.js or App.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

Step 3: Import Bootstrap JavaScript (Optional)

For Bootstrap JavaScript components like modals and tooltips, import Bootstrap's JavaScript bundle in index.js:

import 'bootstrap/dist/js/bootstrap.bundle.min';

Bootstrap is now set up in your React application.

2. Using Bootstrap Components to Create a Responsive UI

Bootstrap provides a variety of pre-styled components that can be used to create responsive layouts and interfaces.

Using Bootstrap Grid System

Bootstrap’s grid system is based on a 12-column layout and helps in creating responsive designs.

Example in Angular

<div class="container">
  <div class="row">
    <div class="col-md-6">Left Column</div>
    <div class="col-md-6">Right Column</div>
  </div>
</div>

Example in React

import React from 'react';

function App() {
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">Left Column</div>
        <div className="col-md-6">Right Column</div>
      </div>
    </div>
  );
}

export default App;

Using Bootstrap Buttons

Example in Angular

<button class="btn btn-primary">Click Me</button>

Example in React

<button className="btn btn-primary">Click Me</button>

Using Bootstrap Forms

Example in Angular

<form>
  <div class="mb-3">
    <label class="form-label">Email address</label>
    <input type="email" class="form-control">
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

Example in React

function FormComponent() {
  return (
    <form>
      <div className="mb-3">
        <label className="form-label">Email address</label>
        <input type="email" className="form-control" />
      </div>
      <button type="submit" className="btn btn-success">Submit</button>
    </form>
  );
}

3. Customizing Bootstrap with SCSS for Better Styling

Bootstrap allows customization via SCSS, giving developers more control over the design.

Step 1: Install Bootstrap SCSS

npm install bootstrap

Step 2: Create an SCSS File

Create a styles.scss file in your project and import Bootstrap SCSS:

@import "node_modules/bootstrap/scss/bootstrap";

Step 3: Override Bootstrap Variables

To customize Bootstrap, override its variables before importing:

$primary: #ff5733;
$secondary: #33ff57;

@import "node_modules/bootstrap/scss/bootstrap";

This will change the primary and secondary colors of Bootstrap.

Using SCSS in Angular

Modify angular.json to include SCSS support:

"styles": [
  "src/styles.scss"
]

Using SCSS in React

Rename App.css to App.scss and import it in App.js:

import './App.scss';

Now you can use SCSS in your React project.

Conclusion

Bootstrap is a powerful framework for building modern web applications. We have covered:

• Installing Bootstrap in Angular and React
• Using Bootstrap components to create a responsive UI
• Customizing Bootstrap with SCSS for better styling

With these techniques, you can build professional and responsive web applications efficiently. Happy coding!