I am trying to center my <div class="loginfeld"> but I cant get it to go center (in the middle), while staying responsive.
<html>
<body>
<div class ="loginfeld">
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron">
<center><h1>Hallo!</h1></center>
<br>
<form action="login.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="benutzername"
placeholder="Benutzernamen eingeben">
</div>
<div class="form-group">
<input type="text" class="form-control" name="passwort"
placeholder="Passwort eingeben">
</div>
<button type="text" class="btn
btn-primary form-control" name ="login">Login</button>
<center><p><?php echo $hinweis; ?></p></center>
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</body>
</html>
In my css-style file:
.loginfeld{
margin-top: 250px;
margin-left: 750px;
max-width: 1000px;
}
It does go in the middle of my screen, but it's not really resposive. I tried to use codes which were written in the forum to responsively center it, but it did not work out for me.
Thats how it looks now, after I used the code K_LUN wrote down. It is centerd, but now the login box is messed up.
Bootstrap provides more than enough classes to achieve what you need with minimal custom CSS.
I deleted the additional col-lg-4 that you had at the start and end of the container; also added a row div since you should have col-* classes inside a row only.
After that, you can just add justify-content-center to the row to center the element, as well as align-items-center along with a custom property height: 100vh so the row uses the full height of the viewport.
.full-scrn {
height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<div class="row justify-content-center align-items-center full-scrn">
<div class="col-10 col-md-8 col-lg-4">
<div class="jumbotron">
<center>
<h1>Hallo!</h1>
</center>
<br>
<form action="login.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="benutzername" placeholder="Benutzernamen eingeben">
</div>
<div class="form-group">
<input type="text" class="form-control" name="passwort" placeholder="Passwort eingeben">
</div>
<button type="text" class="btn
btn-primary form-control" name="login">Login</button>
<center>
<p>
<?php echo $hinweis; ?>
</p>
</center>
</form>
</div>
</div>
</div>
</div>
</body>
I don't know if you want it at the exact center of the screen(like from left,right,top,bottom) or just the horizontal center.
For the horizontal center, you can simply do-
.parent-element{
background: lightblue;
width: 300px;
height: 300
}
.centered-element{
margin: auto;
width: 200px;
height: 200px;
background: cyan;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
<div class="parent-element">
<div class="centered-element">
Sample Text
</div>
</div>
You can use grid offsets to keep a column centered:
<div class="container">
<div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="jumbotron">
<h1 class="text-center">Hallo!</h1>
<form action="login.php" method="POST">
<div class="form-group">
<input type="text" class="form-control" name="benutzername" placeholder="Benutzernamen eingeben">
</div>
<div class="form-group">
<input type="text" class="form-control" name="passwort" placeholder="Passwort eingeben">
</div>
<button type="text" class="btn
btn-primary form-control" name="login">Login</button>
<p class="text-center">
<?php echo $hinweis; ?>
</p>
</form>
</div>
</div>
</div>
Demo
Notice a few things:
Use text-center rather than additional markup for centering
Don't use line breaks for spacing. Use CSS (.jumbotron h1 {margin-bottom: 20px;})
Related
I am trying to create a login screen with 2 columns.
On large screens: Left column = login controls, right column = Image.
on small screens: Top column = image, bottom column = login controls.
It works as expected. like the screenshots below:
So far, it works well. However, I want the "Sign in" and the "Welcome" text to appear inside the image on the smaller screens.
To get an Idea on what I am trying to achieve, please look at this Website login page. They have done it:
https://demo.hasthemes.com/adomx-preview/light/login.html
Here is my code so far.
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-sm-12 col-md-6 col-lg-8 order-md-2 order-lg-2" style="background-color: grey;">
this is my image panel
</div>
<div class="col-sm-12 col-md-6 col-lg-4 order-md-1 order-lg-1">
<div class="loginarea">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
<form style="margin-top: 30px; margin-bottom: 20px;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary float-right">Sign in</button>
</form>
Forgot password
</div>
</div>
</div>
and this is my simple CSS.
<style>
.fullheight {
height: 100%;
min-height: 100%;
}
html,
body {
height: 100%;
}
.loginarea {
margin-top: 100px;
padding-right: 20px;
padding-left: 20px;
}
</style>
How can I make the Text lines flow into the image and the white area contain only the login boxes?
If you are using latest version of bootstrap i.e version 4 then you should use the d-* class as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-sm-12 col-md-6 col-lg-8 order-md-2 order-lg-2" style="background-color: grey;">
this is my image panel
<div class="loginarea d-sm-none">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 order-md-1 order-lg-1">
<div class="loginarea">
<div class="d-none d-sm-block">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
</div>
<form style="margin-top: 30px; margin-bottom: 20px;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary float-right">Sign in</button>
</form>
Forgot password
</div>
</div>
</body>
</html>
this is as you expected
I want to remove the margin on top the form, so that it will have the same margin with the text on the left.
This is my code:
<div class="secound-top container">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12 col-xl-12">
<h4 class="title"> Plain Page</h4>
<form>
<div class="input-group">
<input class="search-text" type="text" name="name" placeholder="search for....">
<button class="btn btn-default" type="submit"><i>Go</i></button>
</div>
</form>
</div>
image
Insert this into you CSS file or in the style tags:
body{
margin-top: 0px;
}
I have solved the error, I enclosed the form tag on a container div, then with a negative margin-top, the form went up:
There is the code:
<div class="container-fluid form">
<form>
<input class="search-text" type="text" name="name" placeholder="search
for....">
<button class="btn btn-default" type="submit"><i>Go</i></button>
</div>
CSS
.form{
margin-top: -30px;
}
I have a BootFaces JSF-generated login form but I can't seem to get the span's to line up vertically in the middle with the input fields.
This is how the login form currently looks:
Here is the HTML that is generated for this particular form:
<html>
<head>
<link rel="stylesheet" href="bsf.css"/>
<link rel="stylesheet" href="core.css"/>
</head>
<body>
<form id="loginForm" name="loginForm" method="post" action="" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="loginForm" value="loginForm" />
<div id="loginForm:j_idt18" class="row">
<div id="loginForm:j_idt19" class="col-md-4"><span class="pull-right">Username:</span></div>
<div id="loginForm:j_idt21" class="col-md-4">
<div id="loginForm:username" class="form-group"><input id="input_loginForm:username" name="input_loginForm:username" type="text" class="form-control bf-no-message" placeholder="Username" /></div>
</div>
<div id="loginForm:j_idt22" class="message col-md-4 ">
<div id="loginForm:j_idt23"></div>
</div>
</div>
<div data-toggle="tooltip" data-placement="auto" data-container="body" title="This password has fancy error messages." id="loginForm:j_idt24" class="row">
<div id="loginForm:j_idt25" class="col-md-4"><span class="pull-right">Password:</span></div>
<div id="loginForm:j_idt27" class="col-md-4">
<div id="loginForm:password" class="form-group"><input id="input_loginForm:password" name="input_loginForm:password" type="password" class="form-control bf-no-message" placeholder="Password" /></div>
</div>
<div id="loginForm:j_idt28" class="message col-md-4 ">
<div id="loginForm:j_idt29"></div>
</div>
</div>
<div id="loginForm:j_idt30" class="row">
<div id="loginForm:j_idt31" class="col-md-2 col-md-offset-4"><button type="submit" id="loginForm:j_idt32" name="loginForm:j_idt32" style="width:100%" class="btn btn-default" style="width:100%">Login</button></div>
<div id="loginForm:j_idt33" class="col-md-2"><button type="submit" id="loginForm:j_idt34" name="loginForm:j_idt34" style="width:100%" class="btn btn-default" style="width:100%">Forgotten password?</button></div>
</div>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:1" value="-5586558823054575095:3125033607536646469" autocomplete="off" />
</form>
</body>
</html>
And here are the two CSS files belonging to BootFaces:
bsf.css
core.css
Assuming that the height will remain consistent, you can vertically center text by specifying both a height and line-height:
.vertical-center {
height: 100px;
line-height: 100px;
}
Just apply that class to the username and password text fields. The values should reflect the height of the input fields.
I can't figure out why none of the CSS I am using is having an effect on a textarea. The textarea's id is "addquestion", which is what I'm using in my CSS, but to no avail. Inline CSS works, but not through my separate stylesheet. I can verify that the stylesheet is definitely linked correctly because there is another element that is working just fine, its just this textarea that isn't being affected.
#addquestion {
width: 20px;
height: 120px;
border: 3px solid #cccccc;
padding: 5px;
font-family: Tahoma, sans-serif;
background-image: url(bg.gif);
background-position: bottom right;
background-repeat: no-repeat;
}
<form>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" rows="3" id="addquestion" style="width:20px;" placeholder="Find this for me..."></textarea>
</div>
<div class="form-group">
<div class="input-group" id="addtags">
<input type="text" class="form-control" placeholder="Tags">
</div>
</div>
<div class="form-group">
<div class="input-group" id="addmoney">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
</div>
</div>
<div class="col-md-6">
<input type="file" id="main_upload_file">
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<a class="btn btn-success" type="submit">Submit</a>
</div>
</div>
</div>
</div>
</form>
You could try changing #addquestion to textarea in your css file. Unless you have other textareas, of course.
The following is the code for the form which I wrote:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">Items<span>Quantity</span><span>In Kit</span></p>
<form>
<div class="form-group col-lg-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<input type="checkbox" id="in-kit">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</form>
</div>
I am using bootstrap here. And I have the top paragraph heading with a class="bg-primary" which gives a nice background for the heading. I have two text input fields, a checkbox and a button. I want to align the text in the above paragraph with these fields.
https://imgur.com/XinA1kT
I want the Items text to be aligned in center with the first text field, Quantity with the second text field and the In kit with the check box.
As you can see in my code, I added span tags around the text. I experimented with it by adding margin properties to these span tags, but it didn't work properly. I tried a bunch of it works okay but I atleast need 15 to 20 of them which even didn't solve my problem.
Is there any alternative for this? I could even try other alternatives for the p tag too.
Thank you.
This can at least get you started, it's just rows and columns and some minor CSS. The problem you'll have is on a mobile device, if you want this to remain completely horizontal it'll start to break down.
.well-md.well-head {
background: #3973a6;
border: none;
color: #fff;
font-size: 18px;
height: 60px;
text-align: center;
}
.checkbox {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<div class="row well well-md well-head">
<div class="col-xs-4">
<p>Items</p>
</div>
<div class="col-xs-3">
<p>Quantity</p>
</div>
<div class="col-xs-3">
<p>In Kit</p>
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="unlabelled-items" name="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-xs-3">
<input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-xs-3">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="in-kit" name="in-kit">
</div>
</div>
</div>
<div class="form-group col-xs-2">
<button class="btn btn-primary" id="add-btn">Add</button>
</div>
</div>
</div>
</form>
</div>
You need to put your text descriptors into columns that match with the columns for you inputs. Like this:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">
<div class="row">
<div class="form-group col-md-5"> Items</div>
<div class="form-group col-md-2">Quantity</div>
<div class="form-group col-md-2">In Kit</div>
</div>
</p>
<form>
<div class="form-group col-md-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-md-2">
<input type="checkbox" id="in-kit">
</div>
<div class="form-group col-md-2">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</div>
</form>
</div>