How to Install Bootstrap in ASP.NET MVC 5

Continuing with the previous share, today I will share the way to install Bootstrap in ASP.NET MVC5 using Visual Studio 2019.

Setup Bootstrap 3.3.1 to ASP.NET MVC 5

Right-click Project -> Manager NuGet Packages -> Click icon setting configuration, add package source.

https://api.nuget.org/v3/index.json

This is image title

Continue by adding a package source (following image)

This is image title

You search keyword “bootstrap” and then install

This is image title

You can see bootstrap in project after a successful installation.

This is image title

Okay, installation is successful!

You can use bootstrap in Layout file of _Views/Shared/LayoutHome.cshtml directory. (Note you add css,javascript to file)

<link rel="stylesheet" href="~/Content/bootstrap.min.css" />  
<script src="~/Scripts/jquery-3.3.1.min.js"></script>  
<script src="~/Scripts/bootstrap.min.js"></script>

Example - _Views/Shared/_LayoutHome.cshtml _

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>@ViewBag.Title</title>  
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" />  
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>  
    <script src="~/Scripts/bootstrap.min.js"></script>  
</head>  
<body>  
    <div>  
        @RenderBody()  
    </div>  
</body>  
</html>

_Views/Home/Index.cshtml _

<div class="container">  
    <div class="row">  
        <div class="col-md-12">  
            <h2>@ViewBag.title</h2>  
            <a href="https://hoanguyenit.com" class="btn btn-success">https://hoanguyenit.com</a>  
        </div>  
    </div>  
</div>

Ok, we successfully installed bootstrap in ASP.NET MVC 5!! Thank you for reading!

#bootstrap #ASP.NET #ASP.NET MVC 5 #installbootstrap