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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS