Load groups are loaded horizontally
I have a multi-line form and in one of the lines I want to group two inputs and a button horizontally using bootstrap. JSFIDDLE
<form>
<div class="form-group">
<lable>first :</lable>
<div class="input-group">
<input type="text" class="form-control" value="123" style="width:50px;"/> <span class="input-group-btn"
style="width:0px;"></span>
<input type="text" class="form-control" value="test2" disabled/>
</div>
</div>
<div class="form-group">
<lable>second :</lable>
<div class="input-group">
<input type="text" class="form-control" value="123" style="width:50px;"/> <span class="input-group-btn"
style="width:0px;"></span>
<input type="text" class="form-control" value="test2" disabled/> <span class="input-group-btn">
<button class="btn btn-primary" type="button">...</button>
</span>
</div>
</div>
the problem is the space between the inputs:
how to align inputs and button side by side without space?
Update: I don't want the second input to be "test2" for a fixed width. But the first entry and the button are fixed width.
+3
source to share
3 answers
Try with this
<div class="form-wrapper">
<form class="form-inline" role="form">
<div class="form-group fixed-width-group">
<input type="email" class="form-control fixed-width-input" id="ejemplo_email_2" placeholder="123">
</div>
<div class="form-group fluid-width-group">
<input type="password" class="form-control fluid-width-input" id="ejemplo_password_2" placeholder="Test2">
</div>
<button type="submit" class="btn my-btn">...</button>
</form>
</div>
.form-wrapper {
text-align: center;
padding: 20px;
}
.form-inline {
height: 34px;
}
.form-inline .form-control {
width: 100%;
}
.form-inline .form-group {
margin-bottom: 0;
float: left;
}
.form-inline .fixed-width-group {
width: 100px;
border-radius: 4px 0 0 4px;
.form-inline .fluid-width-group {
width: calc(100% - 200px);
border-radius: 0;
}
.form-inline .fixed-width-input {
border-radius: 4px 0 0 4px;
}
.form-inline .fluid-width-input {
border-radius: 0;
}
.my-btn {
text-transform: uppercase;
height: 100%;
border-radius: 0 4px 4px 0;
background-color: #35bfd1;
float: right;
color: #fff;
padding: 5px 15px;
width: 100px;
}
.my-btn:hover {
color: #fff;
background-color: #31b0d5;
}
.fluid-width-input {
border-radius: 0;
}
There is a jsfiddle example to reproduce wiht .
Also have a look at this answer, you might find it useful:
/ questions / 2234981 / achieving-horizontal-inline-form-for-signup-in-bootstrap / 5987358 # 5987358
0
source to share
You can define the width on another input and space that contains the button as shown below:
<form>
<div class="form-group">
<lable>first :</lable>
<div class="input-group">
<input type="text" class="form-control" value="123" style="width:50px;" />
<span class="input-group-btn" style="width:0px;"></span>
<input type="text" class="form-control" value="test2" disabled/>
</div>
</div>
<div class="form-group">
<lable>second :</lable>
<div class="input-group">
<input type="text" class="form-control" value="123" style="width:50px;" />
<input type="text" class="form-control" value="test2" style="width:150px;" disabled />
<span class="input-group-btn" style="width:50px;">
<button class="btn btn-primary" type="button">...</button>
</span>
</div>
</div>
<form>
Update : Solutions that don't require a fixed width
0
source to share