Examples
Default styling
.has-success
Danger is great for when there’s a blocking or required field. A user must fill in this field properly to submit the form.
.has-warning
Warning works well for input values that are in progress, like password strength, or soft validation before a user attempts to submit a form.
.has-danger
Danger is great for when there’s a blocking or required field. A user must fill in this field properly to submit the form.
Markup: components/atoms/forms/forms-custom.twig
<form>
<div class="form-group [modifier class]">
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control " id="inputEmail3" placeholder="Email">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group [modifier class]">
<label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10 clearfix">
<input type="password" class="form-control " id="inputPassword3" placeholder="Password">
<p id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</p>
</div>
</div>
<div class="form-group [modifier class]">
<label class="col-sm-2">Radios</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gridRadios" id="gridRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> Option three is disabled
</label>
</div>
<div class="radio" >
<label class="custom-control custom-radio">
<input id="radio1" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Toggle this custom radio</span>
</label>
<label class="custom-control custom-radio">
<input id="radio2" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Or toggle this other custom radio</span>
</label>
</div>
</div>
</div>
<div class="form-group [modifier class]">
<label class="col-sm-2">Checkbox</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
<div class="form-group [modifier class]">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Sign in</button>
</div>
</div>
<div class="form-group [modifier class]">
<label>Range input</label>
<input id="range" type="range" min="0" max="25" step="0.02">
</div>
<div class="form-group [modifier class]">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" disabled="disabled">
</div>
<div class="form-group [modifier class]">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="form-group [modifier class]">
<label class="custom-file">
<input type="file" id="file" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
</div>
</form>
Source:
components/atoms/forms/_forms.scss
, line 35