Angular Bootstrap Edge Header

Angular 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

Angular Bootstrap edge header is a component unique for Material Design, that 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 Angular Bootstrap edge header example:

Basic example

Material Design Edge Headers

Example of Material Design Form

Basic Textbox
Textbox with icon
E-mail validation
Textarea
Disabled field

Never submit your passwords here

        
            
          <section style="background-color: #ededed" class="pb-5">
            <div class="edge-header deep-purple"></div>
            <!-- Main Container -->
            <div class="container free-bird">
              <div class="row">
                <div class="col-md-8 col-lg-7 mx-auto float-none white z-depth-1 py-2 px-2">
                  <!--Naked Form-->
                  <div class="card-body">
                    <h2 class="h2-responsive"><strong>Material Design Edge Headers</strong></h2>
                    <p class="pb-4">Example of Material Design Form</p>
                    <!--Body-->
                    <form action="#">
                      <h5 class="h5-responsive">Basic Textbox</h5>
                      <!-- Basic textbox -->
                      <div class="md-form">
                        <input type="text" id="form1" class="form-control">
                        <label for="form1" class="">Example label</label>
                      </div>
                      <!-- /.Basic textbox -->
                      <h5 class="h5-responsive">Textbox with icon</h5>
                      <div class="md-form">
                        <mdb-icon fas icon="user" class="prefix"></mdb-icon>
                        <input type="text" id="form2" class="form-control">
                        <label for="form2">Your name</label>
                      </div>
                      <!--Email validation-->
                      <h5 class="h5-responsive">E-mail validation</h5>
                      <div class="md-form">
                        <mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
                        <input type="email" id="form9" class="form-control validate">
                        <label for="form9" data-error="wrong" data-success="right">Your email</label>
                      </div>
                      <!--Textarea with icon-->
                      <h5 class="h5-responsive">Textarea</h5>
                      <div class="md-form">
                        <mdb-icon fas icon="pencil-alt" class="prefix"></mdb-icon>
                        <textarea type="text" id="form7" class="md-textarea form-control" rows="2"></textarea>
                        <label for="form7">Textarea</label>
                      </div>
                      <h5 class="h5-responsive">Disabled field</h5>
                      <div class="md-form">
                        <input type="text" id="form11" class="form-control" disabled>
                        <label for="form11" class="disabled">Example label</label>
                      </div>
                      <div class="text-xs-left">
                        <button mdbBtn color="primary">Submit</button>
                      </div>
                    </form>
                    <div class="my-2">
                      <p style="font-weight:300;font-size:0.75rem">Never submit your passwords here</p>
                    </div>
                  </div>
                  <!--Naked Form-->
                </div>
              </div>
            </div>
            <!-- /.Main Container -->
          </section>

Angular Edge Header - API

In this section you will find informations about required modules for edge header component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard';
        
        
    
        
            
          import { WavesModule, ButtonsModule } from 'angular-bootstrap-md';
Import example Modules list