Bootstrap and React
Bootstrap is a front-end framework that offers HTML and CSS design templates for creating user interface components like forms, buttons, and more. It enables flexible and responsive web layouts with minimal effort and was originally developed by Twitter. Learn how to integrate Bootstrap with React and create dynamic layouts using its grid system.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
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 jQuery npm install --save bootstrap 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/index.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, initial-scale=1, shrink-to- fit=no"> <title>Basic Bootstrap Template</title> <!-- Bootstrap CSS file --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css /bootstrap.min.css"> </head> <body> <h1>Hello, world!</h1> <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS --> <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> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no"> <title>Basic HTML File</title> </head> <body> <h1>Hello, world!</h1> </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 <576px Small 576px Medium 768px Large 992px Extra large 1200px None (auto) 540px 720px 960px 1140px Ideal for Mobile (Portrait) Mobile (Landscape) Tablets Laptops Laptops & Desktops Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- Number of columns 12
Example <div class="container-fluid"> <h1>Two 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 class="col-md-6 bg-primary"><p>Lorem ipsum...</p></div> <div class="col-md-6 bg-secondary"><p>Sed ut perspiciatis...</p></div> </div> <div class="row"> <div class="col-md-6 bg-info"><p>Lorem ipsum...</p></div> <div class="col-md-6 bg-danger"><p>Sed ut perspiciatis...</p></div> </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"> <div class="col-md-4 col-lg-3">Column one</div> 2 columns on medium devices like tablets in portrait mode (768px screen width < 992px <div class="col-md-8 col-lg-6">Column two</div> <div class="col-md-12 col-lg-3">Column three</div> third column moves at the bottom of the first two columns. </div> </div>
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 (primary, secondary, success, ) <Button color="link">link</Button> </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)</Col> <Col className="unselected">3 of 3</Col> </Row> <Row> <Col className="unselected">1 of 3</Col> <Col xs={5} className="unselected">2 of 3 (wider)</Col> <Col className="unselected">3 of 3</Col> {xs}=6 says it will take up 6 of the 12 grid columns on an XS size device (or any larger device) The remaining columns are distributed by reactstrap/ bootstrap </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 gimble in the wabe. All mimsy were the borogroves, And the mome raths outgrabe. 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> <ModalBody> <InputGroup> <InputGroupText>Student Name</InputGroupText> <Input placeholder="Student name" onChange={this.updateStudentName} /> </InputGroup> <InputGroup> <InputGroupText>Email</InputGroupText> <Input placeholder="Email" </InputGroup> <InputGroup> <InputGroupText>Favourite Colour</InputGroupText> <Input placeholder="Colour" </InputGroup> </ModalBody> <ModalFooter> <Button color="secondary" onClick={this.toggle}>Cancel</Button> <Button color="primary" onClick={this.saveChanges}>Save</Button> </ModalFooter> </Modal> But .. How to capture the data entered? Answer using events and state, of course! onChange={this.updateEmail}/> onChange={this.updateFav}/>
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}> <ModalHeader toggle={this.toggle}>{this.props.name}</ModalHeader> <ModalBody> <InputGroup> <InputGroupText>Student Name</InputGroupText> <Input placeholder="Student name" onChange={this.updateStude ntName} value={this.state.studentInfo.name}/> </InputGroup> <InputGroup> <InputGroupText>Email</InputGroupText> <Input placeholder="Email" </InputGroup> <InputGroup> <InputGroupText>Favourite Colour</InputGroupText> <Input placeholder="Colour" </InputGroup> </ModalBody> <ModalFooter> <Button color="secondary" onClick={this.toggle}>Cancel</But ton> <Button color="primary" onClick={this.saveChanges}>Save</Bu tton> </ModalFooter> </Modal> toggle = () => { if (this.state.modal == false) { this.studentInfo = {}; } this.setState({modal: !this.state.modal}); } onChange={this.updateEmail}/> Save text as it is typed updateStudentName = (e) => { this.studentInfo.name = e.target.value; this.setState({studentInfo: this.studentInfo}) //Up date the text data in state } onChange={this.updateFav}/>
<Modal isOpen={this.state.editModal} toggle={this.toggleEdit}> <ModalHeader toggle={this.toggleEdit}>Edit Data</ModalHeader> <ModalBody> <ItemData data={this.state.itemList[this.currentEditId]} callBackClose={this.getNewData}> </ItemData> </ModalBody> </Modal> Modal Modal gotchas Modals are only constructed ONCE, when the page is first initialized. This means that if you open the modal more than once, all the OLD state data is still sitting there. This can play havoc with your state data updates ItemData Recommendation: <Card> <CardHeader>{this.props.title}</CardHeader> <CardBody> <Label for="field1">Name</Label> <Input id="field1" name="name" value={this.state.name} type="text" onChange={this.updateName} /> <Label for="field2">Location</Label> <Input id="field2" name="loc" value={this.state.loc} type="text" onChange={this.updateLoc}/> Separate the data inputs from the main body of the modal. This will ensure a fresh constructor and hence fresh state is created e.g. ItemData is its own class (<Input> tags are rendered inside a <Card> in this example)
Proper Behaviour Correct modal behaviour: Do NOT assume you should treat Modals as Forms Always provide ok / cancel buttons Ok accepts the changes; cancel discards and changes Ok confirmation is optional Do NOT automatically make your OK button a Submit! -- Why?? Always pre-populate any available data, especially if the Modal is used to edit existing information
A few more reactstrap controls Dropdown list; Listboxes: <Input type="select" size="5" <Dropdown isOpen={this.state.dropDown} toggle={this.toggleDropDown}> <option > </option>) </Input>
Design Approach Create components to contain logical groupings of HTML elements Use state only where needed mostly components should receive props to configure themselves If you have multiples of the same component, treat is just like a Java or C# class/ object i.e. iterate and create multiple instances of the component, each with different props Use data-structures to organize your data Use iterators to render objects using elements inside the data-structures
Using iterators in JSX quotes = [ "Please sir, may I have some more", "Politicians are like diapers", "What fools these mortals be", "The needs of the many outweigh the needs of the few, or the one.", ] <Container> {/*reacstrap Input again, but inline JS map*/} <Input type="select" size="6" style={{margin:'5', backgroundColor: 'lightgreen'}}> {this.quotes.map(element =>{ return (<option key={element}>{element}</option>)} ) } </Input> </Container>
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.
