How to center bootstrap form-Bootstrap Tutorial-php.cn

How to center bootstrap form

(*-*)浩

Release： 2019-07-19 11:08:23

Original

13419 people have browsed it

Bootstrap can create different styles of forms through some simple HTML tags and extended classes.

How to center bootstrap form

Bootstrap provides a variety of form layouts, but the most commonly used one is the centered form, also called a horizontal form.

Horizontal forms differ from other forms not only in the number of tags, but also in the form presentation. (Recommended learning: Bootstrap video tutorial)

If you need to create a horizontal layout form, please follow the following steps:

Add class .form-horizontal to the parent

element.

Put labels and controls in a

with class .form-group.

Add class .control-label to the label.

Example:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 水平表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
	<div class="form-group">
		<label for="firstname" class="col-sm-2 control-label">名字</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="firstname" 
				   placeholder="请输入名字">
		</div>
	</div>
	<div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">姓</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname" 
				   placeholder="请输入姓">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> 请记住我
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">登录</button>
		</div>
	</div>
</form>

</body>
</html>

Copy after login

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to center bootstrap form. For more information, please follow other related articles on the PHP Chinese website!