Sign in

Sign up

Bootstrap Edge Header

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 Bootstrap edge header example:

Basic example

Material Design Edge Headers

Example of Material Design Form

Basic Textbox
Textbox with icon
E-mail validation
Disabled field

Never submit your passwords here

body {
<!-- 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>

                <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>
                    <!-- /.Basic textbox -->

                    <h5 class="h5-responsive">Textbox with icon</h5>
                    <div class="md-form">
                        <i class="fa fa-user prefix"></i>
                        <input type="text" id="form2" class="form-control">
                        <label for="form2">Your name</label>

                    <!--Email validation-->
                    <h5 class="h5-responsive">E-mail validation</h5>
                    <div class="md-form">
                        <i class="fa 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>

                    <!--Textarea with icon-->
                    <h5 class="h5-responsive">Textarea</h5>
                    <div class="md-form">
                         <i class="fa fa-pencil prefix"></i>
                        <textarea type="text" id="form7" class="md-textarea"></textarea>
                        <label for="form7">Textarea</label>

                    <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 class="text-xs-left">
                        <button class="btn btn-primary">Submit</button>

                <div class="my-2">
                    <p style="font-weight:300;font-size:0.75rem">Never submit your passwords here</p>

            <!--Naked Form-->

<!-- /.Main Container -->