Is it possible to place a button right next to an input box while utilizing the bootstrap columns/grid system? The Label is set to 2, EditorFor div to 4, and the input div to 6. When I reduce the EditorFor div to 3, it moves the input/button div closer together, but also decreases the width of the EditorFor
The style
style = "border: 1px solid red;"See an example of the EditorFor div set to 3 and shrinking the input width
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(model => model.Tag.Name, htmlAttributes: new { @class = "control-label col-md-2", style = "border: 1px solid red;" })
<div class="col-md-4" style = "border: 1px solid red;">
@Html.EditorFor(model => model.Tag.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Tag.Name, "", new { @class = "text-danger" })
</div>
<div class="col-md-6" style = "border: 1px solid red;">
<input type="submit" value="Add Tag" class="btn btn-default" style = "border: 1px solid red;"/>
</div>
</div>
</div>
Thank you
- Additional information
Below is the HTML output:
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-2" for="Tag_Name" style="border: 1px solid red;">Tag Name:</label>
<div class="col-md-4" style = "border: 1px solid red;">
<input class="form-control text-box single-line" data-val="true" data-val-length="Tag cannot be longer than 50 characters." data-val-length-max="50" data-val-regex="Must start with a capital letter, only alphabetic characters and no spaces allowed." data-val-regex-pattern="^[A-Z]+[a-zA-Z"'\s-]*$" data-val-required="The Tag Name: field is required." id="Tag_Name" name="Tag.Name" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Tag.Name" data-valmsg-replace="true"></span>
</div>
<div class="col-md-6" style = "border: 1px solid red;">
<input type="submit" value="Add Tag" class="btn btn-default" style = "border: 1px solid red;"/>
</div>
</div>
</div>