"Bootstrap Inputs - Material Design & Bootstrap 4"
Bootstrap 4.0.0 Snippet by MDBootstrap

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body class="hm-gradient"> <main> <!--MDB Inputs--> <div class="container mt-4"> <div class="text-center darken-grey-text mb-4"> <h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1> <a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a> </div> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12"> <div class="card"> <div class="card-body"> <h5 class="pt-3 pb-2 font-up deep-purple-text"><strong>Icon prefixes</strong></h5> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-6"> <div class="md-form"> <i class="fa fa-diamond prefix"></i> <input type="text" id="form2" class="form-control"> <label for="form2" class="">Example label</label> </div> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-6"> <div class="md-form"> <i class="fa fa-heart-o prefix"></i> <input type="text" id="form3" class="form-control"> <label for="form3">Example label</label> </div> </div> <!-- Grid column --> </div> <!-- Grid row --> <h5 class="pt-3 pb-2 font-up deep-purple-text"><strong>Error or Success Messages</strong></h5> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-6"> <div class="md-form"> <i class="fa fa-envelope prefix"></i> <input type="email" id="form992" class="form-control validate"> <label for="form992" data-error="wrong" data-success="right">Type your email</label> </div> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-6"> <div class="md-form"> <i class="fa fa-lock prefix"></i> <input type="password" id="form1092" class="form-control validate"> <label for="form1092" data-error="wrong" data-success="right">Type your password</label> </div> </div> <!-- Grid column --> </div> <!-- Grid row --> <h5 class="pt-3 pb-2 font-up deep-purple-text"><strong>Textarea</strong></h5> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-6"> <!--Basic textarea--> <div class="md-form"> <textarea type="text" id="form777" class="md-textarea"></textarea> <label for="form777">Basic textarea</label> </div> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-6"> <!--Textarea with icon prefix--> <div class="md-form"> <i class="fa fa-pencil prefix"></i> <textarea type="text" id="form878" class="md-textarea"></textarea> <label for="form878">Icon Prefix</label> </div> </div> <!-- Grid column --> </div> <!-- Grid row --> <!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-6 mx-auto"> <h5 class="pt-3 pb-2 font-up deep-purple-text"><strong>Basic input</strong></h5> <div class="md-form"> <input type="text" id="form1" class="form-control"> <label for="form1" class="">Example label</label> </div> <h5 class="pt-3 pb-2 font-up deep-purple-text"><strong>Small inputs</strong></h5> <div class="md-form form-sm"> <input type="text" id="form432" class="form-control"> <label for="form432" class="">Example label</label> </div> <div class="md-form form-sm"> <i class="fa fa-envelope prefix"></i> <input type="text" id="form656" class="form-control"> <label for="form656">Example label</label> </div> <h5 class="pt-3 pb-4 font-up deep-purple-text"><strong>Input with placeholder</strong></h5> <div class="md-form"> <input placeholder="Placeholder" type="text" id="form5" class="form-control"> <label for="form5">Example label</label> </div> <h5 class="pt-3 pb-4 font-up deep-purple-text"><strong>Prefilling Text Inputs</strong></h5> <div class="md-form"> <input value="John Doe" type="text" id="form6" class="form-control"> <label class="active" for="form6">Example label</label> </div> <h5 class="pt-3 pb-2 font-up deep-purple-text"><strong>Disabled Input</strong></h5> <div class="md-form"> <input type="text" id="form11" class="form-control" disabled> <label for="form11" class="disabled">Example label</label> </div> </div> <!-- Grid column --> </div> <!-- Grid row --> </div> </div> </div> <!-- Grid column --> </div> <!-- Grid row --> <hr class="my-4"> <div class="text-center darken-grey-text mb-4"> <h3 class="font-bold mb-3">Here you can find more Inputs:</h3> <a class="btn btn-danger" href="https://mdbootstrap.com/components/inputs/" target="_blank">Bootstrap Inputs</a> </div> </div> <!--MDB Inputs--> </main> <!-- MDB core JavaScript --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js"></script> </body>
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); @import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css); .hm-gradient { background-color: #eee; } .darken-grey-text { color: #2E2E2E; }

Related: See More

Argon Design System
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: