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
Related
I tried coding this but i dont get the expected output, i also tried to use inline but it doesnt work too.
maybe someone can help me show the expected output. thank you
<form action="" method="POST">
<!-- Row -->
<div class="row gx-4 mb-1">
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Student name</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Address</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
</div>
<!-- Row -->
<div class="row gx-4 mb-1">
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">ID Number</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
<!-- -->
<div class="col-md-6">
<label class="small mb-1" for="">Email</label>
<input class="form-control form-control-sm" name="" id="" type="text" value=""/>
</div>
</div>
</form>
here is the sample result
Wrapping the label and input in a row with 2-10 columns should do it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="row px-4 mt-4">
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row px-4 mt-4">
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6 row mb-3">
<div class="col-2 col-form-label">
Label
</div>
<div class="col-10">
<input type="text" class="form-control">
</div>
</div>
</div>
</body>
</html>
You can adjust the padding/margin according to your needs.
i'm working on laravel project , i need to make this form responsive , i added this <meta name="viewport" content="width=device-width, initial-scale=1.0">
but nothing change
any suggestions ?
and thank you
This is the form :
<section>
<p>Gestion des horaires</p>
<div class="row">
<div class="col-4">
<label>Lundi matin </label>
<div class="row">
<div class="col">
<input type="time" name="lun_mat1[]" />
</div>
<div class="col">
<input type="time" name="lun_mat1[]" />
</div></div>
</div>
<div class="col-4">
<label>Lundi après-midi </label>
<div class="row">
<div class="col">
<input type="time" name="lun_ap1[]" />
</div>
<div class="col">
<input type="time" name="lun_ap1[]" />
</div>
</div> </div>
<div class="col-4">
<input type="checkbox" name="rememberMe"> Fermer
</div>
</div>
</section>
I think you need to use specific col numbers and breakpoint to make you code responsive. Added col-sm-4 col-12 to your main columns. It means this block will be 4/12 of width until Small (576px) bootstrap width. And then it will we 12/12 width. More about bootstrap breakpoints ans cols here https://getbootstrap.com/docs/4.0/layout/grid/
Although added class="form-control" to your inputs. Now they are responsive too
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<section class="container-fluid">
<p>Gestion des horaires</p>
<div class="row">
<div class="col-sm-4 col-12">
<label>Lundi matin </label>
<div class="row">
<div class="col">
<input type="time" class="form-control" name="lun_mat1[]" />
</div>
<div class="col">
<input type="time" class="form-control" name="lun_mat1[]" />
</div>
</div>
</div>
<div class="col-sm-4 col-12">
<label>Lundi après-midi </label>
<div class="row">
<div class="col">
<input type="time" class="form-control" name="lun_ap1[]" />
</div>
<div class="col">
<input type="time" class="form-control" name="lun_ap1[]" />
</div>
</div>
</div>
<div class="col-sm-4 col-12">
<input type="checkbox" name="rememberMe"> Fermer
</div>
</div>
</section>
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.
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>
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>