CSS file not working properly with ASP.NET MVC5

Question

In my ASP.NET MVC project i recently had problems with the CSS files (im using the Bootstrap files), i've tried repair Visual Studio 22, but that didn't work, after that i tried (CTRL + F5/ hot reload), that worked partially for the CSS files, the issue now is that the forms i have placed do not show properly in order, but rather side by side. as shown below

what the output looks like

Transfer.cshtml File

@model BankSystem.Models.transfer

@{
    ViewBag.Title = "Transfer";
    Layout = "~/Views/Shared/_bankLayout.cshtml";
}

@if (ViewBag.text != null)
{
    <div style="color: #008000">@ViewBag.text</div>
}

<h2>Transfer</h2>

@using (Html.BeginForm("Transfer", "Home", FormMethod.Post))
{
    <div class="container">
        <div class="row form-horizontal">
            <div class="form-group">
                <div class="col-md-1">@Html.Label("Account Number")</div>
                <div class="col-md-3">@Html.TextBoxFor(x => x.AccountNumber, new { @class = "form-control" })</div>
            </div>
            <div class="form-group">
                <div class="col-md-1">@Html.Label("CUSIP")</div>
                <div class="col-md-3">@Html.TextBoxFor(x => x.CUSIP, new { @class = "form-control" })</div>
            </div>
            <div class="form-group">
                <div class="col-md-1">@Html.Label("Account Holder")</div>
                <div class="col-md-3">@Html.TextBoxFor(x => x.AccountHolder, new { @class = "form-control" })</div>
            </div>
            <div class="form-group">
                <div class="col-md-1">@Html.Label("Amount")</div>
                <div class="col-md-3">@Html.TextBoxFor(x => x.Amount, new { @class = "form-control" })</div>
            </div>
            <div class="form-group">
                <div class="col-md-1"><input type="submit" value="Send" class="btn btn-primary" /></div>
                <div class="col-md-3"><a href="@Url.Action("Transfer", "Home")" class="btn btn-default">Cancel</a></div>
            </div>
        </div>
    </div>
}

The forms that i have placed should be aligned on the left side going down, but instead they are all placed side by side, without changing anything in the style sheets, any help is appreciated.

Answer 1

<div class="row form-horizontal"> Seems to be the smoking gun here, as it surrounds all of the form-groups.

I would get rid of that div, and use <div class="form-group row"> in place of <div class="form-group">. This should ensure all of your form-groups are shown on separate lines.

Hope this helps :)