Form Bootstrap 4 Alpha 4 / Формы / Сниппеты Bootstrap

Каталог: Сниппеты Bootstrap

Категория: Формы

Для Bootstrap: 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress

Язык: Английский

Уникальный ID: 1446

Количество символов:

Посмотрели: 11930 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 3.9 / 5 - 15 голосов

Тип лицензии: CC BY 4.0

Авторство: https://goo.gl/ZhyHHB

Информация: Пользователям

Информация: Правообладателям

Теги: alpha 4, Snippet, bootstrap 4, формы, Form, сниппет, Bootstrap, Responsive, html, адаптивные

Поделился: BootstrapТема

Добавлено: 2016-12-01 в 16:01

Метка: 1480597295

⇄ ⇅

.input-group .has-float-label {
 display: table-cell; }
 .input-group .has-float-label .form-control {
 border-radius: 0.25rem; }
 .input-group .has-float-label:not(:last-child) .form-control {
 border-bottom-right-radius: 0;
 border-top-right-radius: 0; }
 .input-group .has-float-label:not(:first-child) .form-control {
 border-bottom-left-radius: 0;
 border-top-left-radius: 0;
 margin-left: -1px; }
</style>

<div class="p-x-1 p-y-3">
 <form class="card card-block m-x-auto bg-faded form-width">
 <legend class="m-b-1 text-xs-center">Регистрация</legend>
 <div class="form-group input-group">
 <span class="has-float-label">
 <input class="form-control" id="first" type="text" placeholder="Имя"/>
 <label for="first">Имя</label>
 </span>
 <span class="has-float-label">
 <input class="form-control" id="last" type="text" placeholder="Фамилия"/>
 <label for="last">Фамилия</label>
 </span>
 </div>
 <div class="form-group input-group">
 <span class="input-group-addon">@</span>
 <span class="has-float-label">
 <input class="form-control" id="email" type="email" placeholder="name@example.com"/>
 <label for="email">E-mail</label>
 </span>
 </div>
 <div class="form-group has-float-label">
 <input class="form-control" id="password" type="password" placeholder="••••••••"/>
 <label for="password">Пароль</label>
 </div>
 <div class="form-group has-float-label">
 <input class="form-control" id="password" type="password" placeholder="••••••••"/>
 <label for="password">Пароль повторно</label>
 </div>
 <div class="form-group has-float-label">
 <select class="form-control custom-select" id="country">
 <option selected>Россия</option>
 <option>Казахстан</option>
 <option>Белоруссия</option>
 </select>
 <label for="country">Страна</label>
 </div>
 <div class="form-group">
 <label class="custom-control custom-checkbox">
 <input class="custom-control-input" type="checkbox"/>
 <span class="custom-control-indicator"></span>
 <span class="custom-control-description">Получать новости</span>
 </label>
 </div>
 <div class="text-xs-center">
 <button class="btn btn-block btn-primary" type="submit">Регистрация</button>
 </div>
 </form>
</div>

BootstrapTema

Form Bootstrap 4 Alpha 4

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0