I am trying to create a mobile login page using bootstrap 5 and a custom css. However, I cannot align the form items inside the form. How could I do this?
.row {
height: 100vh;
justify-content: center;
align-items: center;
/* border: solid 3px black; */
}
.card {
height: 380px;
width: 100%;
background-color: aliceblue;
/* border: solid 3px green; */
}
.card-body {
height: 80%;
width: 100%;
/* border: solid 3px red; */
}
.form-content {
height: 100%;
width: 100%;
/* border: solid 3px blue; */
}
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/custom.css">
<title>Document</title>
</head>
<body>
<div >
<div >
<div >
<div >
<div >
<form >
<div >
<label for="userEmail" >Email address</label>
<input type="email" id="userEmail" aria-describedby="emailHelp">
</div>
<div >
<label for="userPass" >Password</label>
<input type="password" id="userPass">
</div>
<div >
<button type="submit" >Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<style>
.row {
height: 100vh;
justify-content: center;
align-items: center;
/* border: solid 3px black; */
}
.card {
height: 380px;
width: 100%;
background-color: aliceblue;
/* border: solid 3px green; */
}
.card-body {
height: 80%;
width: 100%;
/* border: solid 3px red; */
}
.form-content {
height: 100%;
width: 100%;
/* border: solid 3px blue; */
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
I appreciate any help!!
CodePudding user response:
How do you want to align it ?
If you want to align it in the center, use those properties applied your form tag in css:
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
or in bootstrap add in the form classes :
<form >
CodePudding user response:
You can add mt-2
with your second and third form-group
classes. This will had a half rem
of margin for each specified area.
.row {
height: 100vh;
justify-content: center;
align-items: center;
/* border: solid 3px black; */
}
.card {
height: 380px;
width: 100%;
background-color: aliceblue;
/* border: solid 3px green; */
}
.card-body {
height: 80%;
width: 100%;
/* border: solid 3px red; */
}
.form-content {
height: 100%;
width: 100%;
/* border: solid 3px blue; */
}
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/custom.css">
<title>Document</title>
</head>
<body>
<div >
<div >
<div >
<div >
<div >
<form >
<div >
<label for="userEmail" >Email address</label>
<input type="email" id="userEmail" aria-describedby="emailHelp">
</div>
<div >
<label for="userPass" >Password</label>
<input type="password" id="userPass">
</div>
<div >
<button type="submit" >Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<style>
.row {
height: 100vh;
justify-content: center;
align-items: center;
/* border: solid 3px black; */
}
.card {
height: 380px;
width: 100%;
background-color: aliceblue;
/* border: solid 3px green; */
}
.card-body {
height: 80%;
width: 100%;
/* border: solid 3px red; */
}
.form-content {
height: 100%;
width: 100%;
/* border: solid 3px blue; */
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>