content logo

Bootstrap Forms:

Bootstrap Form with Linear Material Design

A form is a useful and commonly used element in designing a good user interface for your website. This handy tool allows you to gather the required information from your users easily. it also enables the users to send information to the server. This makes it much easier to contact you and send user complaints, etc directly to you rather than having to write an e-mail separately. These Bootstrap forms are literally the digital version of the physical forms we see on a piece of paper that you fill out before joining a library or signing up for something.

In this post, we are going to share a Bootstrap form template with you. This form has been created with the help of Bootstrap and Material Design. It has a nice minimalistic design that can catch anyone’s interest. This Bootstrap Material Design form is perfect for a sign-up page. Each entry is specified by an appropriate title, an input field and a line below it. the line features a beautiful purple and turquoise gradient colour. The hover effect removes the gradient form the line under the selected input field and turns it into a solid turquoise. You can use this CSS form for your own website without paying any fees whatsoever.

 

#

Bootstrap Form

#

CSS Form

#

Bootstrap Form Template

#

Material Design Form


<!-- This script got from frontendfreecode.com -->
<div class="wrapper">
    <div class="container">
        <h1>Form Title</h1>
        <form>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input type="email" class="form-control" id="inputEmail4">
                    <label for="inputEmail4">Email</label>
                    <div class="line"></div>
                </div>
                <div class="form-group col-md-6">
                    <input type="password" class="form-control" id="inputPassword4">
                    <label for="inputPassword4">Password</label>
                    <div class="line"></div>
                </div>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="inputAddress">
                <label for="inputAddress">Address</label>
                <div class="line"></div>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="inputAddress2">
                <label for="inputAddress2">Address 2</label>
                <div class="line"></div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input type="text" class="form-control" id="inputCity">
                    <label for="inputCity">City</label>
                    <div class="line"></div>
                </div>
                <div class="form-group col-md-4">
                    <select id="inputState" class="form-control">
                        <option selected>Choose...</option>
                        <option>State Option 1</option>
                        <option>State Option 2</option>
                    </select>
                    <label for="inputState">State</label>
                    <div class="line"></div>
                </div>
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" id="inputZip">
                    <label for="inputZip">Zip</label>
                    <div class="line"></div>
                </div>
            </div>
            <div class="form-group">
                <textarea class="form-control" rows="8"></textarea>
                <label>A little about yourself...</label>
                <div class="line"></div>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="gridCheck">
                    <label class="form-check-label" for="gridCheck">
                        Check me out
                    </label>
                </div>
            </div>
        </form>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
html, body {
  height: 100%;
}
.wrapper {
  background-color: #eee;
  min-height: 100%;
  padding: 60px 0;
}
* {
  font-family: "Montserrat", sans-serif;
}
body {
  color: #555555;
  font-size: 0.9rem;
}
h1 {
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #2f2f2f;
  text-align: center;
}
.form-row {
  margin-left: -15px;
  margin-right: -15px;
}
.form-row .form-group {
  padding: 15px 15px 0;
  align-self: flex-end;
}
.form-group {
  position: relative;
  padding-top: 15px;
  margin-bottom: 30px;
}
.form-control {
  border: 0;
  border-radius: 0;
  padding: 10px 10px;
  background-color: transparent;
  position: relative;
  z-index: 2;
  font-size: 0.9rem;
}
.form-control:not(textarea) {
  height: 44px;
}
.form-control + label {
  position: absolute;
  z-index: 1;
  top: 25px;
  margin: 0;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  left: 10px;
  right: 10px;
}
.form-control:focus {
  box-shadow: none;
  background-color: transparent;
}
.form-control:focus + label {
  color: #26C6DA;
}
.form-control:focus + label, .form-control.has-value + label {
  font-size: 0.75rem;
  top: 0;
}
.no-js .form-control + label {
  font-size: 0.75rem;
  top: 0;
}
.form-row .form-control + label {
  left: 25px;
  right: 25px;
}
.form-row .line {
  left: 15px;
  right: 15px;
}
.line {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #26C6DA;
  background-image: -o-linear-gradient(left, #26C6DA 0%, #673AB7 100%);
  background: linear-gradient(to right, #26C6DA 0%, #673AB7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$from", endColorstr="$to",GradientType=1 );
}
.line:after {
  content: "";
  height: 2px;
  position: absolute;
  display: block;
  background: #26C6DA;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
  transform-origin: 0 0;
}
.form-control:focus ~ .line:after {
  transform: scaleX(1);
}
select.form-control:not([size]):not([multiple]) {
  height: 44px;
}
function checkValue(element) {
  // check if the input has any value (if we've typed into it)
  if ($(element).val())
    $(element).addClass('has-value');
  else
    $(element).removeClass('has-value');
}
$(document).ready(function() {
  // Run on page load
  $('.form-control').each(function() {
    checkValue(this);
  })
  // Run on input exit
  $('.form-control').blur(function() {
    checkValue(this);
  });
});
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<style>
html, body {
  height: 100%;
}
.wrapper {
  background-color: #eee;
  min-height: 100%;
  padding: 60px 0;
}
* {
  font-family: "Montserrat", sans-serif;
}
body {
  color: #555555;
  font-size: 0.9rem;
}
h1 {
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #2f2f2f;
  text-align: center;
}
.form-row {
  margin-left: -15px;
  margin-right: -15px;
}
.form-row .form-group {
  padding: 15px 15px 0;
  align-self: flex-end;
}
.form-group {
  position: relative;
  padding-top: 15px;
  margin-bottom: 30px;
}
.form-control {
  border: 0;
  border-radius: 0;
  padding: 10px 10px;
  background-color: transparent;
  position: relative;
  z-index: 2;
  font-size: 0.9rem;
}
.form-control:not(textarea) {
  height: 44px;
}
.form-control + label {
  position: absolute;
  z-index: 1;
  top: 25px;
  margin: 0;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  left: 10px;
  right: 10px;
}
.form-control:focus {
  box-shadow: none;
  background-color: transparent;
}
.form-control:focus + label {
  color: #26C6DA;
}
.form-control:focus + label, .form-control.has-value + label {
  font-size: 0.75rem;
  top: 0;
}
.no-js .form-control + label {
  font-size: 0.75rem;
  top: 0;
}
.form-row .form-control + label {
  left: 25px;
  right: 25px;
}
.form-row .line {
  left: 15px;
  right: 15px;
}
.line {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #26C6DA;
  background-image: -o-linear-gradient(left, #26C6DA 0%, #673AB7 100%);
  background: linear-gradient(to right, #26C6DA 0%, #673AB7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$from", endColorstr="$to",GradientType=1 );
}
.line:after {
  content: "";
  height: 2px;
  position: absolute;
  display: block;
  background: #26C6DA;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
  transform-origin: 0 0;
}
.form-control:focus ~ .line:after {
  transform: scaleX(1);
}
select.form-control:not([size]):not([multiple]) {
  height: 44px;
}
</style>

</head>
<body>
<div class="wrapper">
    <div class="container">
        <h1>Form Title</h1>
        <form>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input type="email" class="form-control" id="inputEmail4">
                    <label for="inputEmail4">Email</label>
                    <div class="line"></div>
                </div>
                <div class="form-group col-md-6">
                    <input type="password" class="form-control" id="inputPassword4">
                    <label for="inputPassword4">Password</label>
                    <div class="line"></div>
                </div>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="inputAddress">
                <label for="inputAddress">Address</label>
                <div class="line"></div>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="inputAddress2">
                <label for="inputAddress2">Address 2</label>
                <div class="line"></div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input type="text" class="form-control" id="inputCity">
                    <label for="inputCity">City</label>
                    <div class="line"></div>
                </div>
                <div class="form-group col-md-4">
                    <select id="inputState" class="form-control">
                        <option selected>Choose...</option>
                        <option>State Option 1</option>
                        <option>State Option 2</option>
                    </select>
                    <label for="inputState">State</label>
                    <div class="line"></div>
                </div>
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" id="inputZip">
                    <label for="inputZip">Zip</label>
                    <div class="line"></div>
                </div>
            </div>
            <div class="form-group">
                <textarea class="form-control" rows="8"></textarea>
                <label>A little about yourself...</label>
                <div class="line"></div>
            </div>
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="gridCheck">
                    <label class="form-check-label" for="gridCheck">
                        Check me out
                    </label>
                </div>
            </div>
        </form>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
function checkValue(element) {
  // check if the input has any value (if we've typed into it)
  if ($(element).val())
    $(element).addClass('has-value');
  else
    $(element).removeClass('has-value');
}
$(document).ready(function() {
  // Run on page load
  $('.form-control').each(function() {
    checkValue(this);
  })
  // Run on input exit
  $('.form-control').blur(function() {
    checkValue(this);
  });
});
</script>

</body>
</html>
Preview