Struggling to implement an inline form in Bootstrap using the form-inline class. Despite following the code exactly as specified on the official Bootstrap page, I'm experiencing unexpected behavior.
Here's what I'm seeing:
https://i.sstatic.net/MvalN.png
The given code is:
@using (Html.BeginForm("Edit", "Index", FormMethod.Post, new { @class = "form-inline" }))
{
<div class="form-group">
<label for="new-value">Enter new value: </label>
<input type="text" id="new-value" class="form-control" />
</div>
<div class="checkbox">
<label>
Public: <input type="checkbox" />
</label>
</div>
<input type="submit" class="btn btn-primary" />
}
Removing the form-control class from the text box resolves the issue and gives the desired outcome at the expense of losing the stylish text box:
https://i.sstatic.net/APJDa.png
I acknowledge the Bootstrap warning that states:
This only applies to forms within viewports that are at least 768px wide.
However, my screen size is large with a form width of 1160px.