Header Responsive Ads

bootstrap form input checkbox radio button

Bootstrap Form

Bootstrap provides default class .form-control for all form input fields like input, textarea and select. These input fields automatically get all default styles.

We can create vertical or horizontal form by using classes .form-inline or .form-horizontal. Below is simple bootstrap login form.

<form action="url" style="padding: 20px;">
  <label>User ID:</label>
  <input type="text" class="form-control" placeholder="Enter userid" name="email">
  <label>Password:</label>
  <input type="password" class="form-control" placeholder="Enter password" name="pwd">
  <label><input type="checkbox" name="remember"> Remember Me</label>
  <button type="submit" class="btn btn-success form-control">Submit</button>
</form>

Output

bootstrap form

Icon, Text or Button with bootstrap input

You can add icon, button or text in front or at the end of input element by using class .input-group with the container and class input-group-addon with span. Then add an icon by adding .glyphicon class inside span.

<div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input type="text" class="form-control" name="username" placeholder="Username">
</div>
<br>
<div class="input-group">
  <input type="password" class="form-control" name="password" placeholder="Password">
  <span class="input-group-addon"><button type="button">Button</button></span>
</div>
<br>
<div class="input-group">
  <span class="input-group-addon">Address</span>
  <textarea  class="form-control" name="address" rows="5"></textarea>
</div>

Output

bootstrap form control with icon

Form Control States

Bootstrap provides the following states of form input controls.

  • Focused Input
  • Disabled Input
  • Disabled Select
  • Readonly Input
  • Validation  Different validation styles for success, warning, and error messages
  • Icons

Below example includes all validation states.

<div class="form-group">
  <input class="form-control" type="text" value="Click for focus" ><br>
  <input class="form-control" type="text" placeholder="Disabled input" disabled><br>
  <select disabled class="form-control">
  <option>Disabled select</option>
  </select><br>
  <div class="has-error has-feedback">
    <input type="text" class="form-control" id="inputError">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div><br>
  <div class="has-success has-feedback">
    <input type="text" class="form-control" >
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div><br>
  <div class="has-warning has-feedback">
    <input type="text" class="form-control" id="inputWarning">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
</div>

Output

form control states

Media Objects

Using bootstrap, you can easily align images or videos by using below classes. 

.media add with container div
.media-left to align media to the left of content (Media body)
.media-right to align media to right of content (Media body)
.media-body add with a div to write content in it
.media-heading you can add media heading inside media body div
.media-top to align media to the top of the content
.media-middle to align media to the center
.media-bottom to align media to the bottom

We use media objects inside a container div with class .media. Inside media div, we create two divs: one is media object and other is media body. In media object we have image or video that can be aligned with respect to media body. In media we have content.

<div class="media">
  <div class="media-left media-top">
    <img src="img_avatar3.png" class="media-object" style="width:40px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Image Left Aligned</h4>
    <p>This is a dummy text used to test media left aligned. This is a dummy text used to test media left aligned. This is a dummy text used to test media left aligned.</p>
  </div>
</div>

<hr>

<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Image Right Aligned</h4>
    <p>This text is written to show media right aligned. This text is written to show media right aligned.</p>
  </div>
  <div class="media-right media-bottom">
    <img src="img_avatar2.png" class="media-object" style="width:40px">
  </div>
</div>

Output

bootstrap media object

Post a Comment

Previous Post Next Post