Home > Article > Web Front-end > How to center bootstrap form

How to center bootstrap form

(*-*)浩Original: 2019-07-19 11:08:2313301browse

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

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>

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!

bootstrap html class

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to write bootstrap double-click eventNext article：How to write bootstrap double-click event

See more

How to center bootstrap form

Related articles