Normal Forms

Another one of the highlights of using Bootstrap is the ability to create forms with ease. As a web developer, styling forms is one of my least favorite tasks. Bootstrap makes it easy with the simple HTML markup and extended classes for different styles of forms. The basic form structure comes with Bootstrap; there is no need to add any extra helper classes. If you use the placeholder, keep in mind that it is only supported in newer browsers. In older browsers, no placeholder text will be displayed:

Example

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<body>
	<form>
		<fieldset>
			<legend>Legend</legend>
			<label for="name">Label name</label> 
			<input type="text" id="name" placeholder="Type something…"> 
			<span class="help-block">Example block-level help text here.</span> 
			<label class="checkbox" for="checkbox"><input type="checkbox" id="checkbox"> Check me out</label>
			<button type="submit" class="btn">Submit</button>
		</fieldset>
	</form>
</body>
</html>

Output

Untitled

Share

You may also like...