Edge Header

Bootstrap Edge Header

Bootstrap's edge header is a component unique to 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 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

Edit in sandbox 
        
            

        <!-- Purple Header -->
        <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">
                    <i class="fas fa-user prefix"></i>
                    <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">
                    <i class="fas fa-envelope prefix"></i>
                    <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">
                    <i class="fas fa-pencil-alt prefix"></i>
                    <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 class="btn btn-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 -->