ReactJS MDBootstrap Colors Styles

0 0 3 minutes read

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">zambiatek</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>zambiatek</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>zambiatek</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>zambiatek</h2> 
      <h4>ReactJS MDBootstrap Colors Styles</h4> 
  
      <a href='https://www.zambiatek.com/' className='link-primary'> 
        Primary Coloured link 
      </a> 
      <br/> 
      <a href='https://www.zambiatek.com/' className='link-secondary'> 
        Secondary Coloured link 
      </a> 
      <br/> 
      <a href='https://www.zambiatek.com/' className='link-success'> 
        Success Coloured link 
      </a> 
      <br/> 
      <a href='https://www.zambiatek.com/' className='link-danger'> 
        Danger Coloured link 
      </a> 
      <br/> 
      <a href='https://www.zambiatek.com/' className='link-warning'> 
        Warning Coloured link 
      </a> 
      <br/> 
      <a href='https://www.zambiatek.com/' className='link-info'> 
        Info Coloured link 
      </a> 
      <br/> 
      <a href='https://www.zambiatek.com/' 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>zambiatek</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> 
  ); 
}

Output:

ReactJS MDBootstrap Colors Styles

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!