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
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
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
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
Post a Comment