Exactly as the title says, except labels are not placed fully below them. i'm just making a login page over bootstrap and it turns out labels and inputs styled with bootstrap are the source of this problem. I checked if there could be any typo or misfollowed bootstrap doc on this, but it wasn't that as far as i'm aware. I think this info is enough to come up with an answer, if not so, please let me know.
By the by, i'm using django for the backend.
NAVIGATOR: Google Chrome
GOAL: Labels are fully displayed and correctly aligned beside their respectives inputs.
RENDERED TEMPLATE IMAGE
RENDERED TEMPLATE CODE
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/accounts/css/login.css">
<link rel="stylesheet" href="/static/css/bootstrap.css">
<script defer="" src="/static/js/jquery.min.js"></script>
<script defer="" src="/static/js/bootstrap.js"></script>
</head>
<body cz-shortcut-listen="true">
<div class="login-area my-5 border-dark border rounded">
<div class="image-area border border-top-0">
<img src="/static/accounts/images/user.svg" alt="">
</div>
<form class="" method="POST">
<input type="hidden" name="csrfmiddlewaretoken" value="FKM9D1moYiiOXKvq1gedhgYfa6A5I5ZYQTdSOiY1uBKaHLicQAN1PXZR4GvsgdAL">
<div class="form-group row mb-3 mt-5">
<label for="#username-field" class="col-form-label col-2">Username</label>
<div class="col-10">
<input type="text" class="form-control" id="#username-field" name="username">
</div>
</div>
<div class="form-group row my-3">
<label for="#password-field" class="col-form-label col-2">Password</label>
<div class="col-10">
<input type="password" id="#password-field" class="form-control" name="password">
</div>
</div>
<div class="d-flex justify-content-center my-5 ">
<button class="btn btn-primary font-weight-bold py-2 px-4">Submit</button>
</div>
</form>
<div class="links-area my-4">
Forgot your password?
New here?
</div>
</div>
</body></html>
CSS
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body, body * {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.login-area {
padding: 20px;
}
.login-area .image-area {
width: 300px;
height: 300px;
}
.login-area .image-area img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
Your labels are being clipped because you fixed their width by using col-2. Use col-auto instead so the width is determined by its content. You've also fixed the width on the input div with col-10. Change this to col to span the remaining width of the row.
<div class="form-group row mb-3 mt-5">
<label for="#username-field" class="col-auto col-form-label">Username</label>
<div class="col">
<input type="text" class="form-control" id="#username-field" name="username">
</div>
</div>
Hope this helps.
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Center a column using Twitter Bootstrap 3
(34 answers)
How can I horizontally center an element?
(133 answers)
How do I center floated elements?
(12 answers)
Closed 2 years ago.
I am trying to build a small ToDo App. I am trying to place input field and submit button in the centre, but alignment going to left side.
#todo {
align-items: center;
text-align: center;
}
#todo .form-group {
align-items: center;
margin: auto;
}
#id-button {
margin: 10px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
<div id="todo">
<p>
<h3>Add New ToDo</h3>
<div class="form-group">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Add New ToDo Item">
<button id="id-button" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
JSFiddle
Any suggestions please?
you can do something like this:
When you looking for centering the contents, then CSS has a beautiful class called flex and one of the property called justify-content:center; which will take care of the alignment.
More on Justify-content
add this:
#todo .form-group {
display: flex;
margin: 0 auto;
justify-content: center;
}
#todo {
align-items: center;
text-align: center;
}
#todo .form-group {
display: flex;
margin: 0 auto;
justify-content: center;
}
#id-button {
margin: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="todo">
<p>
<h3>
Add New ToDo
</h3>
<div class="form-group">
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="Add New ToDo Item">
<button id="id-button" type="submit" class="btn btn-primary">
Submit
</button>
</div>
</div>
</div>
You could either modify the css of the .form-group to the below as correctly pointed by below user. Justify-content is the proper way to solve it.
#todo .form-group {
display: flex;
margin: 0 auto;
width: 100%;
justify-content: center;
}
But since you're using bootstrap as a css framework. You could also add <div class="col-xs-4"></div> in the start of <div class="form-group"> as the first child. Refer Bootstrap docs for grid structure. Bootstrap Docs
form {
margin-left: 25%;
margin-right:25%;
width: 50%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
<div id="todo">
<p>
<h3>Add New ToDo</h3>
<div class="form-group">
<div class="col-xs-4">
<form>
<input type="text" class="form-control" placeholder="Add New ToDo Item">
<button id="id-button" type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
I have a few notices on your code:
your <p> tag has no closing.
try removing the "form-group" <div> and class="col-xs-4".
resize the input and out a <br> tag.
your code would be as you desired.
the col-xs-4 and (I think) form-group are Bootstrap classes that override whatever you are trying to do. So, either wrap your code in different <div> or override it in your CSS. Also if you want to use the col class you have to wrap that div in another <div> with "row" class.
So for the life of me I don't know why the background image I designated seems to stretch in width. I looked up for many solutions and tried them but either the background will show only the upper right corner of the image or the upper left corner of the image.
This is the sample PSD I have:
PSD Sample
With my current settings the image is stretched in width for desktop browser.
Here how it looks for me:
Stretched Background Image
Below are part of my HTML markup and CSS settings, I designated the background image for html element. I tried background-size:cover but it didn't work.
[You can ignore the foreign language in the HTML snippet]
/*--------Global--------*/
* {
box-sizing: border-box;
}
html {
background: url('../img/background.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
margin: 0;
}
/*--------Layout--------*/
.main-container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
/*----Flex----*/
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.content-center {
justify-content: center;
}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RenTap</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="main-container flex align-center content-center">
<main>
<img class="logo" src="img/logo.png">
<h1>REN<span class="tap">TAP</span></h1>
<div class="user-info">
<input class="username" type="text" placeholder="שם משתמש">
<br>
<input class="pass" type="password" placeholder="סיסמא">
<br>
<button>התחבר</button>
</div>
<div class="help-and-terms">
<p>
שכחת סיסמא?   <a>לחץ כאן</a>
<br>
<label class="checkbox-label">
<input type="checkbox"> קראתי והסכמתי לתנאי ההשכרה של רנטאפ  <a>לתנאים</a>
<span class="checkmark"></span>
</label>
</p>
</div>
<div class="footer">
<button class="facebook">
<i class="fab fa-facebook-f"></i>
התחבר באמצעות פייסבוק
</button>
<br>
<button class="register">הרשמה</button>
</div>
</main>
</div>
</body>
</html>
You can try
html {
background-size:cover;
background-position:center center;
background-repeat: no-repeat;
}
I am using Bootstrap 4 and have some issues:
Center the input-fiels (inline)
space between these inputs
add a larg textarea under the input-fiels
This is what it looks like currently:
Here is my HTML code:
body {
background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
background-size: cover;
background-position: center;
font-family: Lato;
color: white;
}
html {
height: 100%;
}
#content {
text-align: center;
padding-top: 25%;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}
input.transparent-input {
background-color: transparent;
border: 2px solid white;
}
.form-control::placeholder {
color: white;
}
/* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control {
color: white;
}
/* Internet Explorer*/
.form-control::-ms-input-placeholder {
color: white;
}
/* Microsoft Edge */
.no-padding {
padding-right: 50px;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Zenuni Company</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
<form class="form-inline">
<div class="form-group">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</form>
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</div>
I would appreciate your help!
You can do it in two ways.
the first one is using grid system, this will work in this way:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
The second way that i think will fit better, I'm find this way more helpful when talking about responsive center.
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Hope i could help :)
I just edited your code and added to jsfiddle
your form should be like this to achieve center inputs with margins :
<form class="form-inline justify-content-center">
<div class="form-group space-right">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group space-right">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
<button type="submit" class="btn btn-default my-2 my-sm-0">Send invitation</button>
</form>
with this line of css :
.space-right {margin-right:10px;}
You do not need to use justify-content-center for the row because col-12 takes the whole row.
Instead of form-inline, use two form-row classes inside the form - one for the two inputs and the other for the button. And use a col for each of the inputs should you like to have them side by side on all kinds of devices. Otherwise, use col-* classes as you normally would, for instance, use col-12 col-sm-6 so that they takes the whole width of its parent on mobile but half on other devices. And then use a col class for the button.
You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts. - Bootstrap-4
Restrict the width of the form only. In order to do so, use custom CSS as you have done so. If you do so, use mx-auto for the form to center it horizontally inside its container.
Should you like to have the button in the center of its parent, use text-center for its parent.
https://codepen.io/anon/pen/KBWXME
One more thing, I guess you have used align-items-center to align all the content vertically in the center. If so, use h-100 for all the parents of the container. Otherwise, align-items-center won't work.
body {
background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
background-size: cover;
background-position: center;
font-family: Lato;
color: white;
}
html,
body {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}
input.transparent-input {
background-color: transparent;
border: 2px solid white;
}
.form-control::placeholder {
color: white;
}
/* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control {
color: white;
}
/* Internet Explorer*/
.form-control::-ms-input-placeholder {
color: white;
}
.mw-500px {
max-width: 500px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css" rel="stylesheet" />
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col">
<div id="content">
<h1>Contact Page</h1>
<h3>Contact Us</h3>
<hr>
</div>
<form class="mw-500px mx-auto">
<div class="form-row">
<div class="col-12 col-sm-6 form-group">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="col form-group">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
</div>
<div class="form-row ">
<div class="col-12 col-sm-6 form-group">
<button type="submit" class="btn btn-default">
Send invitation</button>
</div>
</div>
</form>
</div>
</div>
</div>
Your input fields are not centered because they're not part of your #content element. If you move the first </div> tag after <div id="content"> below your submit button, that should take care of that issue.
I'm not sure what exactly you're looking for in terms of space between your input fields. You could just use the </br> tag to make a space, but that will probably be a little ugly. I'd recommend going into your CSS code, selecting .form-inline and messing around with the padding until you're satisfied with how it looks
I don't know exactly what you're trying to do, maybe I could help if you sketched a mock-up of what you're thinking of.
Hope this is useful!
I know this has been answered 100 times, but none of the existing solutions seem to work for me.
I want to center an input field horizontally in a div. Why is horizontal centering such a pain?!?!? The parent div may change in size based on screen size, so margin percentages don't work.
HTML
<div class="select" id="avatar">
<h4>Please enter your name.</h4>
<!-- Object i want to center-->
<div class="input-group">
<input type="text" class="form-control text-center" id="playerName">
</div>
<h4>And Select Your Ship</h4>
<img class="avatars" id="ship1" src="images/spaceship1.png">
<img class="avatars" id="ship2" src="images/spaceship2.png">
<img class="avatars" id="ship3" src="images/spaceship3.png">
<img class="avatars" id="ship4" src="images/spaceship4.png">
<button class="btn" id="submitPlayer">Submit</button>
</div>
parents CSS
.select {
background-color: white;
z-index: 200;
padding: 0px 15px 0px 15px;
text-align: center;
font-family: 'Krona One', sans-serif;
border: medium dashed green;
margin-left: 25%;
margin-right: 25%;
}
I also want to center this one, and I assume it will be the same solution, but it has no parent, besides body.
<div class="input-group">
<input class="text-center" type="text" id="word">
</div>
Why not use Bootstrap's center-block class..
<div class="input-group center-block">
<input class="center-block" type="text" id="word">
</div>
http://www.bootply.com/sTboTk5CvU
inputs and button are like img, you can display them as block and use margin:auto; so they stand alone and in the middle without using 100% of the width/space avalaible :
.select {
background-color: white;
z-index: 200;
padding: 0px 15px 0px 15px;
text-align: center;
font-family: 'Krona One', sans-serif;
border: medium dashed green;
margin-left: 25%;
margin-right: 25%;
}
button.btn#submitPlayer {
display: block;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="select" id="avatar">
<h4>Please enter your name.</h4>
<!-- Object i want to center-->
<div class="input-group">
<input type="text" class="form-control text-center" id="playerName">
</div>
<h4>And Select Your Ship</h4>
<img class="avatars" id="ship1" src="images/spaceship1.png">
<img class="avatars" id="ship2" src="images/spaceship2.png">
<img class="avatars" id="ship3" src="images/spaceship3.png">
<img class="avatars" id="ship4" src="images/spaceship4.png">
<button class="btn" id="submitPlayer">Submit</button>
</div>
and you may do the same with input :
.input-group,
input#word.text-center{
display: block;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<input class="text-center" type="text" id="word">
</div>
I have the following code, which displays a header with in each page of my website:
#header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: burlywood;
color: beige;
border-style: groove;
}
#register {
display: flex;
flex-direction: column;
}
<head>
<title>About HatSpace</title>
<link rel="stylesheet" type="text/css" href="css/about_style.css">
</head>
<body>
<div id="header">
<div>
<h1>HatSpace</h1>
</div>
<div id="register">
<form>
<input style="width: 500px;" type="text" placeholder="Search the Website">
</form>
</div>
<div>
<div>
<p>Log in</p>
</div>
<div>
<p>Sign in</p>
</div>
</div>
</div>
Now, how can I add these three texts right beneath it, so that they will be included in the header div too. I've tried various ways, but it rearranges my header...I just want easier navigation for the user, so that when they click home, they go back home no matter which page they are since it's always part of the header.
Thanks
Wrap your first row in another div inside the header and give it the flex properties you're giving the whole header now. Then make another div with the same flex properties after with the three texts. For example:
<div id="header">
<div id="part1">
<div>
<h1>HatSpace</h1>
</div>
<div id="register">
<form>
<input style="width: 500px;" type="text" placeholder="Search the Website">
</form>
</div>
<div>
<div>
<p>Log in</p>
</div>
<div>
<p>Sign in</p>
</div>
</div>
</div>
<div id="part 2">
// About us, etc...
</div>
#part1 {
display: flex;
justify-content: space-between;
}
#part2 {
display: flex;
justify-content: space-between;
}