I wonder how to implement Bootstrap4 input group label between two input field. There are "prepend" and "append" styles, but in this case an ... don't know how to name it ... "center" style is needed. Am I missing something?
The corners of the element should not be rounded - this is a visual requirement. We must solve the problem entire using only bs4 pre-defined classes and styles, no local style="..." element is enabled. Know anybody the solution? Thanks!
<div class="form-group col-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Date interval:</span>
</div>
<input type="text" class="form-control" name="dateFrom" placeholder="YYYY-MM-DD" value="2020-05-19">
<span class="input-group-text">-</span>
<input type="text" class="form-control" name="dateTo" placeholder="YYYY-MM-DD" value="2020-06-19">
</div>
</div>
Bootstrap provides border classes.
What is causing the rounded edges is a CSS property called border-radius.
The Bootstrap border classes most relevant to you would be the following:
rounded-left (rounds left side corners)
rounded-0 (Equal to border-radius: 0px; - i.e. no rounded corners)
rounded-right (rounds right side corners)
All you need to do is add those classes to the elements so that it fits your desired needs.
More about Bootstrap border classes here.
Snippet Example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-10">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-left">Date interval:</span>
</div>
<input type="text" class="form-control rounded-0" name="dateFrom" placeholder="YYYY-MM-DD" value="2020-05-19">
<span class="input-group-text rounded-0">-</span>
<input type="text" class="form-control rounded-right" name="dateTo" placeholder="YYYY-MM-DD" value="2020-06-19">
</div>
</div>
Codepen Example here.
Related
I'm using bootstrap to make input elements with prepended text, using code from
https://getbootstrap.com/docs/4.0/components/input-group/#basic-example
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">#</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
The problem is that the inputs are wrongly displayed:
This is how it should be displayed
I already deleted all the contents of my css file to test if the problem was there but it isn't.
I assume that can be fixed with css, but I don't know how.
For that to happen your classes are not calling the CSS anexed to them.
I've tried all the suggestions on here, even using this link Bootstrap horizontal-form. But nothing seems to work. I want to be try to just change the css, but at this point, anyway that works be great. I just want the label to be in the same line as the input. So basically all of the inputs and labels go across one line in one row. While also keeping the bootstrap form-control
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="" class="row py-2 rowRecordBorder" data-toggle="tooltip" data-original-title="">
<div class="app-col col-12 col-md-2 bottom-align ">
<label class="active">Storage Phone #</label>
<input type="tel" id="t887" name="t887" onchange="buildTejPost('t887', 1);" value="100 100 1000" class="form-control" onfocus="$('#t887').inputmask({'mask': '(999) 999-9999'});" onblur="phoneNumberCheck(this);" style="border-color: green;">
</div>
<div class="app-col col-12 col-md-2 bottom-align ">
<label class="active">Storage Fax #</label>
<input type="tel" id="t888" name="t888" onchange="buildTejPost('t888', 1);" value="000 000 0000" class=" form-control" onfocus="$('#t888').inputmask({'mask': '(999) 999-9999'});" onblur="phoneNumberCheck(this);">
</div>
<div class="app-col col-12 col-md-2 bottom-align ">
<label class="active">Storage Pickup Time Open</label>
<input type="text" id="t889" name="t889" onchange="buildTejPost('t889', 1);" value="9:00AM" class=" form-control" maxlength="128">
</div>
<div class="app-col col-12 col-md-2 bottom-align ">
<label class="active">Storage Pickup Time Close</label>
<input type="text" id="t890" name="t890" onchange="buildTejPost('t890', 1);" value="3:00PM" class=" form-control" maxlength="128">
</div>
</div>
The quickest way to put a series of labels and form controls on a single horizontal row is to use .form-inline: https://getbootstrap.com/docs/4.5/components/forms/#inline-forms
<div class="form-inline">
<label />
<input />
<label />
<input />
<label />
<input />
<label />
<input />
</div>
demo: https://jsfiddle.net/davidliang2008/edy16zx5/12/
Or you can use the Grid system to construct the columns, each of which contains a label and an input, just like how you've setup. In order to have the label and the input on one line, within each column, the trick is to have the column display as flex box as well:
<div class="row">
<div class="col-12 col-md-2 d-flex flex-row flex-nowrap align-items-center">
<label />
<input />
</div>
...
</div>
You can reference Flex utilities here: https://getbootstrap.com/docs/4.5/utilities/flex/
d-flex: display as flex, enables flexbox behaviors
flex-row: set its direction to row
flex-nowrap: no wrapping at all when overflow
align-items-center: set center aligment for flex items
demo: https://jsfiddle.net/davidliang2008/edy16zx5/16/
In both cases, you, as the developer, do need to consider how to place those input elements, especially when there are limited spaces! You can't just expect Bootstrap to automatically handle that for you.
I know this kind of question has been asked before, but the solutions listed there did not work for me.
I have two divs, one with text and the other one has multiple divs, in a nested structure. I want them placed beside each other. I tried display: inline-block as most solutions pointed out, but they did not work for me.
Here's my code:
<div class="close-date-div">Close Date:
<div class="form-group" id="close_date">
<div class="input-group date">
<span class="input-group-addon" ><i class="fa fa-calendar"></i></span>
<input class="form-control" id="close_date_input" value="" type="text">
</div>
</div>
</div>
This is the output I am getting for that code snippet, how can make it so that Close Date and the input box are on the same line?
Make your text some king of html element. In this case a made it a paragraph element with the <p> tag
Hope this helps!
.inline {
display: inline-block;
}
<div class="close-date-div">
<p class="inline">Close Date:</p>
<div class="form-group inline" id="close_date">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input class="form-control" id="close_date_input" value="" type="text">
</div>
</div>
</div>
Bootstrap 3 is very opinionated when it comes to forms. If you use the provided classes you have a limited set of possible presentations.
You could set your form to use form-inline or maybe form-horizontal
Here I had to use xs because the snippet window is too small to trigger any other break point. You will also have to tweek column widths and vertical alignment.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-horizontal">
<div class="close-date-div">
<div class="form-group" id="close_date">
<label class="col-xs-2 control-label">Close Date:</label>
<div class="col-xs-10">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input class="form-control" id="close_date_input" value="" type="text">
</div>
</div>
</div>
</div>
</form>
I would comment but my rep isn't high enough yet.
I dealt with this recently, and I had to make sure that the positions were all set in order for the display: inline-block to work. I believe the following example should get you where you need to be.
.close-date-div{
position: relative;
}
.form-group{
position: relative;
display: inline-block;
}
.input-group date{
position:sticky;
display: inline-block;
}
Change
<div class="close-date-div">
To
<div class="close-date-div form-inline">
You may also want to add form-group. Note, this solution is specific to boostrap-only because you've shared code which is utilizing well-known bootstrap classes.
I am having issues centering a form in Bootstrap. I also don't seem to be able to resize the input boxes. I would like to have it centered.
This is what I have:
<div class="form-group row" id="SignupCreate">
<div class="col-sm-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
</div>
And for CSS I started:
#SignUpCreate {
padding-top: 200px;
margin-right: 30px;
margin-left: 30px;
}
you only need to apply some width and make it center with margin: 0 auto
<div class="form-group row" id="signupcreate">
<div class="col-sm-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
below code will center your form
#signupcreate{
width: 60%;
margin: 0 auto;
float: none;
}
You probably want to put it inside a container. Like this:
<div class="container">
<div class="row">
// Your code here
</div>
</div>
Possible duplicate of: Center Form using Twitter Bootstrap
There are a couple ways to solve this but I really recommend to use bootstrap itself to do it.
What I recommend is using offsets. So if you want your form centered just use something like:
<div class="form-group row" id="SignupCreate">
<div class="col-sm-4 col-sm-offset-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4 col-sm-offset-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
</div>
You can tweak your offsets for xs, sm, md and lg accordingly, make sure to set offset to 0 if you don't want offset in a particular view.
Now for your styles, you are giving css a SignUpCreate id when in fact is SignupCreate, remember css selectors are case sensitive.
Also keep in mind for the future that when using bootstrap you should try as much to stick to the framework and use all its features instead of coding your own CSS, and when you do, a good thing to keep in mind is that CSS uses "points" to know which styles are more relevant, I recommend checking Specifics on CSS Specificity
So let's say you want to style something that has padding right and left, I would avoid using a row or column element to do this and would add a second container div to "respect" bootstrap styles.
I hope this answer is helpful :)
There is also a good answer here: Center a column using Twitter Bootstrap 3
UPDATE:
With boostrap 4.5^ you can center any item using d-flex justify-content-center on the parent, if you also want to align the items vertically (relative to the parent's height) simply add align-items-center.
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.