I am trying to make 3 form boxes to be inline with each other but have a width of 100% (but be able to specify the width of each section, or even better, have the last two form sections be their automatic/standard size and make the first section fill the rest of the space).
Currently I have:
<div class="row">
<form class="form-inline" role="form" name="input" action="LINK_HERE" method="post">
<div class="form-group">
<label class="sr-only" for="lg_query">Label</label>
<input type="text" class="form-control" name="query" id="lg_query" placeholder="Placeholder" autofocus="autofocus" value="VALUE" required />
</div>
<div class="form-group">
<label class="sr-only" for="SOMEID">text</label>
<select class="form-control">
<option value="1">se</option>
<option value="3" selected>ros</option>
<option value="14">rds</option>
<option value="4">sbh</option>
<option value="7">sc</option>
<option value="8">rcs</option>
<option value="9">rns</option>
<option value="10">rws</option>
<option value="12">rps</option>
</select>
</div>
<button type="submit" class="btn btn-default" name="module1"><span class="glyphicon glyphicon-pencil"></span> Edit</button>
</form>
</div><!-- /.row -->
http://jsfiddle.net/isherwood/zSb22/
Thanks so much in advance!
The usual approach is to simply use Bootstrap's grid:
http://jsfiddle.net/isherwood/zSb22/3
<div class="col-xs-4">
Here's an example with better block layout and width variations:
http://jsfiddle.net/isherwood/zSb22/4
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.
I try to add a checkbox after all my <select> dropdowns but in the same row / line. I have a really hard time doing so, I tried quite some time now and I can't get it to work on my own. The CSS comes from Bootstrap 3.
Here is how my Code and Form looks like:
<form role="form" id="newchar" name="newchar" method="POST" action="inc/insertchar.php">
<div class="row">
<div class="form-group col-sm-3">
<label for="charname">Charactername</label>
<a href="#" data-toggle="tooltip" data-placement="right" title="maximal 16 Zeichen - bestehend aus Zahlen und Buchstaben">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</a>
<input type="text" class="form-control" name="charname" id="charname" placeholder="Charactername" required="required" />
</div>
</div>
<div class="row">
<div class="form-group col-sm-3">
<label for="c1">Circles:</label>
<div class="form-group">
<select name="circle_1" id="c1" class="form-control circle-select">
<option value="">Circle 1</option>
<option value="class_1">Archer</option>
<option value="class_2">Cleric</option>
<option value="class_3">Swordsman</option>
<option value="class_4">Wizard</option>
</select>
</div>
<div class="form-group">
<select name="circle_2" id="c2" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 1 first</option>
</select>
</div>
<div class="form-group">
<select name="circle_3" id="c3" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 2 first</option>
</select>
</div>
<!-- and more ... -->
Full Code and Preview: https://jsfiddle.net/hd7fzp95/
You need to use form-inline class on your form.
http://www.bootply.com/WpiddtxsOh
I have a forw, in which i need to display two field near each other: select + input. My code is:
<div role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter date" id="maps-filter-input-date">
</div>
<div class="form-group" id="maps-filter-select-track">
<select class="form-control" class="display-inline-block">
<option>Select date</option>
</select>
<input type="text" class="form-control" placeholder="Enter date">
</div>
<div class="form-group" id="maps-filter-select-track">
<select class="form-control">
<option>Select date</option>
</select>
<input type="text" class="form-control" placeholder="Enter date">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
Looks it like this:
With black color is show where it should be. So is it possible to do with default bootstrap classes?
From the Bootstrap doc:
Add .form-inline to your for left-aligned and inline-block controls.
You will also need to set custom width to your form elements, see details here
Change
<div class="form-group" id="maps-filter-select-track">
to
<div class="form-group form-inline" id="maps-filter-select-track">
here's bootply
http://www.bootply.com/e2BS204U7b
I tried to use Bootstrap's inline form but oddly the submit button can't be put on the same line with other input items. I had been searching for solutions but didn't find one yet.
Here is my HTML code:
<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
<input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
<input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
<input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
Status: <select class="selectpicker" id="status" name="status" >
<option value="All">ALL</option>
<option value="Successful">Successful</option>
<option value="Unsuccessful">Unsuccessful</option>
</select>
</div>
<div class="form-group">
Direction: <select class="selectpicker" id="direction" name="direction">
<option value="All">All</option>
<option value="IN">In</option>
<option value="OUT">Out</option>
</select>
</div>
<button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
</form>
Can somebody help me to inline the submit button with the other items? Thanks a lot!
Put your button inside the <div class="form-group">
<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
<input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
<input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
<input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
Status: <select class="selectpicker" id="status" name="status" >
<option value="All">ALL</option>
<option value="Successful">Successful</option>
<option value="Unsuccessful">Unsuccessful</option>
</select>
</div>
<div class="form-group">
Direction: <select class="selectpicker" id="direction" name="direction">
<option value="All">All</option>
<option value="IN">In</option>
<option value="OUT">Out</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
</div>
</form>
I copied your form into a test project and bootstrap properly inlined the submit button. In addition, I made some changes to your html above. I removed the terminator from the "button" element on your submit button and I removed the extra quote on the textbox with an id of "number". Moving the button inside or outside of a form-group made no difference for me.
While testing, and looking at your link, I noticed that bootstrap wrapped your form on the appropriate media width boundary. Make sure that your form is not just wrapping, like it's supposed to. If it's wrapping, reduce the horizontal footprint of your form using collapse.
There is an example in the bootstrap docs here...
http://getbootstrap.com/components/#navbar-default
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...