ReactJS MDBootstrap Colors 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 Colors Styles in ReactJS MDBootstrap. Colors Styles is used to set the colors for the component.

Syntax:

<div className="bg-primary">GeeksforGeeks</div>

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

App.js

import React from "react";
import { MDBCol, MDBRow, MDBContainer } from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Colors Styles</h4>
  
      <MDBRow className='mb-4'>
        <MDBCol>
          <MDBContainer className='text-light example-square 
                                   rounded bg-primary'>
          Primary Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='text-light example-square 
                                   rounded bg-secondary'>
          Secondary Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='text-light example-square 
                                   rounded bg-success'>
          Success Color</MDBContainer>
        </MDBCol>
      </MDBRow>
  
      <MDBRow className='mb-4'>
        <MDBCol>
          <MDBContainer className='text-light example-square 
                                   rounded bg-danger'>
          Danger Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='text-light example-square
                                   rounded bg-warning'>
          Warning Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='text-light example-square
                                   rounded bg-info'>
          Info Color</MDBContainer>
        </MDBCol>
      </MDBRow>
  
      <MDBRow className='mb-4'>
        <MDBCol>
          <MDBContainer className='text-light example-square
                                   rounded bg-dark'>
          Dark Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='example-square
                                   rounded bg-light'>
          Light Color</MDBContainer>
        </MDBCol>
      </MDBRow>
    </div>
  
  );
}

Output:

ReactJS MDBootstrap Colors Styles

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

App.js

import React from "react";
import { MDBCol, MDBRow, MDBContainer } from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Colors Styles</h4>
  
      <MDBRow className='mb-4'>
        <MDBCol>
          <MDBContainer className='text-primary 
                                   example-square rounded'>
          Primary Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='text-secondary 
                                   example-square rounded'>
          Secondary Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='text-success 
                                   example-square rounded'>
          Success Color</MDBContainer>
        </MDBCol>
      </MDBRow>
  
      <MDBRow className='mb-4'>
        <MDBCol>
          <MDBContainer className='text-danger 
                                   example-square rounded'>
          Danger Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='text-warning 
                                   example-square rounded'>
          Warning Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='text-info 
                                   example-square rounded'>
          Info Color</MDBContainer>
        </MDBCol>
      </MDBRow>
  
      <MDBRow className='mb-4'>
        <MDBCol>
          <MDBContainer className='text-dark 
                                   example-square rounded'>
          Dark Color</MDBContainer>
        </MDBCol>
        <MDBCol>
          <MDBContainer className='text-light 
                                   example-square rounded bg-dark'>
          Light Color</MDBContainer>
        </MDBCol>
      </MDBRow>
    </div>
  
  );
}

Output:

ReactJS MDBootstrap Colors Styles

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

App.js

import React from "react";
import { MDBCol, MDBRow, MDBContainer } from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Colors Styles</h4>
  
      <a href='https://www.geeksforgeeks.org/' className='link-primary'>
        Primary Coloured link
      </a>
      <br/>
      <a href='https://www.geeksforgeeks.org/' className='link-secondary'>
        Secondary Coloured link
      </a>
      <br/>
      <a href='https://www.geeksforgeeks.org/' className='link-success'>
        Success Coloured link
      </a>
      <br/>
      <a href='https://www.geeksforgeeks.org/' className='link-danger'>
        Danger Coloured link
      </a>
      <br/>
      <a href='https://www.geeksforgeeks.org/' className='link-warning'>
        Warning Coloured link
      </a>
      <br/>
      <a href='https://www.geeksforgeeks.org/' className='link-info'>
        Info Coloured link
      </a>
      <br/>
      <a href='https://www.geeksforgeeks.org/' className='link-dark'>
        Dark Coloured link
      </a>
    </div>
  
  );
}

Output:

ReactJS MDBootstrap Colors Styles

Example 4: In this example, we will know how to add Components in Colors Styles.

App.js

import React from "react";
import { MDBBadge } from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Colors Styles</h4>
  
      <MDBBadge color='primary'>Primary Badge</MDBBadge>
      <MDBBadge color='secondary' className='mx-1'>
        Secondary Badge
      </MDBBadge>
      <MDBBadge color='success'>Success Badge</MDBBadge>
      <MDBBadge color='danger' className='mx-1'>
        Danger Badge
      </MDBBadge>
      <MDBBadge color='warning'>Warning Badge</MDBBadge>
      <MDBBadge color='info' className='mx-1'>
        Info Badge
      </MDBBadge>
      <MDBBadge color='light' className="text-dark">
        Light Badge
      </MDBBadge>
      <MDBBadge color='dark' className='ms-1'>
        Dark Badge
      </MDBBadge>
    </div>
  );
}