I'm having difficulty placing two and one text input in a single row in my form. I am able to get the two selects inline but the text input is being stubborn. Here is how it looks with the current code:
<form role='form' action='#' method='post'>
<div class='form-group'>
<label for='query-bar' class='sr-only'></label>
<input type='text' class='form-control' placeholder='Enter search query..' name='query-bar' />
</div>
<div class='form-inline'>
<div class='form-group'>
<select name='builder-columns' class='form-control'>
<option selected disabled value='none'>Columns</option>
<option></option>
</select>
</div>
<div class='form-group'>
<select name='builder-operators' class='form-control'>
<option selected disabled value='none'>Operators</option>
</select>
</div>
<div class='form-group'>
<label for='builder-filter' class='sr-only'></label>
<input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
</div>
</div>
</form>
You could use the following:
<div class='form-inline row'>
<div class='form-group col-sm-4'>
<select name='builder-columns' class='form-control'>
<option selected disabled value='none'>Columns</option>
</select>
</div>
<div class='form-group col-sm-4'>
<select name='builder-operators' class='form-control'>
<option selected disabled value='none'>Operators</option>
</select>
</div>
<div class='form-group col-sm-4'>
<label for='builder-filter' class='sr-only'></label>
<input type='text' placeholder='Filter' name='builder-filter' class='form-control' />
</div>
</div>
.form-inline .form-control {
width: 100%;
}
The class row was added to the form-inline elements, and the class col-sm-4 was added to the form-group elements. In addition, the width of the .form-control elements was set to 100% in order to overwrite width: auto which is applied at certain screen sizes.
Example Here
Related
I have tried to place a search form into 2 parent divs. Whether I try the align or justify utility neither of them are able to center the search bar in the middle of the page, where I want it.
<div class="col">
<div class"container-fluid justify-content-center" id="searchform">
<form class="form-floating form-control-sm" id="form">
<div class="row " id="div_main">
<div class="col-auto " id="div_Location">
<label for="Location">Hunt Location</label><br>
<select name="cars" id="Location">
<option value="Gauteng">Gauteng</option>
<option value="Western Cape">Western Cape</option>
<option value="Northern Cape">Northern Cape</option>
<option value="North West">North West</option>
<option value="Limpopo">Limpopo</option>
<option value="Free State">Free State</option>
<option value="Mpumalanga">Mpumalanga</option>
<option value="Eastern cape">Eastern Cape</option>
<option value="Kwa-zulu Natal">kwa-zulu Natal</option>
</select>
</div>
<div class="col-auto" id="div_Animal">
<label for="Animal">Animal</label><br>
<select name="Animals" id="Animal">
<option value="" id="ListAnimal"></option>
</select>
</div>
<div class="col-auto" id="div_Check-in">
<label for="Check-in">Check-in</label>
<input type="date" class="form-control" id="Check-in" placeholder="Check-in" value="">
</div>
<div class="col-auto" id="div_Check-out">
<label for="floatingInputValue">Check-out</label>
<input type="date" class="form-control" id="Check-out" placeholder="Check-out" value="">
</div>
<div class="col-auto" id="div_Hunters">
<label for="Hunters">Hunters</label>
<input type="number" class="form-control" id="Hunters" placeholder="5" value="">
</div>
<div class="col-auto">
<button type="button" class="btn btn-dark d-iline" id="searchbutton"><img src="img/search.png"></img></button>
</div>
</div>
</form>
</div>
</div>
The default behavior of col is to take up 100% of the available space, so justify-content-center won't have any meaningful effect as the column is already at a width of 100% and cannot be centered relative to the parent container.
If we clean up your code the results you expect can be achieved fairly easily (Note: You will need to run this snippet full screen to see it centered).
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-auto" id="search-form">
<form class="form-floating form-control-sm" id="form">
<div class="form-row" id="div_main">
<div class="col-auto" id="div_Location">
<label for="Location">Hunt Location</label><br>
<select name="cars" id="Location" class="custom-select">
<option value="Gauteng">Gauteng</option>
<option value="Western Cape">Western Cape</option>
<option value="Northern Cape">Northern Cape</option>
<option value="North West">North West</option>
<option value="Limpopo">Limpopo</option>
<option value="Free State">Free State</option>
<option value="Mpumalanga">Mpumalanga</option>
<option value="Eastern cape">Eastern Cape</option>
<option value="Kwa-zulu Natal">kwa-zulu Natal</option>
</select>
</div>
<div class="col-auto" id="div_Animal">
<label for="Animal">Animal</label><br>
<select name="Animals" id="Animal" class="custom-select">
<option value="" id="ListAnimal"></option>
</select>
</div>
<div class="col-auto" id="div_Check-in">
<label for="Check-in">Check-in</label>
<input type="date" class="form-control" id="Check-in" placeholder="Check-in" value="">
</div>
<div class="col-auto" id="div_Check-out">
<label for="floatingInputValue">Check-out</label>
<input type="date" class="form-control" id="Check-out" placeholder="Check-out" value="">
</div>
<div class="col-auto" id="div_Hunters">
<label for="Hunters">Hunters</label>
<input type="number" class="form-control" id="Hunters" placeholder="5" value="">
</div>
<div class="col-auto align-self-end">
<button type="button" class="btn btn-dark" id="searchbutton">Search</button>
</div>
</div>
</form>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
First I've applied the correct Grid components of container-fluid and row to make sure that everything is lined up as one would expect within Bootstrap. You may have omitted that for brevity but I wanted to make sure it was shown.
Changing .col to .col-auto will allow the form's parent element to take up only as much width as needed, which will allow justify-content-center to center the column when applied to row.
If you don't want to apply that class to the row wrapper, you can apply mx-auto to the col-auto wrapper.
A couple of house-keeping notes:
As isherwood stated in the comments, your original use of an additional container element is not needed, and is in fact frowned upon as it can result in unexpected issues.
The <img> tag is self-closing, meaning you should format it either as <img src="..." /> or without the self-closing slash. </img> does not exist.
Is it ok to put <h3> inside <form> like below ?
<form>
<h3>Business Information</h3>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="TypeOfEntity" class="form-font">Type of Entity</label><br>
<select class="form-control" id="TypeOfEntity">
<option selected disabled >Select</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="NoOfDirection" class="form-font">No of Direction</label><br>
<select class="form-control" id="NoOfDirection">
<option selected disabled >Select</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="EntityName" class="form-font">Entity Name</label><br>
<input class="form-control" id="EntityName" placeholder="Select">
</div>
</div>
</div>
</form>
You can allways check validation on validator.w3.org
In my opinion you can put it inside or outside of the form tag.
Depending on how reusable your component will be.
If you use same form in multiple places but you want to change the title than put it outside the form. Else you can leave it inside the form tag.
I want to make a form that adheres to design specifics that require me to align some fields to the left side of the viewport, and other fields that align to the right side. Here is what I have so far:
<form class="form-inline">
<div class="form-group">
<h2>Order Entry</h2>
<label for="ipt_authNum">Authorization Number</label>
<input class="form-control" type="text" id="ipt_authNum" />
</div>
<div class="form-group">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group">
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
</form>
As you can see, this block of markup makes a form where the fields are stacked on top of each other. Instead of that, I want the "Customer" and "Bill To" fields (labels included) to be across from each other on the same line (with the labels inline). Note that mobile design considerations are not required for this application; it will be a company intranet type deal where employees are only allowed to access the application via a desktop computer. Any help is greatly appreciated. Also, there are many more fields to add to this form. I just wanted to get an idea before I got too far into it. Thanks.
You can use bootstrap grid system to align labels and fields in the form. Below is the sample form. You can refer here for some examples. The important thing is the row and col-md-* classes applied to the divs for bootstrap grid system to align the form accordingly.
View the below example in full page view to see form layout. Hope this helps.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<h2>Order Entry</h2>
<div class="container">
<div class="row">
<div class="col-md-2"><label for="ipt_authNum">Authorization Number</label></div>
<div class="col-md-3"><input class="form-control" type="text" id="ipt_authNum" /></div>
<div class="col-md-7"> </div>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-md-2">
<label for="ipt_customer">Customer</label>
</div>
<div class="col-md-3">
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="row">
<div class="col-md-2"><label for="ipt_billTo">Bill To</label></div>
<div class="col-md-4"><input class="form-control" type="text" id="ipt_billTo" /></div>
</div>
</div>
</form>
I think using one <div class="form-group"> will work. Like :
<div class="form-group">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
Maybe add some bootstrap col ?
<div class="form-group">
<div class="col-md-6">
<label for="ipt_customer">Customer</label>
<select class="form-control" id="ipt_customer" style="width:30%;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="col-md-6">
<label for="ipt_billTo">Bill To</label>
<input class="form-control" type="text" id="ipt_billTo" />
</div>
</div>
.form-inline require costume width on the inputs and only applies to forms within viewports that are at least 768px wide.
https://getbootstrap.com/docs/3.3/css/#forms
You should add col classes to your elements also for better results.
I have two buttons a dropdown and a text input that I want to vertically align. They are barely off by 1 px, but they are off and it is driving me nuts.
See the code below:
<div style="text-align:center;padding-top:85px">
<form role="form" class="form-inline ">
<div class="form-group">
<select class="form-control selectWidth" style="width:auto">
<option> Primary Care Physician </option>
<option> Dermatologist </option>
<option> Orthodontist </option>
</select>
</div>
<input type="text" class="form-control" placeholder="Enter Zip Code">
</form>
</div>
HTML:
<div ng-repeat="param" class="test row">
<div class="col-sm-4">
<select class="form-control">
<option> Primary Care Physician </option>
<option> Dermatologist </option>
<option> Orthodontist </option>
</select>
</div>
<div class="col-sm-8">
<input type="url" class="form-control col-sm-8 invalidInput" placeholder="Enter Zip Code">
</div>
</div>
CSS:
.test{
width:50%;
}
See JsFiddle
I have this code snippet, but this renders dropdown after line break, What's the best bootstrap 3 col class to get it correct? (select dropdown next to input medium-inline)
<form class="form-horizontal well" >
<div class="form-group">
<label class="col-lg-2 control-label">Memory</label>
<div class="col-lg-4">
<div>
<input id="memory" type="text" class="form-control">
</div>
<div class="col-lg-4">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</div>
</div>
</form>
Ok, this is how I would do it.
First add the form-inline class to your form.
Then remove the col-lg classes from labels and inputs.
Also remove all un-needed divs too, which results in the below html:
Markup
<form class="form-inline well" >
<div class="form-group">
<label class="control-label">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Screen grab
If you want your form-fields to align horizontally - you can actually use the inline form. eg:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="memory">Memory</label>
<input id="memory" type="text" class="form-control">
</div>
<div class="form-group">
<select id="memoryType" class="form-control">
<option value="GB" selected="selected">GB</option>
<option value="MB">MB</option>
</select>
</div>
</form>
Note: not tested in an actual browser...