Can't add CSS Style in MVC forms - css

Question

I'm developed the MVC Project, I want to style My project, but its not working correctly; I can't style my forms. From control, button and Input areas how can I do it my project? I want to some help
My code
#model ContosoUniversity.Models.Student
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Student</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control " } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FirstMidName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstMidName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstMidName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EnrollmentDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.EnrollmentDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EnrollmentDate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}

Answer 1

you can add css in many ways. Best method is creating own css file and making it Bundles. Or you can place it in _Layout.cshtml head section:
<style>
.custom-class{
border:1px solid red;
}
</style>
Then using it is pretty simple:
<div class="form-group custom-class">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control " } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
Hope this will help :)

Answer 2

You have to do the following steps :
Create your CSS file with styles rules you want to apply (you will easily find many tutorials for CSS file creation).
Add the created CSS file in a StyleBundle. To do this, go to the "BundleConfig.cs" file, and add the following line (replace the bundle name and CSS file path by real values) :
bundles.Add(new StyleBundle("~/NameOfTheBundle").Include("~/Content/YourCssFile.css"));
Add a reference to the created bundle into your cshtml file (between the < head > tags, on the top of the file) :
#Styles.Render("~/NameOfTheBundle")
A bundle is a file generated from one or several CSS (or javascript) files, by the .NET framework. It allows grouping CSS rules in a single file, to avoid client recovering many CSS files on your server (saving client/server requests).
Let me know if my answer is not clear enough.