Tech Junkie Blog - Real World Tutorials, Happy Coding!: 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


















Similar Posts:




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

26 comments:

  1. AnonymousMarch 28, 2016 at 2:27 PM

    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
  2. UnknownSeptember 11, 2016 at 2:57 PM

    Works again, thank you!!!

    ReplyDelete
  3. UnknownAugust 31, 2017 at 12:26 PM

    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
  4. AndreDePandreJanuary 23, 2018 at 10:40 AM

    That was easy!
    Thanks for sharing.

    ReplyDelete
  5. AnonymousFebruary 7, 2018 at 4:26 AM

    Thanks for sharing.

    ReplyDelete
  6. Michael SmithJanuary 6, 2019 at 6:10 PM

    This comment has been removed by the author.

    ReplyDelete
  7. emmalin2February 13, 2019 at 12:04 PM

    This comment has been removed by the author.

    ReplyDelete
  8. LewisFebruary 19, 2019 at 10:14 AM

    This comment has been removed by the author.

    ReplyDelete
  9. JackjohnnyJuly 8, 2019 at 1:14 PM

    Nice

    ReplyDelete
  10. Saqib KhatriJuly 9, 2019 at 2:44 PM

    This comment has been removed by the author.

    ReplyDelete
  11. Faiza JeeSeptember 19, 2019 at 7:11 AM

    This is my first visit to your web journal! We are a group of volunteers and new activities in the same specialty. Website gave us helpful data to work. hoverwatch coupon code

    ReplyDelete
  12. AzlanOctober 6, 2019 at 7:31 AM

    The best tech organizations are those that do serious research on the business that they are associated with. gadgets

    ReplyDelete
  13. Muhammad HassanOctober 21, 2019 at 2:17 PM

    I appreciate this article for the well-researched content and excellent wording. I got so interested in this material that I couldn’t stop reading. Your blog is really impressive. visit this website

    ReplyDelete
  14. Terri MeeksDecember 2, 2019 at 8:35 AM

    I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy. useful link

    ReplyDelete
  15. Custom Packaging Printed BoxesFebruary 16, 2020 at 12:51 PM


    I have read your excellent post. This is a great job. I have enjoyed reading your post the first time. I want to say thanks for this post. Thank you…
    Custom Packaging Boxes

    ReplyDelete
  16. Muhammad RafeyMay 19, 2020 at 1:32 AM

    Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. Breast Cancer Prevention

    ReplyDelete
  17. Muhammad HassanJune 20, 2020 at 12:44 PM

    I am impressed. I don't think Ive met anyone who knows as much about this subject as you do. You are truly well informed and very intelligent. You wrote something that people could understand and made the subject intriguing for everyone. Really, great blog you have got here. write for us technology

    ReplyDelete
  18. zain khanJune 26, 2020 at 6:11 AM

    visite our site for more information
    http://www.onepercase.net/2012/02/not-action-figures-tech-hp-pavilion-dv6.html?showComment=1593166271818#c6373613023245058017

    ReplyDelete
  19. zain khanJune 26, 2020 at 6:13 AM

    visite our site for more information
    https://www.techia.net
    Techia

    ReplyDelete
  20. zain khanJuly 2, 2020 at 1:58 AM

    visite our site for more information
    write for us technology

    ReplyDelete
  21. zain khanJuly 3, 2020 at 11:25 AM

    visite our site for more information
    https://www.techwaver.com/write-for-us/
    write for us technology

    ReplyDelete
  22. Muhammad RafeyJuly 5, 2020 at 6:22 AM

    I was reading some of your content on this website and I conceive this internet site is really informative ! Keep on putting up. 무료 vpn

    ReplyDelete
  23. rafayJuly 5, 2020 at 1:58 PM

    Thanks for sharing the post.. parents are worlds best person in each lives of individual..they need or must succeed to sustain needs of the family. סיינטולוגיה

    ReplyDelete
  24. BestJuly 6, 2020 at 7:02 AM

    I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. a course in miracles questions and answers

    ReplyDelete
  25. BillyJuly 6, 2020 at 7:15 PM

    This article is a connecting with wealth of accommodating educational that is intriguing and exquisitely formed. I perceive your troublesome work on this and thank you for this information. I know it very well that if anyone visits your blog, by then he/she will undeniably come back to it.



    switches


    ReplyDelete
  26. zain khanJuly 8, 2020 at 6:59 AM

    visite our sit for more information about our web
    EZTV Proxy

    ReplyDelete

Subscribe to: Post Comments (Atom)

Search This Blog