サインインをどうぞ

状態を記憶する

html,
body {
	height: 100%;
}

body {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #f5f5f5;
}

.form-signin {
	width: 100%;
	max-width: 330px;
	padding: 15px;
	margin: auto;
}
.form-signin .checkbox {
	font-weight: 400;
}
.form-signin .form-control {
	position: relative;
	box-sizing: border-box;
	height: auto;
	padding: 10px;
	font-size: 16px;
}
.form-signin .form-control:focus {
	z-index: 2;
}
.form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>サインインページ</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
	//cssファイルの設定など
</head>

<body class="text-center">
	<form class="form-signin">
		<img class="mb-4" src="../images/bootstrap-solid.svg" alt="" width="72" height="72">
		<h1 class="h3 mb-3 font-weight-normal">サインインをどうぞ</h1>
		<label for="inputEmail" class="sr-only">Emailアドレス</label>
		<input type="email" id="inputEmail" class="form-control" placeholder="Emailアドレス" required autofocus>
		<label for="inputPassword" class="sr-only">パスワード</label>
		<input type="password" id="inputPassword" class="form-control" placeholder="パスワード" required>
		<div class="form-check mb-3">
			<input class="form-check-input" type="checkbox" value="remember-me" id="rememberCheck">
			<label class="form-check-label" for="rememberCheck">
				状態を記憶する
			</label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit">サインイン</button>
		<p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
	</form>

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
	//JavaScriptプラグインの設定など
</body>

</html>

閉じる