How to apply the Bootstrap template to the MVC project - asp.net-mvc

Question

I am changing the style of my MVC project, for that I resorted to Bootswach and its different templates, the problem is that the visual changes in the views are not effective, for example ...
It has a very extensive form vertically, as follows
and you want to align objects to the right and to the left in the following way
to make this change use the tag <div class = "col-md-6">
but I'm not getting the expected result, why does this happen?
now I will tell you how to implement this template ....
1.- download the bootstrap watch bootstrap.css file and add it to my project
2.- in my BundleConfig.cs change the boostrap.css file that you download
3.- And modify my view finally
My View:
<h2>Crear Producto</h2>
#using (Html.BeginForm("Create", "Productoes", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.v_Nombre, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.v_Nombre, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.v_Nombre, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FotoFile, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="file-input-new">
<div class="input-group" style="width:280px">
<div tabindex="500" class="form-control file-caption">
<div class="file-caption-name" id="NombreArchivo">
</div>
</div>
<div class="input-group-btn" style="height:auto">
<div tabindex="500" class="btn btn-primary btn-file">
<i class="glyphicon glyphicon-folder-open"></i>
Buscar Foto...
#Html.TextBoxFor(modelo => modelo.FotoFile, new { type = "file", id = "files" })
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Precio_Minimo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Precio_Minimo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Precio_Minimo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Precio_Maximo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Precio_Maximo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Precio_Maximo, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.Activo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Activo)
#Html.ValidationMessageFor(model => model.Activo, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Stock, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Stock, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Stock, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.f_Compra, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.f_Compra, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.f_Compra, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Comentarios, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Comentarios, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Comentarios, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Kn_CodigoCategoria, "Categoria", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Kn_CodigoCategoria", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Kn_CodigoCategoria, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Crear" class="btn btn-outline-success" />
</div>
</div>
</div>
</div>
}
with these two steps I can already visualize the changes of the template, but I said previously I can not move my objects as far as I want,
what am I doing wrong? Do I have to add other references to my BundleConfig? do I have to install something in the project?
any help for me?

Answer 1

You need to put the col-x-y divs inside a div with class .row and inside a container or it will not work. Similar to this (you do not need the col class but I just put it here so it is easier to see the columns in the fiddle):
<div class="container">
<!--This will not work -->
<div class="col col-sm-3">.col-sm-3</div>
<div class="col col-sm-6">.col-sm-6</div>
<div class="col col-sm-3">.col-sm-3</div>
<!-- This will work -->
<div class="row">
<div class="col col-sm-3">.col-sm-3</div>
<div class="col col-sm-6">.col-sm-6</div>
<div class="col col-sm-3">.col-sm-3</div>
</div>
</div>
Here is the Fiddle so you can see this yourself.