Tech Junkie Blog: End-to-End ASP.NET MVC : Add Bootstrap Library Using NuGet

Saturday, June 18, 2016

End-to-End ASP.NET MVC : Add Bootstrap Library Using NuGet

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

Step by Step Instructions:

 1. Open the empty ASP.NET MVC 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.  You will see that an earlier version was installed, click the "Update" button to upgrade to the latest stable version. Then click "OK" on the "Preview Changes" dialog.

4.You will see that the latest version has been installed.

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 "NorthwindCafe" 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-3.3.1.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



















Previous:ASP.NET MVC: Add JQuery Library Using NuGet
Next: ASP.NET MVC: Add JQuery UI Library Using NuGet

8 comments:

  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

  3. Hello everyone, great article. I have a question on how to add the Bootstrap library to java. There was a need to put the Bootstrap template on the site, but there is no necessary library. Who has experience of such work, write, please, it is very necessary

    ReplyDelete

  5. Thanks for sharing.

    ReplyDelete

  7. Hello everyone, great article. I have a question on how to add the Bootstrap library to javaEarnHoney

    ReplyDelete

  8. Steven Furtick and a few other families started Elevation with NO money!!! They built it and watched it grow. I am so sick of seeing how much his house costs, how much he makes on his book writing, etc. Why don't you tell of the good things he does? Like helping people, like preaching the raw God's Word, like helping people get back to God like myself!! I'm really sick and darn tired of all the negativity, it only shows the devil at work with lies, and jealousy of Pastor Steven. He is a great dad, husband, Pastor and would be there in a second if you need him. No, I have never been to Elevation but I do not miss a sermon online or TBN which I know I have already seen when I turn it on. God takes care of His own, and He will have the last laugh or cry when you haters do not make it to heaven. You are the ones Steven is trying to reach! Go listen to him a couple of times, you will see.EarnHoney

    ReplyDelete

Subscribe to: Post Comments (Atom)