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 - click here

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;

More related topics,

• React JS Setup, Installation, and First React Project: part 1
• ReactJS - JSX: part 2
• ReactJS - Components: part 3
• ReactJS - State and Props: part 4
• ReactJS - Component API: part 5
• ReactJS - Events : part 6
• Reactjs - Form: part 7
• ReactJS - Bootstrap - Buttons: part 8
• ReactJS - Bootstrap - Table: part 9
• ReactJS - Keys: part 10

Fill stack development

• React J+Node JS+Express+MongoDB CRUD:MERN Stack development 
• Kotlin + Spring Boot + React JS + MongoDB CRUD - Full stack development
• React JS+SpringBoot+RDBMS-CRUD:Full-stack development foundation
• React.js + Python + MongoDB CRUD application