content logo
Bootstrap Forms: Bootstrap Form with Material Design (MD)

Material Design is a bootstrap class used to make the HTML forms interesting, stylish and beautiful with great effects for the HTML Elements. So don't hesitate to add this great feature to your forms. SImply follow the code example below and make your design.

#Bootstrap Forms Effect #Bootstrap Form Stylish #Material Design CSS Forms
<!-- this script got from www.frontendfreecode.com -->
<div class="container-fluid"> <div class="bs-docs-section"> <div class="row"> <div class="col-lg-6"> <div class="well bs-component"> <form class="form-horizontal"> <fieldset> <legend>Legend</legend> <div class="form-group"> <label for="inputEmail" class="col-lg-2 control-label">Email</label> <div class="col-lg-10"> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-lg-2 control-label">Password</label> <div class="col-lg-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> <div class="checkbox"> <label> <input type="checkbox"><span class="checkbox-material"><span class="check"></span></span> Checkbox </label> </div> <br> <div class="togglebutton"> <label> <input type="checkbox" checked=""><span class="toggle"></span> Toggle button </label> </div> </div> </div> <div class="form-group"> <label for="inputFile" class="col-lg-2 control-label">File</label> <div class="col-lg-10"> <div class="form-control-wrapper fileinput"> <input type="text" readonly="" class="form-control empty"> <input type="file" id="inputFile" multiple=""> <div class="floating-label">Browse...</div><span class="material-input"></span></div> </div> </div> <div class="form-group"> <label for="textArea" class="col-lg-2 control-label">Textarea</label> <div class="col-lg-10"> <textarea class="form-control" rows="3" id="textArea"></textarea> <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label">Radios</label> <div class="col-lg-10"> <div class="radio radio-primary"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""><span class="circle"></span><span class="check"></span> Option one is this </label> </div> <div class="radio radio-primary"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"><span class="circle"></span><span class="check"></span> Option two can be something else </label> </div> </div> </div> <div class="form-group"> <label for="select" class="col-lg-2 control-label">Selects</label> <div class="col-lg-10"> <select class="form-control" id="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <br> <select multiple="" class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <button class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </fieldset> </form> </div> </div> <div class="col-lg-4 col-lg-offset-1"> <form class="bs-component"> <div class="form-group"> <div class="form-control-wrapper"> <input class="form-control empty" id="focusedInput" type="text"> <div class="floating-label">Write something to make the label float</div><span class="material-input"></span></div> </div> <div class="form-group"> <div class="form-control-wrapper"> <input class="form-control empty" id="focusedInput" type="text" data-hint="You should really write something here"> <div class="hint">You should really write something here</div> <div class="floating-label">Focus to show the hint</div><span class="material-input"></span></div> </div> <div class="form-group"> <label class="control-label" for="disabledInput">Disabled input</label> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled=""> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input warning</label> <input type="text" class="form-control" id="inputWarning"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input error</label> <input type="text" class="form-control" id="inputError"> </div> <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input success</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group"> <label class="control-label" for="inputLarge">Large input</label> <input class="form-control input-lg" type="text" id="inputLarge"> </div> <div class="form-group"> <label class="control-label" for="inputDefault">Default input</label> <input type="text" class="form-control" id="inputDefault"> </div> <div class="form-group"> <label class="control-label" for="inputSmall">Small input</label> <input class="form-control input-sm" type="text" id="inputSmall"> </div> <div class="form-group"> <label class="control-label">Input addons</label> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Button</button> </span> </div> </div> </form> </div> </div> </div> </div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
body {
  padding-top: 20px;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/roboto.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/fonts/Material-Design-Icons.svg'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/roboto.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/fonts/Material-Design-Icons.svg'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.js'></script>
<style>
body {
  padding-top: 20px;
}
</style>

</head>
<body>
<div class="container-fluid">
  <div class="bs-docs-section">

    <div class="row">
      <div class="col-lg-6">
        <div class="well bs-component">
          <form class="form-horizontal">
            <fieldset>
              <legend>Legend</legend>
              <div class="form-group">
                <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                <div class="col-lg-10">
                  <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword" class="col-lg-2 control-label">Password</label>
                <div class="col-lg-10">
                  <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"><span class="checkbox-material"><span class="check"></span></span> Checkbox
                    </label>
                  </div>
                  <br>
                  <div class="togglebutton">
                    <label>
                      <input type="checkbox" checked=""><span class="toggle"></span> Toggle button
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="inputFile" class="col-lg-2 control-label">File</label>
                <div class="col-lg-10">
                  <div class="form-control-wrapper fileinput">
                    <input type="text" readonly="" class="form-control empty">
                    <input type="file" id="inputFile" multiple="">
                    <div class="floating-label">Browse...</div><span class="material-input"></span></div>

                </div>
              </div>
              <div class="form-group">
                <label for="textArea" class="col-lg-2 control-label">Textarea</label>
                <div class="col-lg-10">
                  <textarea class="form-control" rows="3" id="textArea"></textarea>
                  <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-lg-2 control-label">Radios</label>
                <div class="col-lg-10">
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""><span class="circle"></span><span class="check"></span> Option one is this
                    </label>
                  </div>
                  <div class="radio radio-primary">
                    <label>
                      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"><span class="circle"></span><span class="check"></span> Option two can be something else
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="select" class="col-lg-2 control-label">Selects</label>
                <div class="col-lg-10">
                  <select class="form-control" id="select">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                  <br>
                  <select multiple="" class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2">
                  <button class="btn btn-default">Cancel</button>
                  <button type="submit" class="btn btn-primary">Submit</button>
                </div>
              </div>
            </fieldset>
          </form>
        </div>
      </div>
      <div class="col-lg-4 col-lg-offset-1">

        <form class="bs-component">
          <div class="form-group">
            <div class="form-control-wrapper">
              <input class="form-control empty" id="focusedInput" type="text">
              <div class="floating-label">Write something to make the label float</div><span class="material-input"></span></div>
          </div>

          <div class="form-group">
            <div class="form-control-wrapper">
              <input class="form-control empty" id="focusedInput" type="text" data-hint="You should really write something here">
              <div class="hint">You should really write something here</div>
              <div class="floating-label">Focus to show the hint</div><span class="material-input"></span></div>
          </div>

          <div class="form-group">
            <label class="control-label" for="disabledInput">Disabled input</label>
            <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
          </div>

          <div class="form-group has-warning">
            <label class="control-label" for="inputWarning">Input warning</label>
            <input type="text" class="form-control" id="inputWarning">
          </div>

          <div class="form-group has-error">
            <label class="control-label" for="inputError">Input error</label>
            <input type="text" class="form-control" id="inputError">
          </div>

          <div class="form-group has-success">
            <label class="control-label" for="inputSuccess">Input success</label>
            <input type="text" class="form-control" id="inputSuccess">
          </div>

          <div class="form-group">
            <label class="control-label" for="inputLarge">Large input</label>
            <input class="form-control input-lg" type="text" id="inputLarge">
          </div>

          <div class="form-group">
            <label class="control-label" for="inputDefault">Default input</label>
            <input type="text" class="form-control" id="inputDefault">
          </div>

          <div class="form-group">
            <label class="control-label" for="inputSmall">Small input</label>
            <input class="form-control input-sm" type="text" id="inputSmall">
          </div>

          <div class="form-group">
            <label class="control-label">Input addons</label>
            <div class="input-group">
              <span class="input-group-addon">$</span>
              <input type="text" class="form-control">
              <span class="input-group-btn">
                                        <button class="btn btn-primary" type="button">Button</button>
                                    </span>
            </div>
          </div>
        </form>

      </div>
    </div>
  </div>

</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>

</body>
</html>
Preview