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.

Project structure

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; 