Bootstrap 4 forms

Bootstrap 4 forms

Learn how to work with Bootstrap 4 Forms

Bootstrap 4 Form

Bootstrap4 Forms can be created using multiple layouts, form controls, and multiple types of custom components to create wide variety of forms.

To Create a good form to meet all user requirements bootstrap provides multiple reusable components like dropdowns, input groups, navigation, iconography, navigation, alerts etc.

Bootstrap 4 Form Layout

Bootstrap 4 Inputs

Forms are created are combining mutiple components, the class .form-group is used to structure forms by grouping components together within one layout.

<form>
<!-- class "form-group" to create a group -->
  <fieldset class="form-group">
    <label for="demoInput">Name</label>
    <input type="text" class="form-control" id="demoInput" placeholder="first name">
  </fieldset>
  
  <fieldset class="form-group">
    <label for="demoInput2">Surname</label>
    <input type="text" class="form-control" id="demoInput2" placeholder="surname">
  </fieldset>
</form>

Bootstrap 4 Inline Forms

Bootstrap 4 Inline Form

To Display multiple form controls in a single line use class .form-inline, the form components are inline only until the screen width is atleast 768px.

<!-- class="form-inline" to create inline components -->
<form class="form-inline">
  <div class="form-group">
    <label for="demoemail2">Email</label>
    <input type="email" class="form-control" id="demoemail2" placeholder="[email protected]">
  </div>
  
  <div class="form-group">
    <label for="demoemail3">Password</label>
    <input type="password" class="form-control" id="demoemail3" placeholder="Alleast 8 letters">
  </div>
  
  <button type="submit" class="btn btn-success">Sign In</button>
</form>

 

Bootstrap 4 Inline form Hidden Labels

Bootstrap 4 Inline Form Hidden Lebel

To Create Inline Forms with Hidden labels use class .sr-only within elements label

<form class="form-inline">
  <div class="form-group">
  <!-- class "sr-only" used to hide content -->
    <label class="sr-only" for="Amount"> Amount (in US dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="Amount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-success">Pay </button>
</form>

Bootstrap 4 Form Using Grid Layout For Structuring

To Create a structured layout use grid classes, .row and .col-* to set the width of rows and columns respectively.

Bootstrap 4

<form>
<!-- class="row" -->
  <div class="form-group row">
    <label for="demoEmail" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10"> <!-- class="col-sm-10" -->
      <input type="email" class="form-control" id="demoEmail" placeholder="Email">
    </div>
  </div>
 
</form>

 

Bootstrap 4 Checkbox and Radio Buttons

 

Bootstrap 4

A Checkbox is used to select multiple options by clicking on them, while radio selects one from multiple options, creating them are similar to HTML5 elements.

A Checkbox can be disabled using class .disabled within the parent element.

<!-- class="checkbox"-->
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
     Apple
  </label>
</div>

<hr>
<!-- class="radio"-->
<div class="radio">
  <label>
    <input type="radio" name="demoRadios" id="demoRadios1" value="option1" checked>
    Credit Card
  </label>
</div>

Bootstrap 4 Inline Checkbox and Radio

Bootstrap 4

<!-- class="checkbox-inline" -->
<label class="checkbox-inline">
  <input type="checkbox" id="demo" value="option1"> Apples 
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="demo2" value="option2"> Orange
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="demo3" value="option3"> Pineapple
</label>

<hr>
<!-- class="radio-inline" -->
<label class="radio-inline">
  <input type="radio" name="radioselect" id="radio1" value="option1"> venus
</label>
<label class="radio-inline">
  <input type="radio" name="radioselect" id="radio2" value="option2"> mars
</label>
<label class="radio-inline">
  <input type="radio" name="radioselect" id="radio3" value="option3"> earth
</label>

Bootstrap 4  Static Controls

To Create a static plain text next to a form field, use class .form-control-static

To Create an inline Control use class .form-inline

<!-- class="form-control-static" to create a static input -->
    <p class="form-control-static">[email protected]</p>

 

Bootstrap 4 Disabled States

Bootstrap 4

To prevent user interaction with the form elements use boolean attribute .disabled. A not allowed symbol is displayed when mouse pointer hovers over disabled elements.

Using the attribute disabled with element fieldset, disables all form controls within it.

<form>
<!-- Attribute "disabled" to disable complete fieldset-->
  <fieldset disabled>
    <div class="form-group">
      <label for="disabled1">Name</label>
      <input type="text" id="disabled1" class="form-control" placeholder="name">
    </div>
</fieldset>
</form>

Bootstrap 4 From Readonly Input

Bootstrap 4 Read Only Input

To prevent any manipulation with input controls use attribute .readonly, the readonly inputs appears lighter than default.

<!-- attribute readonly -->
<input class="form-control" type="text" placeholder="Readonly input here.." readonly>

 

Bootstrap 4 Form Input Control Sizing

Bootstrap 4

The height of the controls can be set using class .form-control-lg and width is set using class .col-lg-*

<!-- class="form-control-lg" --> 
<input class="form-control form-control-lg" type="text" placeholder=".input-lg">
<!-- default --> 
<input class="form-control" type="text" placeholder="Default input">
<!-- class="form-control-sm" --> 
<input class="form-control form-control-sm" type="text" placeholder=".input-sm">

 

Bootstrap 4 Forms Column Sizing

Bootstrap 4 Form

To wrap inputs within grid and columns use class .col-xs-* , the number denotes the number of cells the column would span.

<div class="row">
  <div class="col-xs-2"> <!-- 2 cols -->
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3"> <!-- 3 cols -->
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4"> <!-- 4 cols -->
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

 

Bootstrap 4 Forms Help and Hint Text

To create help and hint text use class .text-muted with any kind of text elements.

<!-- class="text-muted" with element <small> -->
<small class="text-muted">
  Keep Calm and Carry On
</small>
<br>
<!-- class="text muted" using element <small> -->
<p class="text-muted">
  Keep Calm and Carry On
</p>

 

Bootstrap 4 Form Validation

Bootstrap 4 Form Validation

Bootstrap 4 provides validation support using class .has-error , .has-warning or .has-success for states error, warning and success respectively.

All kinds of control labels also inherit the validation styles.

 

<!-- class="has-success" -->
<div class="form-group has-success">
  <label class="control-label" for="demoSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="demoSuccess1">
</div>
<!-- class="has-warning" -->
<div class="form-group has-warning">
  <label class="control-label" for="demoWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="demoWarning1">
</div>
<!-- class="has-error" -->
<div class="form-group has-error">
  <label class="control-label" for="demoError1">Input with error</label>
  <input type="text" class="form-control form-control-error" id="demoError1">
</div>
<!-- class="has-success" -->
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="success" value="value1">
      Checkbox with success
    </label>
  </div>
</div>
<!-- class="has-warning" -->
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="warning" value="value1">
      Checkbox with warning
    </label>
  </div>
</div>
<!-- class="has-error" -->
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="error" value="value1">
      Checkbox with error
    </label>
  </div>
</div>

 

Bootstrap 4 File Browser

Bootstrap 4 File Browser

A File Browser is created using the type file, additional labels and buttons based on requirements.

 

<label class="file">
   <!-- type="file" to create file browser -->
  <input type="file" id="file" />
  <span class="file-custom"></span>
</label>

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman