CODEWITHSUNDEEP
htmltwitter-bootstrapbuttontextboxrow
AndrewC10
AndrewC10

Reputation: 357

Bootstrap Textbox and Button Placement Within Row

I have some basic bootstrap and HTML code that I am trying to plug into an application. My code below places the text box on one row but then has the button and ActionLink directly under the text box. I am attempting to put all 3 of these features on one row across the page.

It is as if the page is columned off and the text box is programmed to take up 100% of the first column width. I can try to change that but would prefer the text box to stay at its current width.

Please note: I attempted to put the button directly next to the text box but it is still getting pushed under it, which is why I think the page is columned off and the textbox is taking up 100% of the first column.

@using (Html.BeginForm("Index", "Person", FormMethod.Get))
{ 
<form asp-action="Index" method="get">
    <div class="row">
        <div class="form-actions no-color col-md-12">
            <p>
                Find by name: <input type="text" class="form-control" id="txtSearch" name="searchString" value="@ViewBag.CurrentFilter" /> 
                <input type="submit" value="Search" class="btn btn-default" /> |
                @Html.ActionLink("Back to List", "Index")
            </p>
        </div>
     </div>
</form>
}

New Code:
<form class="form-inline">
    <div class="form-group">
        <label for="txtSearch">Find by name:</label>
        <input type="text" class="form-control" display="inline-block" id="txtSearch" name="searchString" />
        <input type="submit" value="Search" class="btn btn-default" /> | 
    </div>
    @Html.ActionLink("Back to List", "Index")
</form> <br />

enter image description here

Upvotes: 0

Views: 955

Answers (2)

edison xue
edison xue

Reputation: 1331

The problem is that the class "form-control" of your fisrt input text. Its display is block. If you want to stay the width of the text. Set the display to inline-block and set the width.

Upvotes: 0

Halter
Halter

Reputation: 48

create an inline form with bootstrap classes, edited out the razor code, you'll have to put that back in

<form class="form-inline">
    <div class="form-group">
        <label for="txtSearch">Find by name:</label> 
        <input type="text" class="form-control" id="txtSearch" name="searchString" /> 
    </div>
    <input type="submit" value="Search" class="btn btn-default" /> |
    <a href="#"> Back To List </a>
</form>

Upvotes: 1

Related Questions