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:-
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.
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 '../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.
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-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