Skip to content
Related Articles

Related Articles

Improve Article

ReactJS Reactstrap Media Component

  • Last Updated : 28 Jul, 2021
Geek Week

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

In this article, we will see how to use the Media Component in Reactstrap. The media component is used to add some media to our project.

Properties:

  • Tag: In ReactStrap Media Component, Tag is a property that is used to set the tag in the component. It takes string and function values.
  • className: In ReactStrap Media Component className define the class name of the component. With the help of className, you can add the styling using CSS.
  • heading: In ReactStrap Media Component heading is the property in reactStrap is used to set the heading in the text. It takes a boolean value as the default argument.
  • middle: In the reactStrap, the middle property is used to set the middle alignment between the two objects. It takes a boolean value.
  • fluid: In ReactStrap Media Component fluid is applies .container-fluid class and if string then it applies .container-{breakpoint} class.
  • block: In ReactStrap Media Component block props are used to indicate whether the block should have a block style or not.
  • color: The color props in the reactStrap are used to set the color of the element in the component.
  • body: The body properties in the media component are used to set the body of the element. By default, it takes a boolean value.
  • bottom: The bottom properties are used to fix the position in the bottom of the components. It should be true or false, it takes a boolean value.
  • children: children properties are used to set the children of the element in components. It takes a node value.
  • heading: heading properties is used to set the heading of the element, by default it takes takes a boolean value.
  • left: left properties are used to set the alignment of the element on the left side of the component, it takes a boolean value .
<Media>
  Content
</media>

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
  • Step 4: Import the element to be used in the project.
import {Media} from 'reactstrap'

 



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 media component.

App.js




import React from "react";
import { Media } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
    return (
        <div className="App">
            <Media>
                <Media left href="#">
                    <Media
                        object
                        src=
                        alt="cat"
                    />
                </Media>
                <Media body>
                    <br></br>
                    <Media heading>GFG DSA Course</Media>
                    <br></br>
                    I Want to learn DSA but don't know where 
                    to start? Don't worry, this course is a 
                    complete package for you to learn all the 
                    concepts at your own pace. It's perfect 
                    for students and working professionals
                    who know at least anyone coding language.
                </Media>
            </Media>
        </div>
    );
}

Output: 

Example 2: In this example, we will see how to use tag property in media.

  • App.js

Javascript




import React from 'react';
import { Media } from 'reactstrap';
  
const gfg = (props) => {
  
    return (
        <div id='gfg'>
            <br />
            <Media tag='a' href=
            'https://www.geeksforgeeks.org/'>
                <Media body>
                    <Media heading>
                        GeeksforGeeks
                    </Media>
                    Reactstrap is a bootstrap based 
                    react UI library that is used to
                    make good looking webpages with 
                    its seamless and easy to use 
                    component.
                </Media>
            </Media>
        </div>
    );
}
  
export default gfg;

Output: 

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

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!




My Personal Notes arrow_drop_up
Recommended Articles
Page :