Saturday, June 18, 2016

ASP.NET MVC 5 From Scratch : Add Bootstrap Library Using NuGet

In the previous blog we've created added the JQuery library to an empty ASP.NET MVC 5 project. In this blog we will add the Bootstrap to the empty ASP.NET MVC 5 project that we've just created.

Step by Step Instructions:

1. Open the empty ASP.NET MVC 5 project that you've just created

2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages"















3.  In the search box on the right of NuGet window type "bootstrap", the search result will be displayed

4. Click on the "Install" button next to the "Bootstrap" result, it should be at the top of the list

5.  Once the Bootstrap library has been installed a green check mark is displayed, click on the "Close" button

6.  Now you should see the Bootstrap scripts in the "Scripts" folder

7.  You will also noticed that the "Contents" folder has been created, this folder was created when NuGet installed the Bootstrap library in the "MvcApp" project. This folder contains the cascading stylesheet that Bootstrap uses


























8.  Now let's test our bootstrap installation, in the "Index.cshtml" type in the following markup

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
Hello Bootstrap!
<p><a class="btn btn-primary btn-lg" href="#" role="button">Installed</a></p>
</div>

</body>
</html>

9. When you press Ctrl+F5 to run the application you should see the following in your browser

1 comment:

  1. Hi
    i'm trying to install bootstrap with NuGet, but it told me "Incompatobe: use Bower insted"
    i was try update Nuget but seems i have latest version, maybe any idea what can be the reason?

    ReplyDelete