ReactJS MDBootstrap Header Component Last Updated : 11 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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 Header Component in ReactJS MDBootstrap. Header Component is used to add the header in the element.Syntax:<header> GeeksforGeeks</header>Creating React Application And Installing Module:Step 1: Create a React application using the following command.npx create-react-app foldernameStep 2: After creating your project folder i.e. foldername, move to it using the following command.cd foldernameStep 3: Install ReactJS MDBootstrap in your given directory.npm i mdb-ui-kitnpm i mdb-react-ui-kitProject 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 startExample 1: This is the basic example that shows how to use Header Component. App.js import React from "react"; export default function App() { return ( <div id="gfg"> <header> <div className='p-5 text-center bg-light'> <h2 className='mb-3'>React MDBootstrap Header</h2> <h4 className='mb-3'>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. </h4> </div> </header> </div> ); } Output:Example 2: In this example, we will know how to add an image in a header Component. App.js import React from "react"; export default function App() { return ( <div id="gfg"> <header> <div className='p-5 bg-danger'> <h2 className='mb-3'>React MDBootstrap Header</h2> <div className='p-5 text-center bg-image' style={{ width: '50px', backgroundImage: "url('https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg')" }} ></div> </div> </header> </div> ); } Output: Comment More infoAdvertise with us Next Article ReactJS MDBootstrap Header Component taran910 Follow Improve Article Tags : Web Technologies ReactJS MDBootstrap Similar Reads ReactJS MDBootstrap Footer Component 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 Footer Component in ReactJS MDBootstrap. Footer Component is used to add the footer in the element.Pr 2 min read ReactJS MDBootstrap Forms File Component 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 Forms File Component in ReactJS MDBootstrap. The file allows a user to select a file from their local 2 min read ReactJS MDBootstrap Card Component Reactstrap is a 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 Card Component in ReactJS MDBootstrap. A card is a flexible and extensible content container. It includes options for heade 3 min read ReactJS MDBootstrap Tabs Component 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 Tabs Component in ReactJS MDBootstrap. Tabs Component are used to improve website clarity and increas 3 min read ReactJS MDBootstrap Pills Component 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 Pills Component in ReactJS MDBootstrap. Pills Component are used to improve website clarity and incre 3 min read ReactJS MDBootstrap List Group Component MDBootstrap is a Material Design and bootstrap-based react 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 List Group Component in ReactJS MDBootstrap. List groups are a flexible and powerful component for displaying a 2 min read ReactJS MDBootstrap Range Component 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 Range Component in ReactJS MDBootstrap. The Range component allows users to make selections from a ra 2 min read ReactJS MDBootstrap Navbar Component 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 Navbar Component in ReactJS MDBootstrap. Navbar Component is used in every website to make it more us 2 min read ReactJS MDBootstrap Input Group Component 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 the Input Group Component in ReactJS MDBootstrap. Input Group allows a user to make a field in which 2 min read ReactJS MDBootstrap Switch Component 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 Switch Component in ReactJS MDBootstrap. The switch component is used to indicate the on/off state of 2 min read Like