Bootstrap Inputs

by CreativeTim

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet">
<div class="section section-basic" id="basic-elements">
  <div class="container">
    <div id="inputs">
      <h4>Inputs</h4>
      <p class="category">Form Controls</p>
      <div class="row">
        <div class="col-sm-6 col-lg-3">
          <div class="form-group">
            <input type="text" value="" placeholder="Regular" class="form-control">
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="form-group has-success">
            <input type="text" value="Success" class="form-control form-control-success">
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="form-group has-danger">
            <input type="email" value="Error Input" class="form-control form-control-danger">
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fa fa-user-circle"></i></span>
            </div>
            <input type="text" class="form-control" placeholder="Left Font Awesome Icon">
          </div>
        </div>
        <div class="col-sm-6 col-lg-3">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Right Nucleo Icon">
            <div class="input-group-append">
              <span class="input-group-text"><i class="now-ui-icons users_single-02"></i></span>
            </div>
          </div>
        </div>
      </div>
 ...

CSS

button,
input {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

body {
  color: #2c2c2c;
  font-size: 14px;
  font-family: Montserrat, Helvetica Neue, Arial, sans-serif;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: 'Nucleo Outline';
  src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
  src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype");
  src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
  font-weight: normal;
  font-style: normal;
}

.form-control::-moz-placeholder {
  color: #888888;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.form-control:-moz-placeholder {
  color: #888888;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.form-control::-webkit-input-placeholder {
  color: #888888;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.form-control:-ms-input-placeholder {
  color: #888888;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.form-control {
  background-color: transparent;
  border: 1px solid #E3E3E3;
  border-radius: 30px;
  color: #2c2c2c;
  line-height: normal;
  font-size: 0.8571em;
  -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.has-success .form-control {
  border-color: #E3E3E3;
}

.form-control:focus {
 ...

JavaScript

$('.form-control').on("focus", function() {
    $(this).parent('.input-group').addClass("input-group-focus");
  }).on("blur", function() {
    $(this).parent(".input-group").removeClass("input-group-focus");
  });