Bootstrap 4: basic form fields

by jorgeluis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="col-10">


<h2>
input
</h2>

<h3>
type="text"
</h3>
<div class="form-group col-10">
  <label for="name">Basic styling</label>
  <input class="form-control" type="text" id="name" placeholder="John Doe">
</div>

<div class="form-group col-10">
  <label for="name-fade">Hidden on focus</label>
  <input class="form-control fadeout" type="text" id="name-fade" placeholder="Jane Doe">
</div> 

<h3>
type="number"
</h3>
<div class="form-group col-3">
  <label for="number">Number</label>
  <input class="form-control" type="number" id="number" placeholder="44">
</div>


<hr class="p-4">
 
<h2>
  Select
</h2>

<div class="form-group col-10">
  <label for="optionSelect">Select label</label>
  <select id="optionSelect" class="form-control">
    <option selected="">Choose...</option>
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
    <option>Option Four</option>
  </select>
</div>



<hr class="p-4">
 

<h2>
  Checkboxes
</h2>
<h3>
  Default
</h3>
<div class="form-group col-10">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
    <label class="form-check-label" for="defaultCheck1">
      Default checkbox
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
    <label class="form-check-label" for="defaultCheck2">
      Disabled checkbox
    </label>
  </div>
</div>



<hr class="p-4">
 
<h3>
  Inline checkboxes
</h3>

<div class="form-group col-10">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
    <label class="form-check-label" for="inlineCheckbox1">1</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox2"...

CSS

/*
 * These extend or override the bootstrap defaults.
 * For production code, Bootstrap should be custom-built
 * with your own style using scss variables
 */

/* default placeholder style */
[placeholder]::-webkit-input-placeholder {
  color: #bbb;
  font-style: italic;
}
[placeholder]::-moz-placeholder {
  color: #bbb;
  font-style: italic;
}
[placeholder]::-ms-input-placeholder {
  color: #bbb;
  font-style: italic;
}


/* focus styling for placeholder (make it lighter) */
[placeholder]:focus::-webkit-input-placeholder {
  color: #ddd;
}
[placeholder]:focus::-moz-placeholder {
  color: #ddd;
}
[placeholder]:focus::-ms-input-placeholder {
  color: #ddd;
}


/* fadout placeholder on focus */
.fadeout:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.1s ease; 
  opacity: 0;
}
.fadeout:focus::-moz-placeholder {
  transition: opacity 0.5s 0.1s ease; 
  opacity: 0;
}
.fadeout:focus::-ms-input-placeholder {
  transition: opacity 0.5s 0.1s ease; 
  opacity: 0;
}