Bootstrap and React What is bootstrap Bootstrap is

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/ Open source Adding Bootstrap Highly compatible (across browsers) Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well: Heavy reliance on j. Query npm install --save bootstrap npm install --save reactstrap 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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initialscale=1, shrink-to-fit=no"> <title>Basic HTML File</title> </head> <body> <h 1>Hello, world!</h 1> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-tofit=no"> <title>Basic Bootstrap Template</title>  <link rel="stylesheet" href="https: //stackpath. bootstrapcdn. com/bootstrap/4. 5. 0/css /bootstrap. min. css"> </head> <body> <h 1>Hello, world!</h 1>  <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 Bootstrap 4 Grid System Max container width Extra small <576 px Small ≥ 576 px Medium ≥ 768 px Large ≥ 992 px Extra large ≥ 1200 px None (auto) 540 px 720 px 960 px 1140 px Ideal for Mobile (Portrait) Mobile (Landscape) Tablets Laptops & Desktops Class prefix . col-lg- . col-xl- Number of columns 12 . col-sm- . col-md-

Example <div class="container-fluid"> <h 1>Three equal width columns</h 1> <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> Note that columns always add to twelve and styles are additive in ‘class’

Example with variable columns <div class="container"> <div class="row"> <div class="col-md-4 col-lg-3">Column one</div> <div class="col-md-8 col-lg-6">Column two</div> <div class="col-md-12 col-lg-3">Column three</div> 3 column layout on large devices 2 columns on medium devices like tablets in portrait mode (768 px ≤ screen width < 992 px third column moves at the bottom of the first two columns.

Visually …

Reactstrap? A complete port of Bootstrap to React j. Query removed Rewritten for React components Concepts like layout using 12 column grid retained Most class names are now Component names ◦ E. g. instead of class. Name=“container”, you just do <Container></Container> ◦ https: //reactstrap. github. io/components ◦ You can still use class. Name 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>{' '} <Button color="link">link</Button> </div> Note the standard color scheme naming (primary, secondary, success, …)

Container <Container class. Name="m-4"> <Row class. Name="unselected"> <Col class. Name="unselected">1 of 3</Col> <Col xs={6} class. Name="unselected">2 of 3 (wider)</Col> <Col class. Name="unselected">3 of 3</Col> </Row> <Col class. Name="unselected">1 of 3</Col> <Col xs={5} class. Name="unselected">2 of 3 (wider)</Col> <Col class. Name="unselected">3 of 3</Col> </Row> </Container>

Card <Card class. Name="m-4"> margin 4 all around <Card. Body border="primary"> <Card. Header tag="h 2">Card title</Card. Header> <Card. Text > 'Twas Brilling, and the slithy toves did gyre and g imble in the wabe. All mimsy were the borogroves, And the mome raths o utgrabe. “Beware the. . . </Card. Text> <Button>Snicker Snack</Button> </Card. Body> </Card>

Modals: In Single Page Applications (SPA), using Modals is common to show extra data or gather extra data <Modal is. Open={this. state. modal} toggle={this. toggle}> <Modal. Header toggle={this. toggle}>{this. props. name}</Modal. Header> <Modal. Body> <Input. Group. Text>Student Name</Input. Group. Text> <Input placeholder="Student name" on. Change={this. update. Student. Name} /> </Input. Group> <Input. Group. Text>Email</Input. Group. Text> <Input placeholder="Email" on. Change={this. update. Email}/> </Input. Group> <Input. Group. Text>Favourite Colour</Input. Group. Text> <Input placeholder="Colour" on. Change={this. update. Fav}/> </Input. Group> </Modal. Body> <Modal. Footer> <Button color="secondary" on. Click={this. toggle}>Cancel</Button> <Button color="primary" on. Click={this. save. Changes}>Save</Button> </Modal. Footer> </Modal> But. . How to capture the data entered? Answer – using events and state, of course!

Modals: In Single Page Applications (SPA), using Modals is common to show extra data Open/ Close or gather extra data modal <Modal is. Open={this. state. modal} toggle={this. toggle}> <Modal. Header toggle={this. toggle}>{this. props. name}</Modal. Header> <Modal. Body> <Input. Group. Text>Student Name</Input. Group. Text> <Input placeholder="Student name" on. Change={this. update. Stude nt. Name} /> </Input. Group> <Input. Group. Text>Email</Input. Group. Text> <Input placeholder="Email" on. Change={this. update. Email}/> Save text as it is </Input. Group> typed <Input. Group> <Input. Group. Text>Favourite Colour</Input. Group. Text> <Input placeholder="Colour" on. Change={this. update. Fav}/> </Input. Group> </Modal. Body> <Modal. Footer> <Button color="secondary" on. Click={this. toggle}>Cancel</But ton> <Button color="primary" on. Click={this. save. Changes}>Save</Bu tton> </Modal. Footer> </Modal> toggle = () => { if (this. state. modal == false) { this. student. Info = {}; } this. set. State({modal: !this. state. modal}); } update. Student. Name = (e) => { this. student. Info. name = e. target. value; this. set. State({student. Info: this. student. Info}) //Up date the text data in state }

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.