How to make C# Dropdownlist and submit button be in a row with Bootstrap?-CodePudding

<div class="d-flex flex-row" >
@using (Html.BeginForm())
{
    <div class="p-2">
        @Html.DropDownList("id", ((SelectList)ViewBag.ProjectName), "- Select project -", new { @class = "form-select" })
    </div>
    <div class="p-2">
        <input type="submit" value="Choose this project" asp-action="ViewTickets" />
    </div>
}
</div>

Right now dropdownlist is above submit button. So, I tried to wrap both elements with divs but nothing helps. I want drop down list and button be side-by-side in a row.

CodePudding user response：

As the comment says by Caius Jard says, you want to look into the Bootstrap grid system (https://getbootstrap.com/docs/4.0/layout/grid/). There are classes for rows and columns that let you accomplish what you are trying to do. The below should work for this particular case.

<div class="row">
  <div class="col-md">
    @Html.DropDownList("id", ((SelectList)ViewBag.ProjectName), "- Select project -", new { @class = "form-select" })
  </div>
  <div class="col-md">
    <input type="submit" value="Choose this project" asp-action="ViewTickets" />
  </div>
</div>