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

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

    Works again, thank you!!!

    ReplyDelete
  3. John McStoneAugust 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. Hansje vd TillaertJanuary 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. mysocialblogNovember 12, 2018 at 8:41 AM

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

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

    This comment has been removed by the author.

    ReplyDelete
  8. Muhammad RafayJanuary 18, 2019 at 8:36 AM

    The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. best smart led tv under 25000

    ReplyDelete
  9. Genious PersonJanuary 26, 2019 at 10:55 AM

    Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. 192-168-i-i.com

    ReplyDelete
  10. MatiasJanuary 28, 2019 at 5:10 PM

    I have perused your online journal it is exceptionally useful for me. I need to express profound gratitude to you. I have bookmark your site for future redesigns.  Download Skype For WIndows

    ReplyDelete
  11. Genious PersonFebruary 8, 2019 at 8:44 AM

    I think that thanks for the valuabe information and insights you have so provided here. situs bokep terbaru

    ReplyDelete
  12. Genious PersonFebruary 9, 2019 at 12:16 PM

    This particular is usually apparently essential and moreover outstanding truth along with for sure fair-minded and moreover admittedly useful My business is looking to find in advance designed for this specific useful stuffs… https://cydiaimpactor.online/

    ReplyDelete
  13. Emmalin 2February 13, 2019 at 12:04 PM

    This comment has been removed by the author.

    ReplyDelete
  14. Joseph JohnsonFebruary 19, 2019 at 10:14 AM

    This comment has been removed by the author.

    ReplyDelete
  15. Hunter LeoMarch 1, 2019 at 1:25 PM

    A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post.
    spotify free

    ReplyDelete
  16. MatiasMarch 2, 2019 at 2:13 PM

    I definitely enjoying every little bit of it. It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. the best vpn

    ReplyDelete
  17. Bachelor DeveloperMarch 5, 2019 at 11:21 PM

    1st news web site this site provide a news information so more gain information. 1st news

    ReplyDelete
  18. mona martinMarch 11, 2019 at 10:18 AM

    You've completed in excellent work. t suggest to my frtends ind personilly wtll certitnly dtgtt. t'm conftdent they'll be gitned from thts webstte. lemigliorivpn

    ReplyDelete
  19. Internal CircleMarch 13, 2019 at 3:17 PM

    Bachelor developer this site a provider a All IT Service and Web Design and software design and SEO search engine optimizetion Service Provider So Then See Our Site And Gain Information And Service for Web Design and software design Our Software Company Our Clint’s For Spatial Discount see our site bachelordeveloper.com and Gain Information.bachelor developer

    ReplyDelete
  20. Chris JordanMarch 17, 2019 at 12:56 PM

    Being detached from the grid from time to time can be very de-stressing, unless you start stressing about not knowing. There are two things we need to do in order to live low tech in this high tech world.
    Best mini projector under 100

    ReplyDelete
  21. Zack SmithApril 13, 2019 at 7:04 AM

    It’s appropriate time to make some plans for the future and it is time to be happy. I have read this post and if I could I wish to suggest you few interesting things or advice. Perhaps you could write next articles referring to this article. I desire to read even more things about it! Google pixel 2 XL Wireless Charging

    ReplyDelete
  22. Ella lilyApril 18, 2019 at 5:54 PM

    This is a wonderful product, taking into account all the information about it, this type of product that prevents user interest in the site, and you will share more ... good luck.  Cliquez-ici

    ReplyDelete
  23. custom stickers printingApril 30, 2019 at 4:15 AM

    I'm really impressed about the info you provide in your articles. If you want to invest in suits and be stress-free, then you should shake hands with us. We are providing great clothing in the most reasonable price range that you wouldn’t find anywhere else. Put your trust in us as your supplier since we are the prominent printed stickers uk You can rely on us for the clothing problems we assure you we will never let our customers down.

    ReplyDelete
  24. Zack SmithMay 11, 2019 at 5:06 AM

    Thanks for the valuable information and insights you have so provided here... Top Portal

    ReplyDelete

Subscribe to: Post Comments (Atom)