This question already has answers here:
Align the form to the center in Bootstrap 4 [duplicate]
(3 answers)
Closed 2 years ago.
I'm trying to put a text field in the center of me screen, yet everything I try, it just stays left align. How do I center this?
<div class="form-row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control" />
</div>
</div>
</div>
Solution 1) You can use class= "offset-md-4" in bootstrap-4. It's not col-md-offset-4
<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>
<div class="form-row">
<div class="col-md-4 offset-md-4">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control" />
</div>
</div>
</div>
Solution 2) You can use class="mx-auto" which is nothing but margin-left:auto
<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>
<div class="form-row">
<div class="col-md-4 mx-auto">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control" />
</div>
</div>
</div>
You are using bootstrap so just simply put text-center class on input like this.
<div class="form-row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control text-center" />
</div>
</div>
i tried your cod ants all center after putting the class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Souk</title>
<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://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</head>
<body>
<div class="row">
<div class="offset-4 col-sm-4">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control text-center" />
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<div class="col-md-4 col-md-offset-4">Put your form here</div>
col-md-4 will take 4 columns out of 12.
col-md--offset-4 will add one 4 column to both sides of this form.
You needed to show your custom css. Perhaps there are rules that may override the rules suggested here.
Try like this:
div.form-row div.col-md-4.col-md-offset-4 div.form-group {
display: flex!important;
justify-content: center!important;
}
<div class="form-row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control" />
</div>
</div>
</div>
Related
I have downloaded a login template for a project and I am trying to add a logo to the site.
Below is the html code I'm using
.logo{
position:absolute;
top: 5%;
left: 10%;
height: 100px;
width: 100px;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>RNL Trading intern</title>
<link rel="icon" type="image/x-icon" href="img/test-image.png">
</head>
<body >
<div class="logo" src="icons/test-image.png" alt="rnl-logo"></div>
<div class="d-flex align-items-center light-blue-gradient" style="height: 100vh;">
<div class="container" >
<div class="d-flex justify-content-center">
<div class="col-md-6">
<div class="card rounded-0 shadow">
<div class="card-body">
<h3>Log in</h3>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Wachtwoord</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</div>
</body>
</html>
The favicon works so the image source is valid. I wrote a little css to size up the image and position it to the top left:
This is what shows up on the page after refreshing cache:
<div class="logo" src="icons/test-image.png" alt="rnl-logo"></div>
You can't use an image directly without using img tag.
The correct way should be :
<div class="logo">
<img class="" src="./icons/test-image.png" alt="rnl-logo">
</div>
OR:
<img class="logo" src="./icons/test-image.png" alt="rnl-logo">
Reference : : The Image Embed element
I'm currently using Bootstrap 4 for a project in a JavaScript course im following, and im doing the HTML, but i've run into an issue with the input-group-addon class on a span. It's not showing like the icon is showing in the tutorial
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Loan Calculator</title>
</head>
<body class="bg-dark">
<div class="contr">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Loan Calculator</h1>
<form id="loan-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span id="input-group-addon">%</span>
<input type="number" class="form-control" id="interest" placeholder="Interest Rate">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
Your structure and class names are a little bit off. You need a span.input-group-text nested inside a div.input-group-prepend
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
.input-group-addon does not appear in the v4.0 documentation that was for v3.
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
So i want this form which is in a card to be in the middle of the whole web page and responsive.I tried changing the height of everything to h-100 and align-items-center and nothing seems to work.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
html,body{
height: 100%;
}
</style>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100 ">
<div class="col-md-6 h-100 ">
<div class="card">
<div class="card-body">
<div class="card-title"><h3>Log In</h3></div>
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" value="Username" placeholder="Donald Trump...">
</div>
<div class="form-group">
<label for="username">Password</label>
<input class="form-control" type="password" name="password" value="Password" placeholder="**********">
</div>
<input class="btn btn-primary" type="submit" name="" value="LogIn">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I was expecting this:
enter image description here
but i get this:
enter image description here
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
html,body{
height: 100%;
}
</style>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="card-title"><h3>Log In</h3></div>
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" value="Username" placeholder="Donald Trump...">
</div>
<div class="form-group">
<label for="username">Password</label>
<input class="form-control" type="password" name="password" value="Password" placeholder="**********">
</div>
<input class="btn btn-primary" type="submit" name="" value="LogIn">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
For more information: https://getbootstrap.com/docs/4.0/utilities/flex/#align-items
If I do not set my HTML and BODY tag class = "h-100" They are showing at like 210 pixels. I then have to keep setting lower level elements to h-100 also.
I'm really not sure how to fix it other than adding the h-100
<html class="h-100" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="h-100">
I believe that the correct result of bootstrap HTML and body is that it should size it self roughly to the size of the viewing medium.
Here is the full page of what I'm trying to accomplish on jsfiddle.
https://jsfiddle.net/v2cqh3n8/
The reason I am trying to have the body set to a nice size is because I want to center align the login form. Which I am also having trouble with.
Try this bootstrap solution. Hope it works better for you, without adding height to BODY and HTML Tag .
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-6 mx-auto">
<div class="form-group">
<label for="">Username</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="text" class="form-control">
</div>
<button class="btn btn-primary">Log-in</button>
</div>
</div>
</div>
It worked by simply adding height to body in vh unit. h-100 justify-content-center to .row
Here is working example:
https://jsfiddle.net/HarishBoke/faocwnp6/1/
If all you want to do is put the form in the centre of the page, just use flexbox.
I've added in you js fiddle with the correct bootstrap classes.
The reason you need to set h-100 on these elements is that the content within those elements is not filling the DOM.
Side-note: You also don't need all of the containers/rows if you're just centering the element.
<!doctype html>
<html class="h-100" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="h-100 d-flex align-items-center justify-content-center">
<form action="/login" method="POST" class="w-50">
<div class="form-group">
<label for="username-input"> Username </label>
<input name="username" type="text" class="form-control" id="username-input" placeholder="Username">
</div>
<div class="form-group">
<label for-"password-inpiut"> Password </label>
<input name="password" type="password" class="form-control" id="password-input" placeholder="Password">
</div>
<button class="btn btn-primary" type="submit"> Log-in </button>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Just set the height of the html and body to 100% using css or h-100 classes and then add d-flex and align-items-center classes to the body.
html,
body {
height: 100%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title> index </title>
</head>
<body class="d-flex align-items-center">
<div class="container-fluid">
<div class="row">
<div class="col">
<form action="/login" method="POST" class="w-50 mx-auto">
<div class="form-group">
<label for="username-input"> Username </label>
<input name="username" type="text" class="form-control" id="username-input"
placeholder="Username">
</div>
<div class="form-group">
<label for="password-inpiut"> Password </label>
<input name="password" type="password" class="form-control" id="password-input"
placeholder="Password">
</div>
<button class="btn btn-primary" type="submit"> Log-in </button>
</form>
</div>
</div>
</div>
</body>
</html>
I cant seem to make this work. I wanted a simple responsive login page but the form doesn't stay on the center, it keeps going to the left.
Why this is not working?? If I divide the col into 3 sections of 4, should the it stay on the middle?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="jumbotron" style="margin-top:150px">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</body>
</html>
I've added a class named col-centered. You can see an example below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<meta charset="utf-8">
<title>Login</title>
<style>
.col-centered{
float: none;
margin: 0 auto;
}
</style>
</head>
<body style="background-color: #4b5257">
<div class="container">
<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4 col-centered">
<div class="jumbotron">
<h3>Please login</h3>
<form action="Dashboard.jsp">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Enter password">
</div>
<div class="custom-checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn-primary form-control">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>