bootstrap4c-forms
Version:
Bootstrap 4 Component - Forms
102 lines (88 loc) • 3.8 kB
HTML
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/component-forms.css" rel="stylesheet">
</head>
<body class="h-100">
<div class="container h-100">
<div class="d-flex align-items-start flex-column h-100">
<div class="w-100 m-auto py-5">
<div class="form-group">
<label>Styled <code>select</code> element</label>
<select class="form-control form-control-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<hr class="my-5">
<div class="form-group form-group-floating-label">
<label>Floating label</label>
<input type="text" class="form-control" placeholder="Floating label">
<small class="form-text text-muted">Add class <code>form-group-floating-label</code> to the <code>form-group</code> wrapper.</small>
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with <code>type="search"</code></label>
<input type="search" class="form-control" placeholder="I'm a placeholder..." value="Press X to delete this value">
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with attribute <code>disabled</code> or <code>readonly</code></label>
<input type="text" class="form-control" placeholder="I'm disabled..." disabled>
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with class <code>form-control-xs</code></label>
<input type="text" class="form-control form-control-xs" placeholder="I'm a placeholder...">
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with class <code>form-control-xl</code></label>
<input type="text" class="form-control form-control-xl" placeholder="I'm a placeholder...">
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with class <code>form-control-icon-calendar</code></label>
<input type="text" class="form-control form-control-icon-calendar" placeholder="Pick a date...">
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with class <code>form-control-icon-time</code></label>
<input type="text" class="form-control form-control-icon-time" placeholder="Pick a time...">
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with class <code>form-control-icon-search</code></label>
<input type="text" class="form-control form-control-icon-search" placeholder="Search me...">
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with class <code>form-control-icon-lock</code></label>
<input type="text" class="form-control form-control-icon-lock" placeholder="I'm readonly with a lock icon..." readonly>
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with class <code>form-control-monospace</code></label>
<input type="text" class="form-control form-control-monospace form-control-monospace-focus" placeholder="________">
</div>
<hr class="my-5">
<div class="form-group">
<label>Input tag with class <code>form-control-monospace-focus</code></label>
<input type="text" class="form-control form-control-monospace-focus" placeholder="________" value="12345678">
</div>
<hr class="my-5">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="dist/js/component-forms.js"></script>
</body>
</html>