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/
