ReactJS Reactstrap Jumbotron Component

Last Updated : 07 Mar, 2024

Reactstrap is a bootstrap-based react UI library that is used to make good looking webpages with its seamless and easy-to-use component.

A jumbotron is a big grey box used to indicate some text which requires extra attention. Any text that seems to be important can be written inside a jumbotron to make it appear big and noticeable. In this article, we will find out how to use the Jumbotron Component in Reactstrap.

Properties:

fluid: The fluid properties in reactStrap Jumbotron are used to take full width in the screen. It takes the default value that is false and the type is a boolean.
as: The properties are used to find the custom element type.It takes the default value as <div> and, type is elementType.
className: className properties in reactStrap are used to specify the CSS attribute .It takes the default value as a string.

Syntax:

<Jumbotron>
  content
</Jumbotron>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. folder name, move to it using the following command.
```
cd foldername
```
Step 3: Install Reactstrap in your given directory.

 npm install --save reactstrap react react-dom

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example 1: This is the basic example that shows how to use the Jumbotron component.

App.js

import React from "react";
import { Jumbotron } from "reactstrap";
const gfg = (props) => {
    return (
        <div>
            <br />
            <Jumbotron>
                <h3 className="display-2">
                    GeeksforGeeks!
                </h3>
                <hr />
                <p className="display-3">
                    A Computer Science portal for geeks. 
                    It contains well written, well 
                    thought and well explained computer 
                    science and programming articles, 
                    quizzes. A Computer Science portal 
                    for geeks. It contains well written, 
                    well thought and well explained 
                    computer science and programming
                    articles, quizzes.We provide a variety 
                    of services for you to learn, thrive 
                    and also have fun! Free Tutorials, 
                    Millions of Articles, Live, Online and 
                    Classroom Courses ,Frequent Coding 
                    Competitions ,Webinars by Industry 
                    Experts, Internship opportunities 
                    and Job Opportunities.
                </p>
            </Jumbotron>
        </div>
    );
};

export default gfg;

Output:

Example 2: This is example in which we will use another Jumbotron component.

App.js

import React from "react";
import { Jumbotron, Button } from "reactstrap";

const geeksforgeeks = (props) => {
    return (
        <div>
            <Jumbotron>
                <h3 className="display-3">
                    Geeksforgeeks
                </h3>
                
                <p className="lead">
                    What We Offer... <br></br>
                    Provide a variety of services 
                    for you to learn, thrive and 
                    also have fun!
                </p>

                <hr className="my-2" />

                <p>
                    Free Tutorials, Millions of Articles, 
                    Live, Online and Classroom Courses, 
                    Frequent Coding Competitions, Webinars 
                    by Industry Experts, Internship
                    opportunities and Job Opportunities. 
                    Billions of Users, Millions of Articles 
                    Published, Thousands Got Hired by Top 
                    Companies and the numbers are still growing.
                </p>
            </Jumbotron>
        </div>
    );
};

export default geeksforgeeks;

Output:

ReactJS Reactstrap Jumbotron Component

taran910

Improve

Article Tags :

ReactJS Reactstrap Jumbotron Component

Similar Reads

Thank You!

What kind of Experience do you want to share?