ReactJS MDBootstrap Typography Styles

MDBootstrap is a Material Design and 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 know how to use Typography Styles in ReactJS MDBootstrap. Typography Styles is used to add different kinds of the text elements like heading, Abbreviations, Blockquotes, etc.

Syntax:

<MDBTypography variant="h1">GeeksforGeeks</MDBTypography>

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. foldername, move to it using the following command.

cd foldername

Step 3: Install ReactJS MDBootstrap in your given directory.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

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 Typography Styles.

App.js

import React from "react";
import { MDBTypography } from "mdb-react-ui-kit";

export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Typography Styles</h4>

      <br/>
      <MDBTypography variant='h1'>Heading H1</MDBTypography>
      <hr />
      <MDBTypography variant='h2'>Heading H2</MDBTypography>
      <hr />
      <MDBTypography variant='h3'>Heading H3</MDBTypography>
      <hr />
      <MDBTypography variant='h4'>Heading H4</MDBTypography>
      <hr />
      <MDBTypography variant='h5'>Heading H5</MDBTypography>
      <hr />
      <MDBTypography variant='h6'>Heading H6</MDBTypography>

    </div>

  );
}

Output:

ReactJS MDBootstrap Typography Styles

Example 2: In this example, we will know how to add leads in a Typography Styles.

App.js

import React from "react";
import { MDBTypography } from "mdb-react-ui-kit";

export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Typography Styles</h4>

      <br/>
      <MDBTypography className='lead mb-0'>MDBootstrap is a
      Material Design and bootstrap-based react UI library
      <br/> that is used to make good looking webpages with its
      seamless and easy-to-use component.</MDBTypography>
    </div>

  );
}

Output:

ReactJS MDBootstrap Typography Styles

Example 3: In this example, we will know how to add blockquotes in a Typography Style.

App.js

import React from "react";
import { MDBTypography } from "mdb-react-ui-kit";

export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Typography Styles</h4>

      <br/>
      <MDBTypography blockquote >
      <p>MDBootstrap is a Material Design and bootstrap-based
         react UI library that is <br/> used to make good
         looking webpages with its seamless and
         easy-to-use component.</p>
      </MDBTypography>
    </div>
  );
}

Output:

ReactJS MDBootstrap Typography Styles

Reference: https://mdbootstrap.com/docs/b5/react/content-styles/typography/