Porzebuję sobie zrobić prosty szablon w Bootstrap na potrzeby projektu. Od razu mówię, że nie znam się za bardzo na froncie, tylko piszę głównie back-end, ale sytuacja wymaga ode mnie zrobienia samemu jakichś prostych podstron i wybrałem Bootstrap, bo jest szybko i efektownie. Problem polega na tym, że chcę wyśrodkować responsywnie grid system z moją form dla rejestracji, ale przyznam się szczerzę, że nie wiem jakich komend uzyć w css. Obecnie wygląda to tak: https://zapodaj.net/1b8091521ec4a.png.html Na sztywno ustawiła margines od góry, ale jest to "słabe". A potrzebuję, aby automatycznie ustawiło się na środku.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My application!</title>
<meta name="description" content="My first application in Spring MVC">
<meta name="author" content="Jonki!">
<link rel="stylesheet" href="<c:url value="/resources/bootstrap/css/bootstrap.min.css" />" />
<link rel="stylesheet" href="<c:url value="/resources/bootstrap/css/register.css" />" />
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js" />"></script>
<script src="<c:url value="/resources/bootstrap/js/jquery.min.js" />"></script>
<script src="<c:url value="/resources/bootstrap/js/scripts.js" />"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<jsp:directive.include file="include/navbar.jsp" />
<div class="row">
<div class="col-md-12">
<c:if test="${param.error}">
<div class="alert alert-dismissable alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
×
</button>
<h4>
Error!
</h4> <strong>Error!</strong> The username or password is incorrect!
</div>
</c:if>
<div class="row" id="rowWithLoginForm">
<div class="col-md-4">
</div>
<div class="col-md-4">
<form:form action="/register" modelAttribute="registerDTO" method="POST" cssClass="form-horizontal">
<div class="form-group">
<label for="inputUsername" class="col-sm-2 control-label">
Username
</label>
<div class="col-sm-10">
<form:input path="username" class="form-control" id="inputUsername" placeholder="Username" maxlength="36" />
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">
Email
</label>
<div class="col-sm-10">
<form:input path="email" type="email" class="form-control" id="inputEmail" placeholder="E-mail" maxlength="36" />
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">
Password
</label>
<div class="col-sm-10">
<form:input path="password" type="password" class="form-control" id="inputPassword" placeholder="Password" maxlength="36" />
</div>
</div>
<div class="form-group">
<label for="inputReenterPassword" class="col-sm-2 control-label" id="labelReenterPassword">
Reenter password
</label>
<div class="col-sm-10">
<form:input path="reenterPassword" type="password" class="form-control" id="inputReenterPassword" placeholder="Re-enter password" maxlength="36" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success btn-lg" id="btnCreateNewAccount">
Create new account
</button>
<button formaction="/login" type="submit" class="btn btn-primary btn-md" id="btnSignIn">
Sign in
</button>
</div>
</div>
</form:form>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I CSS
#inputUsername {
margin-left: 20px;
}
#inputEmail {
margin-left: 20px;
}
#inputPassword {
margin-left: 20px;
}
#inputReenterPassword {
margin-left: 20px;
}
#labelReenterPassword {
margin-top: -10px;
}
#btnCreateNewAccount {
margin-left: 20px;
}
#btnSignIn {
margin-left: 20px;
}
#rowWithLoginForm {
margin-top: 250px;
}
