Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • React Bootstrap Initialisation
  • React Bootstrap Component
  • React Bootstrap Grid System
  1. 1: Frontend
  2. 1.3: React

Using Styling Libraries with React

PreviousStyling in ReactJsNextReact Deployment

Last updated 1 year ago

Learning Objectives

  1. Understand what React-Bootstrap is

  2. Implement React-Bootstrap into React Applications

  3. Using React-Bootstrap pre-styled components

React Bootstrap Initialisation

React Bootstrap is a popular frontend styling library, it contains pre-built style and functionalities for out of the box easy implementation. This tool is integrated well with ReactJs and is geared for beginners to test out and implement styling libraries. Developers are even able to customize Bootstrap within custom scss stylesheets, feel free to learn more about it .

To implement React Bootstrap into a React application open a CLI interface and change directory to your current project. Here you can run this command:

npm install react-bootstrap bootstrap

This will install React Bootstrap and the bootstrap package within the application, there is still one more step that must be taken before you can utilise all of React-Bootstrap in your app.

Go to the main.jsx within your React application and this line at the top of the file:

import 'bootstrap/dist/css/bootstrap.min.css';

This line imports the CSS for bootstrap into your application, any child components of this file will be able to access and utilise React-Bootstrap styling, pre-made components, utilities and alignment system.

Now that Bootstrap has been implemented in your application it might be a good idea to look at some of the pre-styled components you can implement, look at some examples and usage .

To showcase implementing React Bootstrap into a React Application we will implement some new styled buttons on our previously edited boilerplate code from our previous section.

React Bootstrap Component

We will import Button from react-bootstrap such that we get pre-styled buttons without much effort. Alter the App.js file to reflect code below:

import logo from "./logo.svg";
import "./App.css";
import { Button } from "react-bootstrap";

function App() {

const customHeaderStyle = {
    fontWeight: "900",
    color: "#ffffff",
    textDecoration: "#1bdb22 wavy underline",
  };
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p style={{ color: "Red", fontWeight: "bold" }}>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <h1 style={customHeaderStyle}>This new header</h1>
        <br />
        <Button variant="primary">Bootstrap Button</Button>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

The output on the browser is as follows:

From the image above we can see a new blue button has been added into the application, we didnt style this button, it was all React-Bootstrap. This is how you can utilise React-Bootstrap within a React application. Utilise more complex components using this styling library to save yourself time during development.

React Bootstrap Grid System

One of the most powerful features of React-Bootstrap is its grid system, which facilitates mobile responsive websites without having to restyle every single element on your page. Learn more about the grid system:

When implementing the grid system be sure to:

  1. Use a react-bootstrap Container Component

  2. Use Row and Column Components within the Container to display your information

    1. Note that each row can be broken into 12 columns

    2. Each section can take up multiple spaces

  3. Wire-framing and planning out how your component will look will make using grid easier

Here is a simple implementation of the react-bootstrap grid system

 <Container>
          <Row>
            <Col style={columnStyle}> 1 of 1</Col>
          </Row>
          <br />
          <Row>
            <Col style={columnStyle}> 1 of 2</Col>
            <Col style={columnStyle}> 2 of 2</Col>
          </Row>
          <br />
          <Row>
            <Col style={columnStyle}> 1 of 4</Col>
            <Col style={columnStyle}> 2 of 4</Col>
            <Col style={columnStyle}> 3 of 4</Col>
            <Col style={columnStyle}> 4 of 4</Col>
          </Row>
          <br />
          <Row>
            <Col style={columnStyle}> 1 of 6</Col>
            <Col style={columnStyle}> 2 of 6</Col>
            <Col style={columnStyle}> 3 of 6</Col>
            <Col style={columnStyle}> 4 of 6</Col>
            <Col style={columnStyle}> 5 of 6</Col>
            <Col style={columnStyle}> 6 of 6</Col>
          </Row>
 </Container>

It is possible to make the Col Components respond to the windows width, based off the breakpoints that were pointed out earlier. This allows columns to wrap and resize their content to ensure that data is shown exactly as intended, to do this we need to make use of Bootstraps breakpoint properties on our Col Components as shown below. You are able to apply as many breakpoint properties on a Col as are needed.

<Container>
          <Row>
          
          {/* 
            xl = On an extra large screen the Col takes up the full width of the Container
            lg = On a large screen the Col takes up half the width of the Container
            md = On a medium screen the Col takes up a third of the width of the Container
            sm = On a small screen the Col takes up a quarter of the width of the Container
            This allows the columns to dynamically alter depending on the window size that the user is using. 
          */}
            
            <Col style={columnStyle} xl={12} lg={6} md={4} sm={3}>
              1 of 6
            </Col>
            <Col style={columnStyle} xl={12} lg={6} md={4} sm={3}>
              2 of 6
            </Col>
            <Col style={columnStyle} xl={12} lg={6} md={4} sm={3}>
              3 of 6
            </Col>
            <Col style={columnStyle} xl={12} lg={6} md={4} sm={3}>
              4 of 6
            </Col>
            <Col style={columnStyle} xl={12} lg={6} md={4} sm={3}>
              5 of 6
            </Col>
            <Col style={columnStyle} xl={12} lg={6} md={4} sm={3}>
              6 of 6
            </Col>
          </Row>
        </Container>

Below is the output of the code above, depending on the size of the window.

The Grid system in react-bootstrap affords developers an easy way to dynamically resize content dependant on their users screens. This system of Bootstrap Components comes together to build fully responsive webpages, it should be noted that the underlying system used here is flexbox. This system is a fantastic way to ensure that an applications content can be visible to users across multiple device sizes without the need to add in hundreds of @mediaqueries.

Checkout more React-Bootstrap Components . Use a combination of pre-styled and custom components to quickly develop applications that can be tailored to your need, just be aware of the props that you can pass. Constantly run your React application to see whether or not your application is being styled appropriately. And remember when styling with React-Bootstrap you just need to import the component's that you need at the top of the page, then you can use them like normal HTML tags in your JSX.

Uncover and understand the in react-bootstrap

🖼️
here
here
here
Breakpoint system
Grid system | React Bootstrap
Grid System React Bootstrap
Logo
Bootstrap added
Simple Grid System
Extra Large Screen ≥1200px
Large Screen ≥992px
Medium Screen ≥768x
Small Screen ≥576px