How do I centering this form? No matter what I've tried (changing around the div classes, the styles, etc. it still does not center).
I've tried looking at using flex box and other tools but regardless of what I do, if something gets centered, the input field stays to the far left.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row text-center">
<form>
<div class="fc">
<div class="fg cg">
<h3>
Name
</h3>
<input class="fc"style="width: 35%" type="text"></input>
</div>
<div class="fa">
<input class="btn" type="submit" value="Submit"></input>
</div>
</div>
</form>
</div>
You just need to make the form a column, then .text-center works:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row text-center">
<form class="col-12">
<h3>
Name
</h3>
<input class="fc" style="width: 35%" type="text"></input>
<br/>
<input class="btn" type="submit" value="Submit" />
</form>
</div>
<div class="row text-center">
<form>
<h3>
Name
</h3>
<input class="form-control" type="text">
<input class="btn" type="submit" value="Submit">
</form>
</div>
Add margin: 0 auto; like #Sysix has said in the comments
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row text-center">
<form style="margin: 0 auto">
<div class="fg cg">
<h3>
Name
</h3>
<input class="fc"style="width: 35%" type="text"></input>
<div class="fa">
<input class="btn" type="submit" value="Submit"></input>
</div>
</div>
</form>
</div>
Use this in the style
margin-left:auto;margin-right:auto;
Will also center anything for future reference
Also someone has already asked this before here:
Centering a form in bootstrap not working
Well there are many ways of centering. But since you are using Bootstrap I thought I'd try it using Bootstrap classes.
I use the grid system to build a row with one big column spanning the entire row. I wrap the form in a div with a utility class d-flex and modify it with justify-content-center to center it.
Inside the form I use the form-row. Then use form-group to indicate a column inside the form-row. To fix formatting I put form-control on the input.
And finally I put the button on a seperate form-row. This solves your problem with only bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center">
<form>
<div class="form-row">
<div class="form-group">
<label for="name">Name</label>
<input id="name" class="form-control" type="text">
</div>
</div>
<div class="form-row">
<div>
<button class="btn" type="submit">Submit</btn>
</div>
</div>
</form>
</div>
</div>
</div>
Related
Why is the right side not taking the full width of my screen?
I know this could be done better with e.g. two rows, but this way I was able to reproduce the problem.
I am actually having left and right with class .col-md-6, which is showing right in the snipped but wrong on my machine on Firefox and Chromium.
I already tried deleting cache as well, if this comes up.
Thanks for any hint.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-12">
<div id="left_1">left:
<div id="left_2" class="input-group">
<div class="row">
<div class="col-4">
<div class="form-group">
<label for="left_col_1">Left col 1</label>
<input type="text" class="form-control" id="left_col_1">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="left_col_2">Left col 2</label>
<input type="number" class="form-control" id="left_col_2">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="left_col_3">Left col 3</label>
<input type="text" class="form-control" id="left_col_3">
</div>
</div>
<div class="col-2 input-group-append float-right">
<button id="left_button" class="btn btn-danger" type="button">X</button>
</div>
</div>
</div>
</div>
<button id="left_button_2" type="button" class="btn btn-outline-primary">Add left</button>
</div>
<div class="col-12">
<div id="right_1">right:
<div id="right_2" class="input-group">
<div class="row">
<div class="col-10">
<div class="form-group">
<label for="right_col_1">Right col 1</label>
<input type="text" class="form-control" id="right_col_1">
</div>
</div>
<div class="col-2 input-group-append float-right">
<button id="right_button" class="btn btn-danger" type="button">X</button></div>
</div>
</div>
</div>
<button id="right_button_2" type="button" class="btn btn-outline-primary">Add right</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
EDIT: There seems to be a problem with the .input-group and .input-group-append. After I removed all of them it worked as expected.
I think, it's because you are putting flexbox into flexbox ("input-group" class is styled by default as flex and "row" class too). If we remove just "display:flex;" property in "input-group", works fine. In fact, pay attention, that left row doesn't take the full width too - it's almost 100%, but not equal. "Row" class doesn't have as default any width property, so maybe width counting is somehow based on child elements?
I don't think it's the best explanation, but it's very interesting behaviour and it would be great, if someone solve this issue better with fully understanding what's going on there with this flexboxes.
EDIT:
Also styling "input-group" class with "flex-direction: column;" helps. After that "row" is shown as one column with 100% width - without it is taken as just one of potential columns in flexbox's row.
I want to line up label and input tags.
<div class="form-group row">
<label class="form-control-label"
for="field_hasSernum">Has Sernum</label>
<input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
</div>
But the "input" is located under "label" tag
If you review Bootstrap's documentation on its form layout they recommend incorporating their grid system to align your label / input in a horizontal fashion:
<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">
<div class="form-group form-row">
<label class="form-control-label col-2" for="field_hasSernum">Has Sernum</label>
<div class="col-10">
<input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
</div>
</div>
It's really that simple! You can take advantage of all of Bootstrap's grid system to better fine-tune the display on different device sizes, aligning things in different fashions, etc.
You need to specify .col class to make horizontal form.
Ref: https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form
Snippet:
<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">
<div class="form-group row">
<div class="col-3">
<label class="form-control-label" for="field_hasSernum">Has Sernum</label>
</div>
<div class="col-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="hasSernum" id="field_hasSernum">
</div>
</div>
</div>
Using Bootstrap 3 and the simplified code from below, I cannot figure out why the first form shifts a bit to the top compared to the other two forms in the row:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- our own css -->
<link rel="stylesheet" href="{% static 'style.css' %}" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="container-fluid text-center">
<div><h1><b>bohoo</b></h1></div>
<br />
<hr>
<div class="row">
<div class="form-group">
<div class= "col-sm-3 col-md-3 col-lg-3 col-lg-offset-1 col-md-offset-1 col-lg-offset-1 gray">
<h3>here's a title</h3>
<form action="." method="post">
{{numberform}}
<p> </p>
<input type="submit" class="btn btn-primary" name="x" value="A value">
<input type="submit" class="btn btn-warning" name="y" value="A value">
</form>
<br>
</div>
</div>
<div class="form-group move-right">
<div class= "col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 gray">
<h3>here's a title</h3>
<form action="." method="post">
{{textform}}
<input type="submit" class="btn btn-primary" name="z" value="A value">
<input type="submit" class="btn btn-warning" name="y" value="A value">
</form>
<br>
</div>
</div>
<div class="form-group move-right">
<div class= "col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 gray">
<h3>uuu a title</h3>
<form action="." method="post" enctype="multipart/form-data">
{{fileform}}
<input type="submit" class="btn btn-primary" name="a" value="A value">
<input type="submit" class="btn btn-warning" name="b" value="A value">
</form>
<br>
</div>
</div>
</div>
<div class="row">
<div class="text-center">
<hr>
<h3><b>Result:</b></h3>
<div class="col-sm-10 col-md-10 col-lg-10 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
{{result}}
</div>
</div>
</div>
</div>
</body>
</html>
Here is the result in Chrome, tested on multiple screens and sizes:
And here is my style.css:
.gray {
background-color: #f2efef;
border-radius: 15px;
}
.move-right {
padding-left: 200pt;
}
I cannot figure out what could cause the first form from the left to shit to the top a bit. I tried all sorts of gimmicks to fix this, but padding, adding a margin-top, and even adding <br>s did not help.
Thanks.
The form-group class is messing it up. You've wrapped all the 1/3 width div's with full width "form-group" div's.
Take the form-group classes off those div's and add the form-group class to it's child div. The div's with the col-md-3, etc. You could probably get rid of those wrapping div's entirely.
Not sure why that's happening but would this override work?
.gray{
margin-top:0px;
}
I am trying to divide a page into two parts i.e. 6 + 6 columns and put 3 divs horizontally in each part. Divs exceeding 3 align in bottom row in same part of page.
I am trying but still not able to align correctly. Here is my code. How can I do this?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="col-sm-2 mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col-sm-2 mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>
You are missing another inside the tag.
Just add this
<form action="" method="post">
<div class="row">
the class col in bootstrap does it, you need to add a row class div for it, within the row you put the col divs, bootstrap calculates the width accordingly depending on number of cols you put within row div.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row" id="meta-search">
<div class="col-sm-6">
<h5> IDs </h5>
<form action="" method="post">
<div class="row">
<div class="col mb-3">
<label>ID1</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID2</label>
<input type="number" class="form-control">
</div>
<div class="col mb-3">
<label>ID3</label>
<input type="number" class="form-control">
</div>
</div>
<button class="btn btn-primary btn-sm" name="submit1" type="submit">Search Record</button>
</form>
</div>
</div>
I wonder what is best approach to obtain date from date to layot.
So it should be something like:
float center for below two lines
<label for date from><input datepicker> <label for date to><input datepicker>//line 1
<button>//line 2
I've build already(with blessing of bootstrap):
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="float-right">
<span>date from</span>
<input>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="float-left">
<span>date to</span>
<input>
</div>
</div>
</div>
and that almost fits my needs, beside that on mobiles floats destroy whole layout. I think that those float divs should have some how dynamic float depends on resolution or better solution to make on small resolution width 100% for both span and input to create moblie layout like:
label from
input
label to
input
If You already have this one. If you have any question regarding this. ask me in comment. If I have Make any mistake. Please comment below I will try my best to solve your problem. Good luck.
$(document).ready(function () {
$('.pickyDate').datepicker({
format: "dd/mm/yyyy"
});
});
.right{float:right !important;}
.col-sm-12{width:50% !important;}
#media only screen and (max-width:768px) {
.col-sm-12{width:100% !important;}
.right{float:none !important;}
input.pickyDate{width:100%;}
/*Usefull class*/
.topMar {
margin-top: 20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="right">
<span class="lable">date from</span>
<input type="text" placeholder="click to show datepicker" class="pickyDate" />
</div>
</div>
<div class="col-md-6 col-sm-12 topMar">
<span class="lable">date to</span>
<input type="text" placeholder="click to show datepicker" class="pickyDate" />
</div>
</div>
</div>
</body>
If I understand correctly, you shouldn't need to use floats at all. Bootstrap will automatically take care of the alignment of your <div>s. Just reverse the order of your two input fields; the first one will be on the left.
I found nice solution using botstrap css
<form class="form-inline text-center">
<div class="form-group">
<label for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>