React Bootstrap Edge Header

React Edge Header - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Show code

        
            
        import React from "react";
        import {
          MDBFreeBird,
          MDBInput,
          MDBCol,
          MDBRow,
          MDBCardBody,
          MDBCardTitle,
          MDBBtn,
          MDBContainer,
          MDBEdgeHeader,
        } from "mdbreact";
        
        const EdgeHeaderPage = (props) => {
          return (
            <MDBContainer className="mt-3">
              <MDBEdgeHeader color="mdb-color darken-2"></MDBEdgeHeader>
              <MDBFreeBird>
                <MDBRow>
                  <MDBCol
                    md="8"
                    lg="7"
                    className="mx-auto float-none white z-depth-1 py-2 px-2"
                  >
                    <MDBCardBody>
                      <MDBCardTitle>Material Design Edge Headers</MDBCardTitle>
                      <p className="pb-4">Example of Material Design Form</p>
                      <form>
                        <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>
                      </form>
                      <div className="my-2">
                        <p style={{ fontWeight: "300", fontSize: "0.75rem" }}>
                          Never submit your passwords here
                        </p>
                      </div>
                    </MDBCardBody>
                  </MDBCol>
                </MDBRow>
              </MDBFreeBird>
            </MDBContainer>
          );
        };
        
        export default EdgeHeaderPage;

Introduction
Basic example

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.

Show code

javascript

        
            
          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">`