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">neveropen</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>neveropen</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>neveropen</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>neveropen</h2>       <h4>ReactJS MDBootstrap Colors Styles</h4>           Primary Coloured link       </a>       <br/>         Secondary Coloured link       </a>       <br/>         Success Coloured link       </a>       <br/>         Danger Coloured link       </a>       <br/>         Warning Coloured link       </a>       <br/>         Info Coloured link       </a>       <br/>         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>neveropen</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, neveropen 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!
