ReactJS Reactstrap Jumbotron Component
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.
- 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.
<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.
- 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.
Example 1: This is the basic example that shows how to use the Jumbotron component.
Example 2: This is example in which we will use another Jumbotron component.