Подробное описание и демонстрация работы блока «Формы» для сайта под номером №3 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
.form-bg{ background: #545454; } form .form-group{ background: #e5ffaf; padding: 30px; border-radius: 5px; position: relative; } form .form-group:before{ content: "Your Details"; padding: 5px; background: #74ab00; font-size: 14px; color: #fff; border-radius: 3px; position: absolute; top: -15px; left: 30px; } form .form-control{ background: #a4c859; margin-bottom: 10px; } form .inside{ margin-top: 40px; position: relative; border: 1px solid #cbcbcb; } form .inside:before{ content: "Your Preferences"; padding: 5px; background: #74ab00; border-radius: 3px; color: #fff; position: absolute; } form .checkbox, form .radio, form .dropdown{ margin: 5px 0; } form .checkbox label{ display: block; margin-bottom: 5px; } form .radio label{ display: inline-block; margin-right: 20px; } form .radio label:last-child{ margin-right: 0; } form .dropdown{ background:#fff; font-size: 14px; } form .btn{ background: #7fb113; color: #fff; border: none; } form .btn:focus{ outline: none; }
<div class="form-bg"> <div class="container-fluid"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <form> <div class="form-group"> <label class=" control-label">Name*</label> <input type="text" class="form-control" placeholder="Enter your name"> <label class=" control-label">Business Name</label> <input type="text" class="form-control"> <label class=" control-label">Email*</label> <input type="text" class="form-control"> <div class="row"> <div class="col-md-6"> <label class="control-label">Phone</label> <input type="text" class="form-control"> </div> <div class="col-md-6"> <label class="control-label">Mobile</label> <input type="text" class="form-control"> </div> </div> <div class="form-group inside "> <label>Checkboxes</label> <div class="checkbox"> <label> <input type="checkbox"> Item1 </label> <label> <input type="checkbox"> Item2 </label> <label> <input type="checkbox"> Item3 </label> <label> <input type="checkbox"> Item4 </label> </div> <label>Radio buttons</label> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">item1 </label> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked="">item2 </label> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" checked="">item3 </label> </div> <label>Dropdown Menu <select class="form-control dropdown"> <option>item1</option> <option>item2</option> <option>item3</option> <option>item4</option> </select> </label> </div> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> </div>