Header Responsive Ads

What is Bootstrap in Programming 

Bootstrap is best CSS framework. Using bootstrap, you can create responsive front end web page for different screen sizes. For this, it provides lot of built in classes. In this article, we will learn:-

what is bootstrap in programming

NPM Install Bootstrap

You know what is npm package. Npm is node package manager used to install any package from millions of packages. Open terminal in VS Code and type below commad:-

npm install bootstrap


This command will take few seconds to install latest version of bootstrap in node_modules folder of your react app. How to confirm that bootstrap is installed successfully? Just open package.json file and find bootstrap and its version under dependencies as below.

npm install bootstrap

How to use bootstrap in Reactjs

You can find bootstrap CSS and JS folders at node_modules -> bootstrap -> dist. So follow this path to import as below

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


Create React Component

We will create function component App that will return a simple button like

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
const App = () => {
    return(
        <button type='text'>Simple Button</button>
    );
}

Style Button with bootstrap classes

Go to bootstrap official website and select components in left panel. You will see a lot of components as below.

bootstrap official website

Now select Button. You will see all bootstrap button styles. Here we will use all styles as

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
const App = () => {
return(
<div>
    <button className='btn btn-primary' type='button'>Primary</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-success' type='button'>Success</button>
    <button className='btn btn-danger' type='button'>Danger</button>
    <button className='btn btn-warning' type='button'>Warning</button>
    <button className='btn btn-info' type='button'>Info</button>
    <button className='btn btn-light' type='button'>Light</button>
    <button className='btn btn-dark' type='button'>Dark</button>
    <button className='btn btn-link' type='button'>Link</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-success' type='button'>Success</button>
    <button className='btn btn-danger' type='button'>Danger</button>
    <button className='btn btn-warning' type='button'>Warning</button>
    <button className='btn btn-info' type='button'>Info</button>
    <button className='btn btn-light' type='button'>Light</button>
    <button className='btn btn-dark' type='button'>Dark</button>
    <button className='btn btn-link' type='button'>Link</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-success' type='button'>Success</button>
    <button className='btn btn-danger' type='button'>Danger</button>
    <button className='btn btn-warning' type='button'>Warning</button>
    <button className='btn btn-info' type='button'>Info</button>
    <button className='btn btn-light' type='button'>Light</button>
    <button className='btn btn-dark' type='button'>Dark</button>
    <button className='btn btn-link' type='button'>Link</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-secondary' type='button'>Secondary</button>
    <button className='btn btn-success' type='button'>Success</button>
    <button className='btn btn-danger' type='button'>Danger</button>
    <button className='btn btn-warning' type='button'>Warning</button>
    <button className='btn btn-info' type='button'>Info</button>
    <button className='btn btn-light' type='button'>Light</button>
    <button className='btn btn-dark' type='button'>Dark</button>
    <button className='btn btn-link' type='button'>Link</button>
</div
);
}
export default App;


Include any Bootstrap component in react

Similarly you can select any component, copy its code and use. You just need to make few changes in code. Now we will copy bootstrap Navbar style code from bootstrap website and use it in our component.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
const App = () => {
    return(
      <div>
        <ul class="nav nav-pills">
            <li class="nav-item">       <a class="nav-link active" href="#">Active</a>
            </li>               
            <li class="nav-item">        <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">       <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">     <a class="nav-link disabled" href="#" tabindex="-1" 
                aria-disabled="true">Disabled</a>
            </li>
        </ul>
      </div
    );
}
export default App;



Post a Comment

Previous Post Next Post