This is reduction of a simple page I am working on. I am trying to align the image, User Name, Password and Sign in button with the E from Enter. No matter what I do they are sticking to the left of the page and not budging. Do I need to tie them to the Enter with a special align?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.text-box {
text-align: left;
width: 300px;
position: center;
}
.btn {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<img src="" width="200" height="300"/>
<div class="login-header">
<h2 id="title" align="center">
Enter
Test
</h2>
<br>
</div>
<form onsubmit="return false;" method="post">
<div class="form-group text-box" align="center">
<label for="name">User Name*</label>
<input
type="email"
class="form-control"
id="email">
</div>
<div class="form-group text-box">
<label for="name">Password*</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block button">
Sign In
</button>
<br>
<hr>
</form>
There's a lot I had to change, as your layout is honestly not very well written, it seems like you are learning to write HTML from a very old guide (I'm guessing W3). You shouldn't be using things like <br> or The sooner you can start seeing styling as blocks and not the alignment of text like in a word document, the better.
but what I did here was remove the formatting from your header, left aligned it, then gave both it and your form a fixed width and automatic margin:
.text-box {
text-align: left;
width: 300px;
position: center;
}
.btn {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#title{
margin: auto;
width:250px;
}
form{
margin: 0 auto;
width:250px;
}
<img src="" width="200" height="300"/>
<div class="login-header">
<h2 id="title">
Enter
</h2>
<br>
</div>
<form onsubmit="return false;" method="post">
<div class="form-group text-box" align="center">
<label for="name">User Name*</label>
<input
type="email"
class="form-control"
id="email">
</div>
<div class="form-group text-box">
<label for="name">Password*</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block button">
Sign In
</button>
<br>
<hr>
</form>
However that isn't what I would recommend doing, you should put the header IN the form. Like so, then format the form the same as before.
.text-box {
text-align: left;
width: 300px;
position: center;
}
.btn {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form{
margin: 0 auto;
width:250px;
}
<img src="" width="200" height="300"/>
<form onsubmit="return false;" method="post">
<h2 id="title">
Enter
</h2>
<div class="form-group text-box" align="center">
<label for="name">User Name*</label>
<input
type="email"
class="form-control"
id="email">
</div>
<div class="form-group text-box">
<label for="name">Password*</label>
<input
type="password"
class="form-control"
id="password"
placeholder="Enter your password">
</div>
<button
type="submit"
id="btn-login"
class="btn btn-primary btn-block button">
Sign In
</button>
<br>
<hr>
</form>
Related
I'm new to web designing. PLS help me to create this input fields responsive and also how I put margins in all around like it's in middle(I want get those columns in the middle of the page).
<!DOCTYPE html>
<html>
<head>
<title>Login/Registor</title>
<style type="text/css">
body{
margin:0px;
padding:0;
overflow-x: hidden!important;
}
.containor{
/*text-align: center;*/
margin:225px 3px 5px 3px auto;
}
.form-group input{
width: 900px;
height: 40px;
border-color: silver;
padding: 0;
margin-top: 3px;
margin-bottom: 10px;
}
.form-group label{
text-align: left;
padding-left: 3px;
margin-bottom: 3px;
}
.buttons{
margin-top: 20px;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="containor">
<div class="row">
<div class="col-6 col-sm-12 col-md-6 border" id="login_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Welcome to Login Section!</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
Fogot password!
</div>
</div>
</form>
</div>
<div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
if any one have samples like this create using html,css,bootsrap pls share to get more idea about theses things. Thanks
Is this what you are looking for?
If then add the below style to fix the input moving out of container.
.form-group input {
width: 900px;
max-width: 100%;
}
Working Fiddle
body {
margin: 0px;
padding: 0;
overflow-x: hidden !important;
}
.containor {
/*text-align: center;*/
margin: 225px 3px 5px 3px auto;
}
.form-group input {
width: 900px;
height: 40px;
border-color: silver;
padding: 0;
margin-top: 3px;
margin-bottom: 10px;
max-width: 100%;
}
.form-group label {
text-align: left;
padding-left: 3px;
margin-bottom: 3px;
}
.buttons {
margin-top: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="containor">
<div class="row">
<div class="col-6 col-sm-12 col-md-6 border" id="login_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Welcome to Login Section!</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-info btn-block rounded-pill">Login</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Credentials</button>
Fogot password!
</div>
</div>
</form>
</div>
<div class="col-right-6 col-sm-12 col-md-6 border" id="reg_section">
<form class="m-3" action="#" method="post">
<div class="form-group">
<h1 class="m-3 text-center">Don't have an Account yet!<br>Resgister In Here</h1>
<label>Email</label>
<input type="text" class="form-control" name="u_email">
<label>Password</label>
<input type="password" class="form-control" name="paswd">
<label>Confirm Password</label>
<input type="password" class="form-control" name="confirm_paswd">
<br>
<div class="buttons">
<button type="submit" class="btn btn-outline-success btn-block rounded-pill">Registor</button>
<button type="rest" class="btn btn-outline-danger btn-block rounded-pill">Clear Info</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
I'm developing a Spring Boot Web App and am having an issue on the login page, which you can see in the attached picture, where the div is not EXACTLY centered on the page. I'm also using Bootstrap.
It appears that it is nearly centered, but is off a bit to the left for some reason. I've posted my HTML and relevant CSS below. Some parts of it must be conflicting, but I'm not sure where.
<div id="parentLogin">
<div class="row" style="width: 40%;">
<div class="col-md-12 col-md-offset-2">
<div>
<c:if test="${param.error != null}">
<div class="login-error" style="margin: 0 auto;">Incorrect username or password</div>
</c:if>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">User Login</div>
</div>
<div class="panel-body">
<form method="post" action="${loginUrl}" class="login-form">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div class="input-group">
<input type="text" name="username" placeholder="Username"
class="form-control" />
</div>
<div class="input-group">
<input type="password" name="password" placeholder="Password"
class="form-control" />
</div>
<button type="submit" class="suit_and_tie">Sign In</button>
</form>
</div>
</div>
</div>
</div>
</div>
#parentLogin {
display: flex;
justify-content: center;
align-items: center;
height: 75vh;
}
Your div with id="parentLogin" as parent is centered... with a fixed width of 40% of the available width. But it does not appear that your bootstrap panels inside of that are centered within that div... you should add classes to the entire chain of child objects... each class should use display: flex; and should specify flex-direction, align-items, and justify-content. You can use Bootstrap classes for those... but each element in the parent-child chain should specify the alignment of its contents.
#parentLogin {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 75vh;
width: 100%;
}
.parentRow {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 75vh;
}
.parentCol {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 75vh;
}
<div id="parentLogin">
<div class="row parentRow" style="width: 40%;">
<div class="col-md-12 col-md-offset-2 parentCol">
<div>
<c:if test="${param.error != null}">
<div class="login-error" style="margin: 0 auto;">
Incorrect username or password
</div>
</c:if>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title" style="font-weight: bold; font-size: x-large; margin: 1%;">
User Login
</div>
</div>
<div class="panel-body">
<form method="post" action="${loginUrl}" class="login-form">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
<div class="input-group">
<input type="text" name="username" placeholder="Username" class="form-control" />
</div>
<div class="input-group">
<input type="password" name="password" placeholder="Password" class="form-control" />
</div>
<button type="submit" class="suit_and_tie">
Sign In
</button>
</form>
</div>
</div>
</div>
</div>
</div>
I have an HTML Form, with the input fields already centered, but they are not vertically aligned together.
I would like to have all of the labels and inputs vertically aligned so that all the labels are on the same vertical line, and all the inputs are on the same vertical line.
So far all I have is the fields inside a div:
<div class="container" align="center">
#formContainer{
width:40%;
margin:auto;
}
#formC{
width:100%;
}
.rows{
width:100%;
display:block;
}
.column{
width:100%;
display:inline-block;
}
.theLabels{
width:30%
float:left;
}
.theInputs{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="formContainer">
<form id="formC">
<div class="rows">
<div class="column">
<label class="theLabels">
URL:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Code Base:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Email:
</label>
<input class="theInputs" type="email"/>
</div>
</div>
</form>
</div>
</body>
</html>
If you want 2 columns in a row you should change width:100% in column class to width:48% or make another class with width:48%. Hope it helps
Are you using Bootstrap?
Make a main div and place everything inside it.. like
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
See HERE
A workout for this would be to have a main which holds the entire form, and then wrap every label in a element with a fixed width, you can then do the same with the input elements.
Fiddle:
https://jsfiddle.net/7mnxwdgv/14/
<html>
<head>
<style type="text/css">
div.container {
width: 350px;
padding: 15px;
margin: 50px auto 0px auto;
clear: both;
overflow: hidden;
}
div.container span.label-holder {
display: block;
width: calc(25% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder {
display: block;
width: calc(75% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder input[type="text"]{
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<form>
<span class="label-holder"><label for="url">URL</label></span>
<span class="input-holder"><input type="text" id="url" name="url" placeholder="url" /></span>
<span class="label-holder"><label for="code-base">Code Base</label></span>
<span class="input-holder"><input type="text" id="code-base" name="Code-Base" placeholder="Code Base" /></span>
<span class="label-holder"><label for="from">From</label></span>
<span class="input-holder"><input type="text" id="from" name="from" placeholder="From" /></span>
<span class="label-holder"><label for="to">to</label></span>
<span class="input-holder"><input type="text" id="to" name="to" placeholder="To" /></span>
<span class="label-holder"><label for="email">Email</label></span>
<span class="input-holder"><input type="text" id="email" name="email" placeholder="Your Email" /></span>
<span class="label-holder"><label for="app-serv">Application Servers</label></span>
<span class="input-holder">
<select name="app-serv" id="app-serv">
<option value="Incent">Incent</option>
</select>
</span>
</form>
</div>
</body>
</html>
I am trying to make an app landing Page using bootstrap framework (Bootstrap 4 alpha). While trying to align everything in center I used text-align:center in jumbotron id. Everything except email form aligned.
Is there any way to align email form in center as well also making sure that it remains in center irrespective of web page width.
This is the code in stylesheet.
.jumbotron
{
background-image: url(background.jpg);
text-align: center;
margin-top: 50px;
}
This is the main code.
<div class="jumbotron" id="jumbotron">
<h1 class="display-3">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form class="form-inline" id = "emailbar">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
Since your form has display: flex it spans the whole width of its parent.
Also the text-align: center in your jumbotron class won't apply to the forms element as they are flex items.
So change either of these in your form-inline class
change it to display: inline-flex (and the text-align: center will apply)
add justify-content: center; (the Flexbox property to align horizontally in row direction)
To target only the emailbar, do like this
#emailbar {
display: inline-flex;
}
or this
#emailbar {
justify-content: center;
}
Just add css part in jumbotron to get the center.
.jumbotron {
background-image: url(background.jpg);
text-align: center;
margin-top: 50px;
display: flex;/*Add this*/
flex-direction: column; /*Add this*/
align-items: center; /*Add this*/
}
Working fiddle
.jumbotron {
display: flex;/*Add this*/
flex-direction: column; /*Add this*/
align-items: center; /*Add this*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="jumbotron" id="jumbotron">
<h1 class="display-3">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form class="form-inline" id="emailbar">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
There's no reason for extra CSS. Just use justify-content-center on the form...
https://www.codeply.com/go/7LjBkEtvVV
<form class="form-inline justify-content-center" id = "emailbar">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">#</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
I am making a form inside of jumbotron and for some reason I get it to look good on desktop view but when viewing it mobile it goes out of the jumbotron. I am using netbeans to do my coding. I even use #media (max-width: 620px). I tried using google but failed :(
#wrapper{
width: 500px;
height: 700px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
form{
color: black;
text-align: center;
}
div{
clear: both;
}
#off{
background-color: rgba(225,0,0,.85);
color: white;
width: 525px;
height: 140px;
font-size: 1rem;
text-align: center;
}
.formHeader{
color: #104c8b;
}
.formFooter{
background-color: rgba(0,0,255,.5);
color: white;
margin: 65px 0 0 0;
}
#media(max-width: 620px) {
#wrapper{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
background-color: rgba(255,255,255,.75);
text-align: center;
}
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row text-center">
<div id="wrapper"><p>Contact Form</p>
<div class="formHeader">
</div>
<form action="test.html" method="get" name="test" id="myForm">
<label>Name</label><input name="name" type="text" /><br>
<label>Email</label><input name="email" type="text" /><br>
<label>Phone</label><input name="number" type="text" /><br>
<input type="submit" value="Send"/>
</form>
<div class="formFooter">
</div>
</div>
</div>
</div>
</section>
Given that you're using Bootstrap as a framework it seems a shame not to make use of all of well... the framework. With some restructuring of your HTML (to make use of Bootstrap's responsive classes and form controls) you can easily achieve the responsiveness you desire.
Most of it is just adding the necessary .col-*-* for grid layouts, and of course applying Bootstrap classes to your input and label elements, etc. An example Bootply is below though the code is significantly altered to better-reflect Bootstrap's Framework and modern input classifications (like tel or email, etc).
http://www.bootply.com/mPNCZyXbbD
The HTML:
<section id="top" class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-wrapper text-center">
<p>Contact Form</p>
<form action="test.html" method="get" name="test" id="myForm" class="form form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-10">
<input name="number" type="tel" class="form-control">
</div>
</div>
<button type="submit" class="btn btn-default">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
And the CSS:
.form-wrapper {
padding: 15px;
background: rgba(255,255,255,0.75);
}