ReactJS - Bootstrap - Buttons

Bootstrap become the most popular CSS framework. 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;

More...

Comments