React and Bootstrap Tutorial

Bootstrap is a popular CSS framework that provides pre-designed components and a responsive grid system.

You can easily integrate Bootstrap with React for building sleek and responsive user interfaces.

Installing Bootstrap

You can install Bootstrap via npm or include it from a Content Delivery Network (CDN).
For npm installation, run

npm install bootstrap

Importing Bootstrap CSS

Import the Bootstrap CSS file into your React application, typically in your index.js or App.js file.

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

Using Bootstrap Components

Bootstrap offers a variety of components like buttons, forms, modals, and navigation bars.
Utilize these components in your React application by including the Bootstrap HTML and CSS classes.

import React from 'react';

const MyComponent = () => {
    return (
    <div>
        <button className="btn btn-primary">Primary Button</button>
        <button className="btn btn-secondary">Secondary Button</button>
    </div>
    );
};

Grid Layout with Bootstrap

Bootstrap's grid system allows you to create responsive layouts easily.
Use the container, row, and col classes to structure your layout.

import React from 'react';

const MyComponent = () => {
    return (
    <div className="container">
        <div className="row">
            <div className="col-md-6">Column 1</div>
            <div className="col-md-6">Column 2</div>
        </div>
    </div>
    );
};

Responsive Design with Bootstrap

Bootstrap provides responsive classes to control component visibility on different screen sizes.
Use classes like d-none, d-md-block, or d-lg-flex for responsive behavior.

<div className="d-none d-md-block">Content for medium screens</div>

Customizing Bootstrap

Bootstrap can be customized using variables and SASS/SCSS.
Create a custom.scss file to override Bootstrap's default variables and styles.

// custom.scss
$primary-color: #007bff;

// Import Bootstrap
@import '~bootstrap/scss/bootstrap';

// Your custom styles

Previous Next