React Bootstrap Edge Header

React Edge Header - Bootstrap 4 & Material Design

React edge header is a full-width block located on the top of a page as a part of a background for a card. It is a unique Material Design component

React Edge Header can be often spotted in Google products and pages.

It gives additional depth and meaning to the project by making it seem like the card floats above its background.

It's easy to see this effect in the following React Edge Header example:

Basic example

Material Design Edge Headers

Example of Material Design Form

Never submit your passwords here

      import React from "react";
      import { MDBFreeBird, MDBInput, MDBCol, MDBRow, MDBCardBody, MDBCardTitle, MDBBtn, MDBContainer, MDBEdgeHeader } from

      const EdgeHeaderPage = props => {
          return (
            <MDBContainer className="mt-3">
              <MDBEdgeHeader color="mdb-color darken-2"></MDBEdgeHeader>
                  <MDBCol md="8" lg="7" className="mx-auto float-none white z-depth-1 py-2 px-2">
                      <MDBCardTitle>Material Design Edge Headers</MDBCardTitle>
                      <p className="pb-4">Example of Material Design Form</p>
                        <MDBInput label="Your name" group type="text" icon="user" />
                        <MDBInput label="Your email" group type="email" icon="envelope" />
                        <MDBInput type="textarea" rows="2" label="Textarea" icon="pencil-alt" />
                        <MDBBtn color="mdb-color" className="text-xs-left">Submit</MDBBtn>
                      <div className="my-2">
                        <p style={{ fontWeight: "300", fontSize: "0.75rem" }}>Never submit your passwords here</p>

      export default EdgeHeaderPage;


React Edge Header - API

In this section you will find advanced information about the Edge Header component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Edge Header import statement

Chat is more like template which we prepared to use with structured data, for example from external API. There is a need to import few components to build chat window.

          import { MDBEdgeHeader } from "mdbreact";

MDBEdgeHeader - Properties

The table below shows the configuration options of the MDBEdgeHeader component.

Name Type Default Description Example
className string Adds a custom class <MDBEdgeHeader className="customClass">
color string deep-purple Defines MDBEdgeHeader color <MDBEdgeHeader className="customClass">
style object Defines custom styles <MDBEdgeHeader style={{width: "50%"}}>
tag object div Defines custom hmtl tag for a wrapper component <MDBEdgeHeader tag="section">