<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin:20px;">
<form>
<div class="row">
<div class="col-md-6" style="border:1px dashed grey">
<!-- Basic Layout -->
<div class="form-group">
<label for="field_1_1">Field</label>
<input type="text" class="form-control" name="field_1_1" placeholder="Field 1-1">
</div>
<div class="form-group">
<label for="field_1_2">Field</label>
<input type="text" class="form-control" name="field_1_2" placeholder="Field 1-2">
</div>
</div>
<div class="col-md-6" style="border:1px dashed grey">
<!-- Grid Layout -->
<div class="row">
<div class="form-group col-md-6">
<label for="field_2_1">Field</label>
<input type="text" class="form-control" name="field_2_1" placeholder="Field 2-1">
</div>
<div class="form-group col-md-3">
<label for="field_2_2">Field</label>
<input type="text" class="form-control" name="field_2_2" placeholder="Field 2-2">
</div>
<div class="form-group col-md-3">
<label for="field_2_3"> </label>
<input type="text" class="form-control" name="field_2_3" placeholder="Field 2-3">
</div>
<div class="form-group col-md-3">
<label for="field_2_4">Field</label>
<input type="text" class="form-control" name="field_2_4" placeholder="Field 2-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" style="border:1px dashed grey">
<!-- Basic Layout -->
<div class="form-group">
<label for="">Checkboxes</label>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_3_1"> Checkbox 3-1
</label>
<label>
<input type="checkbox" name="checkbox_3_2"> Checkbox 3-2
</label>
<label>
<input type="checkbox" name="checkbox_3_3"> Checkbox 3-3
</label>
<label>
<input type="checkbox" name="checkbox_3_4"> Checkbox 3-4
</label>
</div>
</div>
<div class="form-group">
<label for="field_3_5">Textbox and Checkboxes</label>
<input type="text" class="form-control" name="field_3_5" placeholder="Field 3-5">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_3_6"> Checkbox 3-6
</label>
<label>
<input type="checkbox" name="checkbox_3_7"> Checkbox 3-7
</label>
<label>
<input type="checkbox" name="checkbox_3_8"> Checkbox 3-8
</label>
<label>
<input type="checkbox" name="checkbox_3_9"> Checkbox 3-9
</label>
</div>
</div>
</div>
<div class="col-md-6" style="border:1px dashed grey">
<!-- Grid Layout -->
<div class="row">
<div class="form-group col-md-6">
<label for="name">Checkboxes</label>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_4_1"> Checkbox 4-1
</label>
<label>
<input type="checkbox" name="checkbox_4_2"> Checkbox 4-2
</label>
<label>
<input type="checkbox" name="checkbox_4_3"> Checkbox 4-3
</label>
<label>
<input type="checkbox" name="checkbox_4_4"> Checkbox 4-4
</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="field_4_5">Textbox and Checkboxes</label>
<input type="text" class="form-control" name="field_4_5" placeholder="Field 4-5">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_4_6"> Checkbox 4-6
</label>
<label>
<input type="checkbox" name="checkbox_4_7"> Checkbox 4-7
</label>
<label>
<input type="checkbox" name="checkbox_4_8"> Checkbox 4-8
</label>
<label>
<input type="checkbox" name="checkbox_4_9"> Checkbox 4-9
</label>
</div>
</div>
<div class="form-group col-md-3">
<label for="field_4_10">Field</label>
<input type="text" class="form-control" name="field_4_10" placeholder="Field 4-10">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2" style="border:1px dashed grey">
<!-- Basic Layout -->
<div class="form-group">
<label for="">Radios</label>
<div class="radio">
<label>
<input type="radio" name="radio_5_1"> Radio 5-1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_5_1"> Radio 5-2
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_5_1"> Radio 5-3
</label>
</div>
</div>
<div class="form-group">
<label for="field_5_4">Field</label>
<input type="text" class="form-control" name="field_5_4" placeholder="Field 5-4">
</div>
</div>
<div class="col-md-2" style="border:1px dashed grey">
<!-- Basic Layout -->
<div class="form-group">
<label for="">Checkboxes</label>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_5_5"> Checkbox 5-5
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_5_6"> Checkbox 5-6
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_5_7"> Checkbox 5-7
</label>
</div>
</div>
<div class="form-group">
<label for="field_5_8">Field</label>
<input type="text" class="form-control" name="field_5_8" placeholder="Field 5-8">
</div>
</div>
<div class="col-md-2" style="border:1px dashed grey">
<!-- Basic Layout -->
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_5_9"> Checkbox 5-9
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_5_10"> Checkbox 5-10
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_5_11"> Checkbox 5-11
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_5_12"> Checkbox 5-12
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_5_13"> Radio 5-13
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_5_13"> Radio 5-14
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_5_13"> Radio 5-15
</label>
</div>
<input type="text" class="form-control" name="field_5_16" placeholder="Field 5-16">
</div>
<div class="col-md-6" style="border:1px dashed grey">
<!-- Grid Layout -->
<div class="row">
<div class="form-group col-md-4">
<label for="">Radios</label>
<div class="radio">
<label>
<input type="radio" name="radio_6_1"> Radio 6-1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_6_1"> Radio 6-2
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_6_1"> Radio 6-3
</label>
</div>
</div>
<div class="form-group col-md-4">
<label for="">Checkboxes</label>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_6_5"> Checkbox 6-5
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_6_6"> Checkbox 6-6
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_6_7"> Checkbox 6-7
</label>
</div>
</div>
<div class="form-group col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_6_9"> Checkbox 6-9
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_6_10"> Checkbox 6-10
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_6_11"> Checkbox 6-11
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_6_12"> Checkbox 6-12
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_6_13"> Radio 6-13
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_6_13"> Radio 6-14
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio_6_13"> Radio 6-15
</label>
</div>
<input type="text" class="form-control" name="field_6_16" placeholder="Field 6-16">
</div>
<div class="form-group col-md-4">
<label for="field_6_4">Field</label>
<input type="text" class="form-control" name="field_6_4" placeholder="Field 6-4">
</div>
<div class="form-group col-md-4">
<label for="field_6_8">Field</label>
<input type="text" class="form-control" name="field_6_8" placeholder="Field 6-8">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" style="border:1px dashed grey">
<!-- Horizontal Form -->
<div class="form-horizontal">
<div class="form-group">
<label for="field_7_1" class="col-sm-2 control-label">Horizontal</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="field_7_1" placeholder="Field 7-1">
</div>
</div>
<div class="form-group">
<label for="field_7_2" class="col-sm-2 control-label">Form</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="field_7_2" placeholder="Field 7-2">
</div>
</div>
<div class="form-group">
<label for="field_7_3" class="col-sm-2 control-label">Field</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="field_7_3" placeholder="Field 7-3">
</div>
<label for="field_7_4" class="col-sm-2 control-label">Field</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="field_7_4" placeholder="Field 7-4">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_7_5"> Checkbox 7-5
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" name="submit_7_6" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
<div class="col-md-6" style="border:1px dashed grey">
<!-- Inline Form 1 -->
<div class="form-inline">
<div class="form-group">
<label for="field_8_1">Inline</label>
<input type="text" class="form-control" name="field_8_1" placeholder="Field 8-1">
</div>
<div class="form-group">
<label for="field_8_2">Form</label>
<input type="text" class="form-control" name="field_8_2" placeholder="Field 8-2">
</div>
<button type="button" name="submit_8_3" class="btn btn-default">Submit</button>
</div>
</div>
<div class="col-md-6" style="border:1px dashed grey">
<!-- Inline Form 2 -->
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field_9_1">Inline</label>
<input type="text" class="form-control" name="field_9_1" placeholder="Field 9-1">
</div>
<div class="form-group">
<label class="sr-only" for="field_9_2">Form</label>
<input type="text" class="form-control" name="field_9_2" placeholder="Field 9-2">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox_9_3"> Checkbox
</label>
</div>
<button type="button" name="submit_9_4" class="btn btn-default">Submit</button>
</div>
</div>
<div class="col-md-6" style="border:1px dashed grey">
<!-- Inline Form 3 -->
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field_10_1">Field</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" name="field_10_1" placeholder="Field 10-1">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="button" name="submit_10_2" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" style="border:1px dashed grey">
<!-- Horizontal Form -->
<div class="form-horizontal">
<div class="form-group">
<label for="" class="col-sm-3 control-label">
Payment Method</label>
<div class="col-sm-3">
<div class="radio">
<label>
<input type="radio" name="radio_11_1"> Cash
</label>
</div>
</div>
<div class="col-sm-3">
<div class="radio">
<label>
<input type="radio" name="radio_11_1"> Cheque
</label>
</div>
</div>
<div class="col-sm-3">
<div class="radio">
<label>
<input type="radio" name="radio_11_1"> Credit Card
</label>
</div>
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
<label for="" class="col-sm-3 control-label">Birth
Date</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="field_11_2" placeholder="Month">
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="field_11_3" placeholder="Day">
</div>
<div class="col-sm-3">
<input type="text" class="form-control" name="field_11_4" placeholder="Year">
</div>
</div>
</div>
</div>
<div class="col-md-6" style="border:1px dashed grey">
<!-- Inline Form -->
<div class="form-inline">
<div class="form-group">
<label class="" for="cash">Payment Method</label>
<div class="radio">
<label>
<input type="radio" name="radio_12_1"> Cash
</label>
</div>
</div>
<div class="form-group">
<label class="sr-only" for="cheque">Cheque</label>
<div class="radio">
<label>
<input type="radio" name="radio_12_1"> Cheque
</label>
</div>
</div>
<div class="form-group">
<label class="sr-only" for="credit_card">Credit Card</label>
<div class="radio">
<label>
<input type="radio" name="radio_12_1"> Credit Card
</label>
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label class="" for="field_12_2">Birth Date</label>
<input type="text" class="form-control" name="field_12_2" placeholder="Month">
</div>
<div class="form-group">
<label class="sr-only" for="field_12_3">Day</label>
<input type="text" class="form-control" name="field_12_3" placeholder="Day">
</div>
<div class="form-group">
<label class="sr-only" for="field_12_4">Year</label>
<input type="text" class="form-control" name="field_12_4" placeholder="Year">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" style="border:1px dashed grey">
<div class="form-group">
<label for="file_13_1">File 13-1</label>
<input type="file" name="file_13_1">
<p class="help-block">Description.</p>
</div>
<div class="form-group">
<label for="file_13_2">File 13-2</label>
<input type="file" name="file_13_2">
<p class="help-block">Description.</p>
</div>
<div class="form-group">
<label for="file_13_3">File 13-3</label>
<input type="file" name="file_13_3">
<p class="help-block">Description.</p>
</div>
</div>
<div class="col-md-6" style="border:1px dashed grey">
<div class="row">
<div class="form-group col-md-6">
<label for="file_14_1">File 14-1</label>
<input type="file" name="file_14_1">
<p class="help-block">Description.</p>
</div>
<div class="form-group col-md-6">
<label for="file_14_2">File 14-2</label>
<input type="file" name="file_14_2">
<p class="help-block">Description.</p>
</div>
<div class="form-group col-md-6">
<label for="file_14_3">File 14-3</label>
<input type="file" name="file_14_3">
<p class="help-block">Description.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" style="border:1px dashed grey">
<button type="button" name="submit_15_1" class="btn btn-default">Submit</button>
<button type="button" name="submit_15_2" class="btn btn-default">Cancel</button>
</div>
<div class="col-md-6" style="border:1px dashed grey">
<div class="row">
<div class="form-group col-md-6">
<label for="field_16_1">Field</label>
<input type="text" class="form-control" name="field_16_1" placeholder="Field 16-1">
</div>
<div class="form-group col-md-2">
<label for="submit_16_2"> </label><br />
<button type="button" name="submit_16_2" class="btn btn-default">Submit</button>
</div>
<div class="form-group col-md-4">
<label for="submit_16_3"> </label><br />
<button type="button" name="submit_16_3" class="btn btn-default form-control">Submit</button>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Related Snippets
