Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I tried to align my checkbox and label to the center of the screen but it wasn't moving at all. i tried to put it in the container tag but it result in the label of the check box is not align together. can someone please help with this problem?
.container {
width: 350px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
<!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, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class= "form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>
<div class= "form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<form>
<label>
<input type="checkbox" checked>
Remember me
</label>
</form>
<div class="container">
<p>
<div class="form-group">
<input type ="submit" name="login"
class="btn btn-block" >
</p>
</div>
</body>
</html>
Add a class to your label in HTML:
<!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, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class= "form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>
<div class= "form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<form>
<label class = "checkbox">
<input type="checkbox" checked>
Remember me
</label>
</form>
<div class="container">
<p>
<div class="form-group">
<input type ="submit" name="login"
class="btn btn-block" >
</p>
</div>
</body>
</html>
And then in your CSS move it to the right:
.container {
width: 350px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
.checkbox {
left: 250px;
}
There are two ways to do this:
Make a div tag center contain the label checkbox.
Set label fullwidth and text center
.container {
width: 350px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
/* add this style */
label {
display: flex !important;
justify-content: center;
}
<!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, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="container">
<form action="<?= $_SERVER ['PHP_SELF'] ?>" method="post" class="p-4">
<div class="form-group"></div>
<input type="text" name="phone" class="form-control form-control-lg" placeholder="Phone" required>
<div class="form-group"></div>
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<form>
<label>
<input type="checkbox" checked>
Remember me
</label>
</form>
<div class="container">
<p>
<div class="form-group">
<input type="submit" name="login" class="btn btn-block">
</p>
</div>
</body>
</html>
Related
I am creating a form to collect user info(code below) and could not make the form elevated from background. I tried to apply the background-color for the body and form element but it doesn't look nice. Is there a bootstrap class to make the form area elevated(and also rounded corner)?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
body {background-color: lightgrey;}
form{background-color: white; padding:30px 50px;}
</style>
<body>
<div class="container">
<h2>Test form</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Here you go !
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
body {background-color: #ddd;}
form{background-color: white; padding:30px 50px; border-radius: 15px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
</style>
<body>
<div class="container">
<h2>Test form</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Here is your solution. I just apply border-radius on form and change color which is look good
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
body {background-color: #ecbfbf;}
form{background-color: white; padding:30px 50px; border-radius: 27px;}
</style>
<body>
<div class="container">
<h2>Test form</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
I am designing a responsive web page which contains a form.
But all the input elements are getting out of the form from left and right.
Can anyone tell me, What is the reason behind this.?
My Demo Code ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Temp Pages for Testing </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
.custFrmOnlyBkCol { background-color: lightgray; }
</style>
</head>
<body>
<div class="jumbotron">
<div class="col-md-12">
<form action="#" class="custFrmOnlyBkCol">
<!-- In Css : .custFrmOnlyBkCol { background-color: lightgray; } -->
<div class="form-group row">
<label class="col-3 text-right">Id</label>
<div>
<p>101</p>
</div>
</div>
<div class="form-group row">
<label class="col-3 text-right" for="">First Name</label>
<input type="text" class="form-control col-md-9">
</div>
<div class="form-group row">
<label class="col-3 text-right" for="">Last Name</label>
<input type="text" class="form-control col-md-9">
</div>
<input class="form-control offset-md-3 col-md-6 btn btn-primary" type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
Set the widths of the input
input {
width: x%;
}
</style>
You should put input tags inside a div with row class like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Temp Pages for Testing </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
.custFrmOnlyBkCol { background-color: lightgray; }
</style>
</head>
<body>
<div class="jumbotron">
<div class="col-md-12">
<form action="#" class="custFrmOnlyBkCol">
<!-- In Css : .custFrmOnlyBkCol { background-color: lightgray; } -->
<div class="row col-md-10">
<label for="" class="col-md-3 text-right">First Name</label>
<input type="text" class="form-control col-md-9">
</div>
<div class="row col-md-10">
<label for="" class="col-md-3 text-right">Last Name</label>
<input type="text" class="form-control col-md-9">
</div>
<input class="form-control offset-md-3 col-md-6 btn btn-primary" type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
When I click on a link on a form that will take a user to a page with the same background image, it does not load.
The form is a standard log in with password reset and create new account links. All three share pretty similar HTML code and the background image is loaded under the body and shared amongst all three htmls. I'm unsure if this falls under any other question answered or if I am blatantly missing something
Above is the HTML that is the same for both passwordreset.html and newaccount.html
The only difference is that the other two both share a "back to login" link.
I'd just expected the image would act as a sort of constant between each HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>'Login Form'</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="loginbox">
<i class="fas fa-user fa-7x"></i>
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Username">
<p>Password</p>
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
Forgot your Password?<br>
Create an account
</form>
</div>
</body>
</html>
=================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>'Create New Account'</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheet/stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="loginbox newaccount">
<i class="fas fa-user fa-7x"></i>
<h1>Create New Account</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Username">
<p>Email</p>
<input type="email" name="" placeholder="Email">
<p>Password</p>
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Create">
Back to login screen<br>
</form>
</div>
</body>
</html>
=================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>'Reset Password'</title>
<link rel="stylesheet" type="text/css" href="assets/stylesheet/stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="loginbox passwordreset">
<i class="fas fa-user fa-7x"></i>
<h1>Password Reset</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Username">
<p>Email</p>
<input type="email" name="" placeholder="Email">
<input type="submit" name="" value="Reset">
Back to login screen<br>
</form>
</div>
</body>
</html>
=================================================
CSS
=================================================
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("images/travel.jpg") no-repeat fixed center;
background-size: cover;
}
I cant seem to make this work. I wanted a simple responsive login page but the form doesn't stay on the center, it keeps going to the left.
Why this is not working?? If I divide the col into 3 sections of 4, should the it stay on the middle?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron" style="margin-top:150px">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</body>
</html>
I've added a class named col-centered. You can see an example below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
<style>
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4 col-centered">
<div class="jumbotron">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
I am trying to create a inline form, but its not styling correctly.
Below is the code I am using:
body {
background-color: #a7cdf2;
}
#map {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form class="inline" action="" method="post" name="search">
<input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
<datalist id="id_datalist">
<option value="CLARENVILLE, CA">
</datalist>
<div class="form-group">
<label for="origin">Origin:</label>
<input class="form-control" id="origin" list="id_datalist" name="origin" size="40" type="text" value="SHANGHAI, CN">
</div>
<div class="form-group">
<label for="speed">Speed (knots):</label>
<input class="form-control" id="speed" name="speed" size="5" type="text" value="14.0">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
This is how it renders in Chrome:
It seems your boostrap links are incorrect... I played around with your code and replaced the links and it worked fine. It looks like either you have put the downloaded files in the wrong place, or perhaps the example you found wasn't clear. When the src has a value like /static/css/bootstrap.min.css it is looking at the files on the server hosting the site. Perhaps you should use CDN links instead?
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
body {
background-color: #a7cdf2;
}
#map {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form class="inline" action="" method="post" name="search">
<input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
<datalist id="id_datalist">
<option value="CLARENVILLE, CA">
</datalist>
<div class="form-group">
<label for="origin">Origin:</label>
<input class="form-control" id="origin" list="id_datalist" name="origin" size="40" type="text" value="SHANGHAI, CN">
</div>
<div class="form-group">
<label for="speed">Speed (knots):</label>
<input class="form-control" id="speed" name="speed" size="5" type="text" value="14.0">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>