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;
}
Related
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>
I'm trying to force a search box to take up the entire width of the container, but I can only ever get it to take up roughly half the width. Here is some representative code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
<div class="input-group-append">
<button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
</div>
</div>
</div>
</div>
And a link to JSFiddle: http://jsfiddle.net/ovLab58u/
I've followed every one of the answers listed here, and nothing seems to be working: Bootstrap 4 inline form full width
Just add display: block style to the div having class input-group either as inline style or as external css class
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" style="display: block;">
<input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
<div class="input-group-append">
<button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
</div>
</div>
</div>
</div>
I just add bootstrap v4.4 CDNs from https://getbootstrap.com/docs/4.4/getting-started/introduction/ to your code and also add a "div closed tag" that you did not closed in your code. and it works correctly. like the code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
<div class="input-group-append">
<button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
</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 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'm using bootstrap styling for form. I want this form to be displayed at the center of the page but I'm not able to do it even though I tried margin 0 auto in css. Can anyone help.
This is the code:
<!doctype html>
<html>
<body>
<h2>Form</h2>
<br>
<form class="form-horizontal inputForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name  </label>
<div class="col-sm-2">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email  </label>
<div class="col-sm-2">
<input class="form-control" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</form>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="styles.css" rel="stylesheet">
</body>
</html>
Screenshot of my browser displaying the above form:
Try this. I've wrapped the form with
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto"></div>
</div>
</div>
.mx-auto centers the column automatically and inside the column you can add your form that has .col-3 and col-9, in my example. But adjust it according to how you need the label and input to be shown.
Here is the CodePen.
Edit: I've realized you're using Bootstrap 3, not 4. In that case, you can try something like this, but it needs a bit of work on mobile. CodePen.
If you don't like to center body, put the form in a div and center that div.
body { text-align: center; border: 1px solid;}
form { margin: auto; width: 200px; border: solid blue; display: block;}
<!doctype html>
<html>
<body>
<h2>Form</h2>
<br>
<form class="form-horizontal inputForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name  </label>
<div class="col-sm-2">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email  </label>
<div class="col-sm-2">
<input class="form-control" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</form>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="styles.css" rel="stylesheet">
</body>
</html>
I want to place the search button in the column next to the input form using the Bootstrap grid, but since both the "input" tag and "button" tag must be in the div with the "form-group" attribute, this makes things difficult.
This is my original code:
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
And this is my failed attempt with nested columns:
<div class="row">
<div class="col-md-12 formMove">
<div class="row">
<div class="col-md-10">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div> <!--I want this closing tag to close "col-md-10", but its closing the "form-group"-->
<div class="col-md-2">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks in advance.
I could not understand why do you need button and input within the same form-group class, as you can use separate form-group class for them.
The approach through which in line forms are achieved is using .form-inline class with the<form> tag. As you wanted an answer using grid system I have provide a snippet for that also.
I have added two snippet
using .form-inline class
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="form-group">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
<br><div id="errors"></div>
</form>
</div>
</div><!--end row-->
</body>
</html>
using bootstrap grid system
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
</div>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
</body>