ReactJS - Bootstrap - Buttons

Bootstrap is a free and open-source front-end development framework for the creation of websites and web apps. It is a free and open-source project, hosted on GitHub, and originally engendered by Twitter. Let us create a new React app https://www.knowledgefactory.net/2020/12/react-js-setup-installation-and-first_27.html
 
After engendering the React app, the best way to install Bootstrap is via the npm package. To install Bootstrap, navigate to the React app folder, and run the following command.

$ npm install react-bootstrap bootstrap --save

Example

import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

render() {
return (
<div>
<>
<Button variant="primary">Primary</Button>{' '}
<Button variant="secondary">Secondary</Button>{' '}
<Button variant="success">Success</Button>{' '}
<Button variant="warning">Warning</Button>{' '}
<Button variant="danger">Danger</Button>
                    <Button variant="info">Info</Button>{' '}
<Button variant="light">Light</Button>
                    <Button variant="dark">Dark</Button>{' '}
<Button variant="link">Link</Button>
</>

</div>
);
}
}
export default App;

Outline buttons

import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

render() {
return (
<div>
<>
<Button variant="outline-primary">Primary</Button>{' '}
<Button variant="outline-secondary">Secondary</Button>{' '}
<Button variant="outline-success">Success</Button>{' '}
<Button variant="outline-warning">Warning</Button>{' '}
<Button variant="outline-danger">Danger</Button>{' '}
<Button variant="outline-info">Info</Button>{' '}
<Button variant="outline-light">Light</Button>{' '}
<Button variant="outline-dark">Dark</Button>
</>
</div>
);
}
}
export default App;

Button tags

import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

render() {
return (
<div>
<>
<>
<Button href="#">Link</Button> <Button type="submit">
                                Button</Button>{' '}
<Button as="input" type="button" value="Input" />{' '}
<Button as="input" type="submit" value="Submit" />{' '}
<Button as="input" type="reset" value="Reset" />
</>
</>
</div>
);
}
}
export default App;

Button Sizes

import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

render() {
return (
<div>
<>
<div className="mb-2">
<Button variant="success" size="lg">
Large button
</Button>{' '}
<Button variant="danger" size="lg">
Large button
</Button>
</div>
<div>
<Button variant="success" size="sm">
Small button
</Button>{' '}
<Button variant="danger" size="sm">
Small button
</Button>
</div>

</>
</div>
);
}
}
export default App;

Block-level buttons

import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

render() {
return (
<div>
<>
<Button variant="success" size="lg" block>
Block level button
</Button>
<Button variant="danger" size="lg" block>
Block level button
</Button>
</>
</div>
);
}
}
export default App;

Active state

import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

render() {
return (
<div>
<>
<Button variant="warning" size="lg" active>
Primary button
</Button>{' '}
<Button variant="success" size="lg" active>
Button
</Button>
</>
</div>
);
}
}
export default App;

Disabled state


import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

render() {
return (
<div>
<>
<Button variant="success" size="lg" disabled>
Primary button
</Button>{' '}
<Button variant="primary" size="lg" disabled>
Button
</Button>{' '}
<Button href="#" variant="warning" size="lg" disabled>
Link
</Button>
</>
</div>
);
}
}
export default App;

CRUD

Popular posts from this blog

Spring boot video streaming example-HTML5

Spring Boot + OpenCSV Export Data to CSV Example

DataTable-Pagination example with Spring boot, jQuery and ajax

Spring boot web project free download:User Registration System

10 Best Job Posting Sites 2021-2022

Spring Boot + JPA/Hibernate One to Many mapping example

5 Hardest Puzzle,100% fail answers

Spring Boot-AngularJS-Bootstrap-JPA-CRUD

Java security AES,SHA256,SHA512,MD5-Spring Boot Project Free Download