Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS Reactstrap Jumbotron Component

  • Last Updated : 01 Aug, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:

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:

New Jumbotron component

Reference: https://reactstrap.github.io/components/jumbotron




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!