asked on
Bootstrap 4 Input Group Append issue
Using a form in-line class this scenario has two columns of label text inputs. There are a few that have added input-group-appends with font awesome calendar or search icons. For whatever reason those are shorter than the others. Below is an example with two columns also original has six rows. Also they are centered. I could make the labels right justified by using justify-content-end but not the inputs. It would be nice to left justify these because the gap between the label and the input would be smaller.
<form class="form-inline">
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">First Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
<label class="col-3 col-form-label justify-content-end">Last Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</form>
Bootstrap
Last Comment
wee11
ASKER
No custom css. The example should be 12 columns. There is nothing else.
Could you provide a screen shot of the problem?
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER
So the issue looks like it is the append and its extending the width of the text box. Text boxes without the button are exactly the width of the ones with the button but stop right at the start of the button. Drop this in JSFiddle and you can see the issue.
<form class="form form">
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">First Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">Middle Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">Last Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
</div>
</div>
</form>
ASKER CERTIFIED SOLUTION
Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Are you using any custom css?
you should make sure that your total of column equal 12, not only for the form but overall into the template
justify-content-end can be use with a div i'm not sur it can be use with a label..
You can set a JSFiddle that will be easier to check with your custom css if any.