Creating a webpage in a jsp file with the help of spring boot, I've utilized bootstrap for the design. I'm facing some challenges as I'm unable to widen my input box to width:100% on both the login and new registration pages. Additionally, centering the input field is proving to be tricky for me.
Below, I've included my CSS and HTML code.
Here is my CSS code snippet:
<style media="screen">
body{
margin: 0;
padding:auto;
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-image:linear-gradient(120deg,#b134eb,#5efff7);
min-height : 160vh;
}
.form-control{
display: block;
margin-right: auto;
margin-left: auto;
}
</style>
Shown below is the HTML form code:
<body>[login page output[\]\[1\]][1]
<c:choose>
<c:when test="${mode=='MODE_REGISTER' }">
<div class="container text-center">
<h3>New Registration</h3>
<hr>
<form class="form-horizontal" method="POST" action="save-user">
...
...
...
...
...
...
</div>
</c:when>
<c:when test="${mode=='MODE_LOGIN' }">
<div class="container text-center">
<h3>User Login</h3>
<hr>
<form class="form-horizontal" method="POST" action="/login-user">
...
...
...
...
...
</div>
</c:when>
</c:choose>
</body>
Check out the output of the registration form here
I appreciate any assistance in aligning the input field to the center. Thank you!