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.
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.
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: