Bootstrap4 move login form towards to the center - html

I have the following login page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>
And my problem is that the login form is not too center as I want to as this image shows.
What I want to do is to display like that:
So do you know how to move the whole login form towards the center I tried the bootstrap's d-flex align-items-center justify-content-center class combination and somehow it does center but the flexbox is as height as my login form.
So my guess is on how I can make the flexbox take over the whole remaining height. DO you know how to do that?


You should give height to your container-fluid div in view-port
height: calc(100vh - 60px);
60px is your header height (View in full-screen mode of snippet)
.custom {
height: calc(100vh - 60px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Log in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="/">
<img src="https://loremimage.com/default/32/32/1" />
Διαχείρηση Μελών ΕΛΛΑΚ Κύπρου
</a>
</nav>
</header>
<div class="custom container-fluid d-flex align-items-center justify-content-center">
<div class="row bg-light border border-primary">
<div class="col mt-5 col-xs-12 col-md-12 col-lg-12">
<h1 style="text-align:center">Log in</h1>
<form action="/login_check" method="post">
<div class="form-group">
<input type="text" class="form-control" id="username" name="_username" value="" placeholder="Username" required="required" />
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" name="_password" placeholder="Password" required="required" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" id="remember_me" name="_remember_me" class="form-check-input" />
<label class="form-check-label" for="remember_me" >Remember me</label>
</div>
</div>
<div class="form-row">
<div class="col">
<input type="submit" class="btn btn-primary btn-block" id="_submit" name="_submit" value="Log in" />
</div>
<div class="col">
<a class="btn btn-warning btn-block" href="/resetting/request">I forgot my password</a>
</div>
</div>
</form>
</div>
<div class="col col-xs-12 col-md-12 col-lg-12 mt-1 mb-5">
<a class="btn btn-primary btn-block" href="/register/">I do not have an account</a>
</div>
</div>
</div>
</body>
</html>

Related

Why this button is not getting center?

I am using bootstrap V5 and i wanted to center the login button in the div and i am using mx-auto and also tried text-center but none of this is working.
Where am i getting wrong.
<div className='container my-auto w-50' style={{backgroundColor:"#E8D2A6"}}>
<div className="text-center my-4" style={{fontSize:"2.5rem"}}>Login</div>
<div className="form-group row">
<label htmlFor='userid' className='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter UserId:</label>
<div class="col-8">
<input type="text" id="userid" className='form-control' placeholder='Enter user id'/>
</div>
</div>
<div className="form-group row my-3">
<label htmlFor='userid' className='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter Password:</label>
<div class="col-8">
<input type="text" id="userid" className='form-control' placeholder='Enter Password'/>
</div>
</div>
<button type='button' className="mx-auto btn btn-danger btn-block text-center">Login</button>
</div>

Try this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container my-auto w-50' style={{background-color:"#E8D2A6"}}>
<div class="text-center my-4" style={{fontSize:"2.5rem"}}>Login</div>
<div class="form-group row">
<label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter UserId:</label>
<div class="col-8">
<input type="text" id="userid" class='form-control' placeholder='Enter user id'/>
</div>
</div>
<div class="form-group row my-3">
<label htmlFor='userid' class='col-3 col-form-label' style={{fontSize:"1.3rem"}}>Enter Password:</label>
<div class="col-8">
<input type="text" id="userid" class='form-control' placeholder='Enter Password'/>
</div>
</div>
<div class="form-group row">
<button type='button' class="w-auto mx-auto btn btn-danger btn-block text-center">Login</button>
</div>
</div>

center a container in html using bootstrap

Well this is my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="span4 offset4 centered">
<div class="container overflow-hidden">
<div class="col-6">
<div class="p-3 border bg-light">
<form>
<div class="container px-4">
<div className="container">
<h3>Login</h3>
</div>
<div className="container">
<div className="row align-items-center">
<label>Email address</label>
<input type="email" className="form-control" placeholder="Enter email" />
</div>
</div>
<div className="container">
<div className="row align-items-center">
<label>Password</label>
<input type="password" className="form-control" placeholder="Enter password" />
</div>
</div>
<div className="container">
<div className="row align-items-center">
<div className="custom-control custom-checkbox">
<input type="checkbox" className="custom-control-input" id="customCheck1" />
</div>
</div>
</div>
<div className="container">
<div className="row align-items-center">
<button type="submit" class="btn btn-outline-warning">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
the problem is that I'd like to center it vertical and horizontal. I thoutght this is possible with the <div class="span4 offset4 centered"> but it wasn't. Anyone know an answer?
I also tried to use my own styling but it didn't work too

Why are you not using bootstraps classes? I made some changes in your code. check below code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div style="height: 100vh">
<div class="container h-100">
<div class="row justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="p-3 border bg-light">
<h3>Login</h3>
<form action="">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-outline-warning">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Just add mx-auto and my-auto to the element you want to center within it's parent.
Like this:
<div class="parent">
<div class="container mx-auto my-auto">
<!--Content-->
</div>
</div>
Now .container would be centered vertically and horizontally inside .parent

Im creating a stepper using bootstrap and i have couple of fieldset but it wont work?

So im creating a stepper and and each progress bar has a fieldset but the last fieldset wont work?? It wont go inside the fieldset rather it gets out of the form and it looks like this:
The training fieldset gets out of the form itself.it just wont go in the last progressbar where am i going wrong? what can i do to fix this?
<div class="container-fluid">
<div class="row justify-content-center mt-0">
<div class="col-11 col-sm-9 col-md-7 col-lg-6 text-center p-0 mt-3 mb-2">
<div class="card px-0 pt-4 pb-0 mt-3 mb-3">
<h2><strong>Customer Registration</strong></h2>
<div class="row">
<div class="col-md-12 mx-0">
<form id="msform">
<ul id="progressbar">
<li class="active" id="account"><strong>Personal Information</strong></li>
<li id="personal"><strong>Additional Information</strong></li>
<li id="payment"><strong>Educational Background</strong></li>
<li id="confirm"><strong>Professional Background</strong></li>
</ul>
<fieldset>
<div class="form-card">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">Full Name</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="FirstName MiddleName LastName">
</div>
</div>
</div>
<input type="button" name="next" class=" next action-button" value="Next Step" />
</fieldset>
<fieldset>
<div class="form-card">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">Spouse Full Name</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="FirstName MiddleName LastName">
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next Step" />
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title">Elementary</h2>
<div>
<div id="readroot" style="display: none">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">School</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="School Name">
</div>
</div>
<input class="btn"type="button" value="Remove School"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
</div>
<form method="post" action="/cgi-bin/show_params.cgi">
<span id="writeroot"></span>
<div style="flex:right">
<input class="btn" type="button" value="Add School" onclick="moreFields();"/>
</div>
</form>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next Step" />
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title">Trainings</h2>
<div id="readroot6" style="display: none">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">Title</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="Trainings">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>

Your div with id readroot6 has no closing parameter, your fieldset should become
<fieldset>
<div class="form-card">
<h2 class="fs-title">Trainings</h2>
<div id="readroot6" style="display: none">
<div class="row mx-4">
<div class="col-12 mb-2">
<label class="order-form-label">Title</label>
</div>
<div class="col-12 col-sm-12">
<input class="order-form-input" placeholder="Trainings">
</div>
</div>
</div>
</div>
</fieldset>

Vertical center align for a button in panel header with Bootstrap

I'm working on a Bootstrap 4 HTML page. I put a button in a panel header:
I need to put the button (and the title) in the middle of the panel header. How can I achieve this goal?
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container p-4 ">
<div class="card">
<div class="card-header">
<p class="float-left display-4">Administrator</p>
<a href="#" class="btn btn-primary float-right" style="align-items: center" routerLink="../list" role="button">
<i class="fa fa-arrow-left"></i> Indietro</a>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="displayName">Display name:</label>
<input type="displayName" class="form-control" id="displayName">
</div>
<button type="submit" class="btn btn-primary float-right">Salva</button>
</form>
</div>
</div>
</div>
Thanks

Try using display: flex; for your card header which is available in bootstrap and also instead of using float-right you can use ml-auto to move the button to the right (With the use of flex there is no need to use float properties). Hope this code helps
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container p-4 ">
<div class="card">
<div class="card-header d-flex flex-row align-items-center">
<p class="float-left display-4">Administrator</p>
<a href="#" class="btn btn-primary ml-auto" style="align-items: center" routerLink="../list" role="button">
<i class="fa fa-arrow-left"></i> Indietro</a></div>
<div class="card-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="displayName">Display name:</label>
<input type="displayName" class="form-control" id="displayName">
</div>
<button type="submit" class="btn btn-primary float-right">Salva</button>
</form>
</div>
</div>
</div>

Just add display flex to your card-header class, then align-items: center
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
display: flex;
justify-content: space-between;
align-items: center;
}

Incorrect version of form appearance on resize

Issue Details
When I resize the browser, it displays like this...
I am sorry, Can't show the image due to low reputation points.
Further, when I decrease the browser size, it displays like this...
I am sorry, Can't show the image due to low reputation points.
My JS Fiddle is here
Am I missing anything in below code?
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<main class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card">
<div class="card-header">Login</div>
<div class="card-body">
<form role="form" class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label for="Email Address" class="control-label">UserName Or EmailAddress</label>
<input type="text" name="Email Address" class="form-control">
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label for="Password" class="control-label">Password</label>
<input type="password" name="Password" class="form-control">
</div>
</div>
<div class="col-sm-12 col-md-12">
<div class="form-group">
<button type="button" class="btn btn-primary" >
Login
</button>
<a class="btn btn-link" title="Forgot Password">Forgot Password</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>