Bootstrap inputs

Bootstrap input is a special field which is used in order to receive data from the user. Used mostly in a variety of web-based forms.

All of them are created in beautiful, material design style.


Input fields

Basic example

                            
<div class="md-form">
    <input type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>
                            
                            

Small input

                            
<div class="md-form form-sm">
    <input type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>
                            
                            

Icon Prefixes

                
<div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input type="text" id="form2" class="form-control">
    <label for="form2">Example label</label>
</div>
                
            

Placeholder

                            
<div class="md-form">
    <input placeholder="Placeholder" type="text" id="form5" class="form-control">
    <label for="form5">Example label</label>
</div>
                            
                            

Prefilling Text Inputs

                            
<div class="md-form">
    <input value="John Doe" type="text" id="form6" class="form-control">
    <label class="active" for="form6">Example label</label>
</div>
                            
                            

Error or Success Messages

                            
<div class="md-form">
    <i class="fa fa-envelope prefix"></i>
    <input type="email" id="form9" class="form-control validate">
    <label for="form9" data-error="wrong" data-success="right">Type your email</label>
</div>

<div class="md-form">
    <i class="fa fa-lock prefix"></i>
    <input type="password" id="form10" class="form-control validate">
    <label for="form10" data-error="wrong" data-success="right">Type your password</label>
</div>
                            
                            

Disabled input

Add the disabled boolean attribute on an input to prevent user interactions.

To use not-allowed cursor add .disabled class to the label.

                            
<div class="md-form">
    <input type="text" id="form11" class="form-control" disabled>
    <label for="form11" class="disabled">Example label</label>
</div>
                            
                            

Form layouts

Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Inline forms:

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms behave differently:

  • Controls are display: inline-block to provide alignment control via vertical-align and margin.
  • Controls receive width: auto to override the Bootstrap default width: 100%.
  • Controls only appear inline in viewports that are at least 768px wide to account for narrow viewports on mobile devices.

Because of this, you may need to address the width and alignment of individual form controls manually. Lastly, as shown below, you should always include a <label> with each form control.

                            
<form class="form-inline">

    <div class="md-form form-group">
        <i class="fa fa-envelope prefix"></i>
        <input type="email" id="form91" class="form-control validate">
        <label for="form91" data-error="wrong" data-success="right">Type your email</label>
    </div>

    <div class="md-form form-group">
        <i class="fa fa-lock prefix"></i>
        <input type="password" id="form92" class="form-control validate">
        <label for="form92" data-error="wrong" data-success="right">Type your password</label>
    </div>

    <div class="md-form form-group">
        <a class="btn btn-primary btn-lg">Login</a>
    </div>

</form>
                            
                            

Using the Grid

For more structured form layouts, you can utilize Bootstrap’s predefined grid classes (or mixins). Add the .row class to form groups and use the .col-* classes to specify the width of your labels and controls.

                            
<form>
    <!--First row-->
    <div class="row">
        <!--First column-->
        <div class="col-md-6">
            <div class="md-form">
                <i class="fa fa-envelope prefix"></i>
                <input type="email" id="form81" class="form-control validate">
                <label for="form81" data-error="wrong" data-success="right">Type your email</label>
            </div>
        </div>

        <!--Second column-->
        <div class="col-md-6">
            <div class="md-form">
                <i class="fa fa-lock prefix"></i>
                <input type="password" id="form82" class="form-control validate">
                <label for="form82" data-error="wrong" data-success="right">Type your password</label>
            </div>
        </div>
    </div>
    <!--/.First row-->

    <!--Second row-->
    <div class="row">
        <!--First column-->
        <div class="col-md-12">

            <div class="md-form">
                <textarea type="text" id="form76" class="md-textarea"></textarea>
                <label for="form76">Basic textarea</label>
            </div>

        </div>
    </div>
    <!--/.Second row-->

    <!--Third row-->
    <div class="row">

        <!--First column-->
        <div class="col-md-4">
            <div class="md-form">
                <input type="text" id="form41" class="form-control">
                <label for="form41" class="">Example label</label>
            </div>
        </div>

        <!--Second column-->
        <div class="col-md-4">
            <div class="md-form">
                <input type="text" id="form51" class="form-control">
                <label for="form51" class="">Example label</label>
            </div>
        </div>

        <!--Third column-->
        <div class="col-md-4">
            <div class="md-form">
                <input type="text" id="form61" class="form-control">
                <label for="form61" class="">Example label</label>
            </div>
        </div>

    </div>
    <!--/.Third row-->
</form>
                            
                            

Textarea

                
<!--Basic textarea-->
<div class="md-form">
    <textarea type="text" id="form7" class="md-textarea"></textarea>
    <label for="form7">Basic textarea</label>
</div>

<!--Textarea with icon prefix-->
<div class="md-form">
    <i class="fa fa-pencil prefix"></i>
    <textarea type="text" id="form8" class="md-textarea"></textarea>
    <label for="form8">Icon Prefix</label>
</div>
                
            

Checkboxes MDB Pro component

Basic examples

                            
<div class="form-group">
    <input type="checkbox" id="checkbox1">
    <label for="checkbox1">Classic checkbox</label>
</div>

<div class="form-group">
    <input type="checkbox" class="filled-in" id="checkbox2">
    <label for="checkbox2">Filled-in checkbox</label>
</div>
                            
                            

Disabled checkboxes

                            
<div class="form-group">
    <input type="checkbox" id="checkbox3" disabled>
    <label for="checkbox3" class="disabled">Classic checkbox</label>
</div>

<div class="form-group">
    <input type="checkbox" class="filled-in" id="checkbox4" disabled>
    <label for="checkbox4" class="disabled">Filled-in checkbox</label>
</div>
                            
                            

Inline checkboxes

                            
<form class="form-inline">

    <div class="form-group">
        <input type="checkbox" id="checkbox11">
        <label for="checkbox11">Classic checkbox</label>
    </div>

    <div class="form-group">
        <input type="checkbox" class="filled-in" id="checkbox22">
        <label for="checkbox22">Filled-in checkbox</label>
    </div>

    <div class="form-group">
        <input type="checkbox" id="checkbox13">
        <label for="checkbox13">Classic checkbox</label>
    </div>

</form>
                            
                            

Radio buttons MDB Pro component

Basic examples

                            
<div class="form-group">
    <input name="group1" type="radio" id="radio1">
    <label for="radio1">Option 1</label>
</div>

<div class="form-group">
    <input name="group1" type="radio" id="radio2">
    <label for="radio2">Option 2</label>
</div>

<div class="form-group">
    <input name="group1" type="radio" id="radio3">
    <label for="radio3">Option 3</label>
</div>
                            
                            

Radio buttons with gap

                            
<div class="form-group">
    <input name="group2" type="radio" class="with-gap" id="radio4">
    <label for="radio4">Option 1</label>
</div>

<div class="form-group">
    <input name="group2" type="radio" class="with-gap" id="radio5">
    <label for="radio5">Option 2</label>
</div>

<div class="form-group">
    <input name="group2" type="radio" class="with-gap" id="radio6">
    <label for="radio6">Option 3</label>
</div>
                            
                            

Inline radio buttons

                            
<form class="form-inline">

    <div class="form-group">
        <input name="group1" type="radio" id="radio11" checked="checked">
        <label for="radio11">Option 1</label>
    </div>

    <div class="form-group">
        <input name="group1" type="radio" id="radio21">
        <label for="radio21">Option 2</label>
    </div>

    <div class="form-group">
        <input name="group1" type="radio" id="radio31">
        <label for="radio31">Option 3</label>
    </div>

</form>
                            
                            

Switch MDB Pro component


Disabled:
                
<!-- Switch -->
  <div class="switch">
    <label>
      Off
      <input type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>

  <!-- Disabled Switch -->
  <div class="switch">
    <label>
      Off
      <input disabled type="checkbox">
      <span class="lever"></span>
      On
    </label>
  </div>
                
            

File input MDB Pro component

Basic example

Choose file
                            
<form>
    <div class="file-field">
        <div class="btn btn-primary btn-sm">
            <span>Choose file</span>
            <input type="file">
        </div>
        <div class="file-path-wrapper">
           <input class="file-path validate" type="text" placeholder="Upload your file">
        </div>
    </div>
</form>
                            
                            

Multiple files

For uploading multiple files add a multiple attribute to the input

Choose files
                            
<form action="#">
    <div class="file-field">
        <div class="btn btn-primary btn-sm">
            <span>Choose files</span>
            <input type="file" multiple>
        </div>
        <div class="file-path-wrapper">
            <input class="file-path validate" type="text" placeholder="Upload one or more files">
        </div>
    </div>
</form>
                            
                            

Range MDB Pro component

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100.

                        
<form class="range-field">
    <input type="range" min="0" max="100" />
</form>
                        
                        

Character counter

Use a character counter in fields where a character restriction is in place.

Input field

                           
<div class="md-form">
    <input id="input-char-counter" type="text" length="10">
    <label for="input-char-counter">Input text</label>
</div>
                           
                           

Textarea

                           
<div class="md-form">
    <textarea id="textarea-char-counter" class="md-textarea" length="120"></textarea>
    <label for="textarea-char-counter">Type your text</label>
</div>
                           
                           

Optional initialization

If you are adding character counter dynamically, you can use the function below to initialize it.


$(document).ready(function() {
    $('input#input_text, textarea#textarea1').characterCounter();
});

Autocomplete MDB Pro component


<div class="md-form">
    <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete">
    <button class="mdb-autocomplete-clear">
        <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            <path d="M0 0h24v24H0z" fill="none" />
        </svg>
    </button>
    <label for="form-autocomplete" class="active">What is your favorite US state?</label>
</div>
                
var states = [
    "Alabama",
    "Alaska",
    "Arizona",
    "Arkansas",
    "California",
    "Colorado",
    "Connecticut",
    "Delaware",
    "Florida",
    "Georgia",
    "Hawaii",
    "Idaho",
    "Illnois",
    "Indiana",
    "Iowa",
    "Kansas",
    "Kentucky",
    "Louisiana",
    "Maine",
    "Maryland",
    "Massachusetts",
    "Michigan",
    "Minnesota",
    "Mississippi",
    "Missouri",
    "Montana",
    "Nebraska",
    "Nevada",
    "New Hampshire",
    "New Jersey",
    "New Mexico",
    "New York",
    "North Carolina",
    "North Dakota",
    "Ohio",
    "Oklahoma",
    "Oregon",
    "Pennsylvania",
    "Rhode Island",
    "South Carolina",
    "South Dakota",
    "Tennessee",
    "Texas",
    "Utah",
    "Vermont",
    "Virginia",
    "Washington",
    "West Virginia",
    "Wisconsin",
    "Wyoming"
];

$('#form-autocomplete').mdb_autocomplete({
    data: states
});
                
            

Alternate Version

                        
<div class="md-form">
    <input type="text" class="input-alternate" placeholder="John Doe">
</div>