Bootstrap and React

Bootstrap and React
What is bootstrap?
Bootstrap is a powerful front-end framework for faster and easier web development.
It includes HTML and CSS based design templates for creating common user interface
components like
 forms
 Buttons
 Navigations
 Dropdowns
 Alerts
 modals, tabs, accordions, carousels, tooltips, and so on.
Responsive – and popular
 Bootstrap gives you ability to create flexible and responsive web layouts with much less
efforts.
 Bootstrap was originally created by a designer and a developer at Twitter in mid-2010.
 Before being an open-sourced framework, Bootstrap was known as Twitter Blueprint.
Bootstrap bootcamp
Original bootstrap based on CSS https://reactstrap.github.io/
Adding Bootstrap
Open source
Install reactstrap and Bootstrap from NPM. Reactstrap does not
Highly compatible (across browsers) include Bootstrap CSS so this needs to be installed as well:
npm install --save bootstrap
Heavy reliance on jQuery npm install --save reactstrap react react-dom
Import Bootstrap CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';
Import required reactstrap components within src/App.js file or
your custom component files:
import { Button } from 'reactstrap';

Standard page to bootstrap – (HTML)
<!DOCTYPE html> <html lang="en"> <head> <!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"> <head>
<meta charset="utf-8">
<meta name="viewport" <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
content="width=device-width, initial- fit=no">
scale=1, shrink-to-fit=no"> <title>Basic Bootstrap Template</title>

<title>Basic HTML File</title> </head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css
/bootstrap.min.css">
<body> <h1>Hello, world!</h1> </body> </head>
<body>
</html> <h1>Hello, world!</h1>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" >
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js
"></script>
</body>
</html>
The heart of bootstrap layout
Dynamic layout based on a grid/ column model
Bootstrap 4 includes predefined grid classes for quickly making grid layouts for different types of
devices like cell phones, tablets, laptops and desktops, etc.
For example, you can use the .col-* classes to create grid columns for extra small devices mobile
phones in portrait mode,
Similarly you can use the .col-sm-* classes to create grid columns for small screen devices like
mobile phone in landscape mode,
The .col-md-* classes for medium screen devices like tablets, the .col-lg-* classes for large
devices like desktops, and the .col-xl-* classes for extra large desktop screens.
Grid
Features Extra small Small Medium Large Extra large
Bootstrap <576px ≥576px ≥768px ≥992px ≥1200px
4 Grid System
Max container None (auto) 540px 720px 960px 1140px
width
Ideal for Mobile (Portrait) Mobile (Landscape) Tablets Laptops Laptops &

Desktops
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
Number of 12
columns
Example
<div class="container-fluid">
<h1>Three equal width columns</h1>
<div class="row">
<div class="col-md-6 bg-success"><p>Lorem ipsum...</p></div>
<div class="col-md-6 bg-warning"><p>Sed ut perspiciatis...</p></div>
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>
Note that columns always add to twelve and styles are additive in ‘class’
Example with variable columns
<div class="container">
3 column layout on large devices
<div class="row">
2 columns on medium devices
<div class="col-md-4 col-lg-3">Column one</div> like tablets in portrait mode
<div class="col-md-8 col-lg-6">Column two</div> (768px ≤ screen width < 992px
<div class="col-md-12 col-lg-3">Column three</div> third column moves at the

bottom of the first two columns.
</div>
</div>
Visually …
Reactstrap?
A complete port of Bootstrap to React
jQuery removed
Rewritten for React components
Concepts like layout using 12 column grid retained
Most class names are now Component names
◦ E.g. instead of className=“container”, you just do <Container></Container>
◦ https://reactstrap.github.io/components
◦ You can still use className for lower-level styling (colors, margins, …) if not supported by the
objects properties (try to use props first)
Using Reactstrap
Make sure you include:
import 'bootstrap/dist/css/bootstrap.min.css’;
At the top of index.js
import {…} from 'reactstrap’;
For example:
import { Container, Row, Col } from 'reactstrap’;
Reactstrap Examples
<div>
<Button color="primary">primary</Button>{' '}
<Button color="secondary">secondary</Button>{' '}
<Button color="success">success</Button>{' '}
<Button color="info">info</Button>{' '}
<Button color="warning">warning</Button>{' '}
<Button color="danger">danger</Button>{' '}
Note the standard color scheme naming
<Button color="link">link</Button>
(primary, secondary, success, …)
</div>
Container
<Container className="m-4">
<Row className="unselected">
<Col className="unselected">1 of 3</Col>
<Col xs={6} className="unselected">2 of 3 (wider)</Co
l>
</Row>
<Row>
<Col xs={5} className="unselected">2 of 3 (wider)</Co
l>
</Row>
</Container>
Card margin 4
all around
<Card className="m-4">
<CardBody border="primary">
<CardHeader tag="h2">Card title</CardHeader>
<CardText >
'Twas Brilling, and the slithy toves did gyre and gimbl
e in the wabe.
All mimsy were the borogroves, And the mome raths outgr
abe. “Beware the ...
</CardText>
<Button>Snicker Snack</Button>
</CardBody>
</Card>
Modals:
In Single Page Applications (SPA), using Modals is common to show extra
data or gather extra data
<Modal isOpen={this.state.modal} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>{this.props.name}</ModalHeader>
But .. How to capture the data entered?
<ModalBody>
<InputGroup> Answer – using events and state, of
<InputGroupText>Student Name</InputGroupText>
<Input placeholder="Student name" onChange={this.updateStudentName} /> course!
</InputGroup>
<InputGroup>
<InputGroupText>Email</InputGroupText>
<Input placeholder="Email" onChange={this.updateEmail}/>
</InputGroup>
<InputGroup>
<InputGroupText>Favourite Colour</InputGroupText>
<Input placeholder="Colour" onChange={this.updateFav}/>
</InputGroup>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
<Button color="primary" onClick={this.saveChanges}>Save</Button>
</ModalFooter>
</Modal>
Modals:
In Single Page Applications (SPA), using Modals is common to show extra
data or gather extra data Open/ Close
modal
<Modal isOpen={this.state.modal} toggle={this.toggle}> toggle = () => {
<ModalHeader toggle={this.toggle}>{this.props.name}</ModalHeader>
<ModalBody>
if (this.state.modal == false)
<InputGroup> {
<InputGroupText>Student Name</InputGroupText> this.studentInfo = {};
<Input placeholder="Student name" onChange={this.updateStude
ntName} /> }
</InputGroup> this.setState({modal: !this.state.modal});
<InputGroup>
}
<InputGroupText>Email</InputGroupText>
<Input placeholder="Email" onChange={this.updateEmail}/>
</InputGroup>
Save text as it is
<InputGroup> typed updateStudentName = (e) =>
<InputGroupText>Favourite Colour</InputGroupText> {
<Input placeholder="Colour" onChange={this.updateFav}/>
</InputGroup> this.studentInfo.name = e.target.value;
</ModalBody> this.setState({studentInfo: this.studentInfo}) //Up
<ModalFooter> date the text data in state
<Button color="secondary" onClick={this.toggle}>Cancel</But
ton> }
<Button color="primary" onClick={this.saveChanges}>Save</Bu
tton>
</ModalFooter>
</Modal>
Demo …
How to find more
The reactstrap webpage has a lot of material on it, including a list of components and examples
of how to use those components.
https://reactstrap.github.io/
You should try some of these out in your own reactapp. Make a practice project and just paste
these in.
Conclusion
Reactstrap is the combination of react and bootstrap; allowing you to use bootstrap like you
would react components. This makes it easy to implement things like bootstrap’s grid or various
div classes supported by bootstrap– for example, Jumbotron.
It is a good idea to try other components out on your own; modify their properties and styling to
see what you can do.

Bootstrap and React

Uploaded by

Copyright:

Available Formats

Bootstrap and React

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap and React

Uploaded by

Copyright:

Available Formats

Bootstrap and React

Import Bootstrap CSS in the src/index.js file:

import { Button } from 'reactstrap';

Ideal for Mobile (Portrait) Mobile (Landscape) Tablets Laptops Laptops &

Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

<div class="col-md-12 col-lg-3">Column three</div> third column moves at the

You might also like