CSS vertically align components within BootsFaces row - html

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.

Related

How to delete the space between these two elements with bootstrap grid

Here is the code of a login form on which I'm working on:
<main>
<div class="container-fluid">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-6">
<h3 class="display-3">Sign In<h3>
<form class="justify-content-md-center">
<div class="col-md-auto">
<input type="text" required placeholder=" Username"
style="font-family:Arial, FontAwesome">
</div>
<div class="col-md-auto">
<input class="margin-25px" type="password" requires
placeholder=" Password"
style="font-family:Arial, FontAwesome">
</div>
<div class="container-fluid row justify-content-md-center">
<div class="col-sm">
<img class="icon" src="images/check-box.svg"
alt="check-box">
</div>
<div class="col-auto">
<p>Forgot your password?</p>
</div>
</div>
<button class="login__button btn btn-primary" type="submit">
LOGIN
</button>
</form>
</div>
</div>
</div>
</main>
I tried to do the layout with bootstrap grid, but can't find how to nest these two object, which are image with the class icon and the paragraph.
how it looks in chrome

You may use the following lines:
#login .container #login-row #login-column #login-box {
margin-top: 120px;
max-width: 600px;
height: 320px;
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
margin-top: -85px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div id="login">
<h3 class="text-center text-white pt-5">Login form</h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<h3 class="text-center text-info">Login</h3>
<div class="form-group">
<label for="username" class="text-info">Username:</label><br>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="text" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="remember-me" class="text-info"><span>Remember me</span> <span><input id="remember-me" name="remember-me" type="checkbox"></span></label><br>
<input type="submit" name="submit" class="btn btn-info btn-md" value="Login">
</div>
<div id="register-link" class="text-right">
Forgot your password ?
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I already found it in the codepen and I can't remember the author's name to mention here.

bootstrap - move text from one div into other on screen size change

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

Issue centering form inside body | HTML

I currently have this as part of my script, the header and 2 paragraphs are being centered properly, but container and button are off to the left side. I have tried using <center> </center> but I don't know where to properly apply them for the form and button to be centered.
Screenshot of what needs to be centered:
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="jumbotron text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-4">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>

Add 'text-center' class to the row and edit the 'col' classes to have 12 as a sum
<div class="container" >
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row text-center">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="form-group">
<input type="file" name="excelDoc" id="excelDoc" class="form-control" />
</div>
</div>
<div class="col-md-3">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
<div class="col-md-3"></div>
</div>
</form>
</div>

Check out this code:
<div class="text-center">
<h1>Header Text</h1>
<p>Paragraph</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<form action="excel-script.php" method="post" enctype="multipart/form-data">
<div class="row align-items-center justify-content-center">
<div class="col-12 col-md-4">
<div class="custom-file" id="customFile" lang="es">
<input type="file" class="custom-file-input">
<label class="custom-file-label" for="exampleInputFile">
Choose file...
</label>
</div>
</div>
<div class="col-12 col-md-1">
<input type="submit" name="uploadBtn" id="uploadBtn" value="Button" class="btn btn-success" />
</div>
</div>
</form>
</div>
Hope this helps.

Centering own created div class responsive

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;})

How to add spacing between the words in a <p> tag and align them with text boxes in the next div

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>