ASP. NET MVC изменить на bootstrap адаптивный дизайн

Question

Я хочу изменить следующий код на адаптивную страницу, но не могу понять, что является лучшим подходом. Я хочу использовать bootstrap, но не уверен, куда вставить тег CSS. Я также попытался следующий код, и я не думаю, что это правильный подход. Для всех гуру, я новичок в MVC, и я немного застрял, и, пожалуйста, помогите и дайте мне несколько советов.

Код Что я пробовал, но я не думаю, что это правильно

   .Up {
      position: relative;
      width: 100%;
      background-color: #fff2cc;
      margin: 20px;
      padding: 20px;
      border-style: groove;
      border-width: 1px;
    }      


   .fin {
    background-color: InfoBackground;
    width: 7%;
    }

   .label {
    background-color: lightcyan;
    border-style: ridge;
    border-color: #76b9ed;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    }


  <h2>Process Flow Master Maintenance</h2>

  @using (Html.BeginForm("ProcessFlowAdd", "ProcessFlow",new { ReturnUrl = ViewBag.ReturnUrl },    FormMethod.Post, new { @class = "form" }))
{
@Html.AntiForgeryToken()
<div>

    <div style="overflow-y :scroll; background: steelblue" class="Up">

        <div margin-bottom: 10px">
            @Html.LabelFor(a => a.processflow.PF_CATEGORY, new { @class = " label" })
            <span style=" padding-right : 13.5%"></span>
            @Html.DropDownListFor(m => m.processflow.PF_CATEGORYID, Model.processflow.DropdownCategory, "Select Category", new { @id = "category", @class = "wide0" })
            @Html.ValidationMessageFor(a => a.processflow.PF_CATEGORYID, "", new { @style = "color:red" })
        </div>


        <div margin-bottom: 10px">
            @Html.LabelFor(a => a.processflow.PF_CHOP, new { @class = " label" })
            <span style=" padding-right : 10.5%"></span>
            @Html.TextBoxFor(a => a.processflow.PF_CHOP, null, new { @class = "chop", @id = "chopNo", style = "text-transform: uppercase", onfocusout = "chopNoValidation()" })
            @*@Html.ValidationMessageFor(a => a.processflow.PF_CHOP, "", new { @style = "color:red" })*@
            <span style=" padding-right : 25.5%"></span>
            @Html.Label("Master Design", new { @class = " label" })
            <span style=" padding-right : 10%"></span>
            @Html.TextBox("MasterDesign", "", new { @id = "txtmasterdesign" })
        </div>


        <div margin-bottom: 10px">
            @Html.LabelFor(a => a.processflow.GROUNDCODE, new { @class = " label" })
            <span style=" padding-right : 11%"></span>
            @Html.DropDownListFor(m => m.processflow.PROCESS_TYPE, Model.processflow.DropdownProcessType, "Select Process Type", new { @id = "processtype", @class = "wide2" })
            @Html.ValidationMessageFor(a => a.processflow.PROCESS_TYPE, "", new { @style = "color:red" })
            <span style=" padding-right : 10px"></span>
            @Html.DropDownList("processflow.ID_GROUNDCODE", Enumerable.Empty<SelectListItem>(), "Select Ground Code", new { @id = "groundcode", @class = "wide2" })
            @Html.ValidationMessage("Ground Code", "", new { @style = "color:red" })
            @Html.Hidden("processflow.GROUNDCODE")
        </div>


        <div>
            @Html.Label("Finish Type", new { @class = " label" })
            <span style=" padding-right : 11%"></span>
            @Html.TextBoxFor(a => a.processflow.PF_FIN1, null, new { @Value = "PC", @readonly = "readonly", @id = "fin", @class = "fin" })
            <span style=" padding-right : 1%"></span>
            @Html.TextBoxFor(a => a.processflow.PF_FIN2, null, new { @maxlength = "2", @id = "fin1", style = "width:7%; text-transform: uppercase;", onfocusout = "FinishType1()" })
            <span style=" padding-right : 1%"></span>
            @Html.TextBoxFor(a => a.processflow.PF_FIN3, null, new { @maxlength = "2", @id = "fin2", style = "width:7%; text-transform: uppercase;", onfocusout = "FinishType2()" })
            <span style=" padding-right : 1%"></span>
            @Html.TextBoxFor(a => a.processflow.PF_FIN4, null, new { @maxlength = "2", @id = "fin3", style = "width:7%; text-transform: uppercase;", onfocusout = "FinishType3()" })
            <span style=" padding-right : 1%"></span>
            @Html.TextBoxFor(a => a.processflow.PF_FIN5, null, new { @maxlength = "2", @id = "fin4", style = "width:7%; text-transform: uppercase;", onfocusout = "FinishType4()" })
            <span style=" padding-right : 1%"></span>
            @Html.TextBoxFor(a => a.processflow.PF_FIN6, null, new { @maxlength = "2", @id = "fin5", style = "width:7%; text-transform: uppercase;", onfocusout = "FinishType5()" })
            <span style=" padding-right : 1%"></span>
            @Html.TextBoxFor(a => a.processflow.PF_FIN7, null, new { @maxlength = "2", @id = "fin6", style = "width:7%; text-transform: uppercase;", onfocusout = "FinishType6()" })
            <span style=" padding-right : 1%"></span>
            @Html.TextBoxFor(a => a.processflow.PF_FIN8, null, new { @maxlength = "2", @id = "fin7", style = "width:7%; text-transform: uppercase;", onfocusout = "FinishType7()" })
            <span style=" padding-right : 1%"></span>

        </div>
    </div>

    <div class="col-md-8  col-sm-12" style="float:right">
        @Html.BackButton(url)
        <input id="btnReset" type="reset" name="ActionType" value="Clear" class="btn btn-primary" />
        <input id="btnSearch" type="submit" name="ActionType" value="Save" class="btn btn-primary" />
    </div>

</div>