Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Install and use Bootstrap in ASP.NET Core

Suggested Videos
Part 31 - _ViewImports.cshtml in ASP.NET Core MVC | Text | Slides
Part 32 - Routing in ASP.NET Core MVC | Text | Slides
Part 33 - Attribute Routing in ASP.NET Core MVC | Text | Slides

In this video we will discuss how to install and use Bootstrap in ASP.NET Core


Tools to install client-side packages

There are many tools that we can use with Visual Studio to install client-side packages like Bootstrap and jQuery. For example we could use tools like Bower, NPM, WebPack etc.


However, we are not going to use any of these tools. We will instead use Library Manager (LibMan for short). Library Manager is a light-weight, client-side library acquisition tool. It downloads client-side libraries and frameworks from the file system or from a CDN (Content Delivery Network).

To be able to use LibMan you should have Visual Studio 2017 version 15.8 or later

Check and Upgrade Visual Studio Version

To check the version of Visual Studio you have
  • Click on the "Help" menu item and 
  • Select "About Microsoft Visual Studio" from the context menu
  • The window that appears, displays the version of Visual Studio you have
  • On my machine I have 15.9.4
how to check visual studio version

If you have an older version of Visual Studio 2017, you can easily update it. 

To update visual studio version
  • Click on the "Help" menu item and 
  • Select "Check for Updates" from the context menu
  • The subsequent window that appears display your current version and the latest available version.
  • Simply click the "Update" button
how to update visual studio version

Install Bootstrap Using LibMan
  • Right click on the "Project Name" in Solution Explorer and Select Add > Client-Side Library. In the "Add Client-Side Library" window that opens
  • Leave the default provider which is cdnjs
  • In the "Library" text box, type "twitter-bootstrap". Upon selecting the matching entry, it tries to install the latest version. However, you can manually type the version you want. You also have intellisense support. We will install the lates Bootstrap version 4.
  • You can either include "All the library file" or "Just the files you need"
  • In the "Target Location" text box specify the folder where you want the library files to be copied. Recollect, by default static files are only served from WWWRoot folder.
  • Click the "Install" Button
install bootstrap asp.net core mvc

libman.json file

libman.json is the Library Manager manifest file. Notice in the manifest file we have an entry for the Bootstrap client-side library that we just installed. We can also directly edit the manifest file to install client-side packages, instead of using the user interface provided by LibMan.

Clean and Restore Client-Side Libraries

To clean library files, right click on libman.json file and select "Clean Client-Side Libraries" from the context menu. The clean operation deletes the library files from the destination folder. However, the entries in libman.json will not be deleted.

To restore the deleted files, right click on libman.json file and select "Restore Client-Side Libraries" from the context menu. The restore operation will download and copy the library files into the specified destination folder.

visual studio library manager

Uninstall or Update a Client-Side Library
  • Open libman.json file 
  • Click on the client-side library you want to uninstall 
  • A light bulb icon appears
  • Click on the light bulb icon and you will have options to either update or uninstall that specific client-side library
uninstall bootstrap asp.net core

Alternatively, you can also just delete the client-side library entry in libman.json file and upon saving the file, the respective client-side library will be uninstalled.

Similarly, to upgrade or downgrade a client-side library, you can directly change the version number in libman.json file. Upon saving the file, the respective client-side library is updated to the version specified. You will also have intellisense when editing the version number in visual studio.

visual studio libman.json

Site Specific CSS

We will be placing all our site specific CSS in a separate stylesheet. Add a stylesheet with name site.css to the "css" folder. We already created this "css" in "wwwroot" folder.

Copy and paste the following .btn class in site.css

.btn {
    width: 75px;
}

Using Bootstrap in ASP.NET Core Application

To start using Bootstrap in your asp.net core application, include a reference to the Boostrap.css file in the layout file _Layout.cshtml. Also include a reference to our custom stylesheet site.css.

The following is the code in _Layout.cshtml

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" />
    <title>@ViewBag.Title</title>
</head>
<body>

    <div class="container">
        @RenderBody()
    </div>

    @if (IsSectionDefined("Scripts"))
    {
        @RenderSection("Scripts", required: false)
    }

</body>
</html>

Please note : We are using the Bootstrap "container" class for positioning elements on the page.

Styling Details.cshtml View

We are using Bootstrap 4 styling class to position and style elements on the page.

@model HomeDetailsViewModel

@{
    ViewBag.Title = "Employee Details";
}

<div class="row justify-content-center m-3">
    <div class="col-sm-8">
        <div class="card">
            <div class="card-header">
                <h1>@Model.Employee.Name</h1>
            </div>

            <div class="card-body text-center">
                <img class="card-img-top" src="~/images/noimage.jpg" />

                <h4>Employee ID : @Model.Employee.Id</h4>
                <h4>Email : @Model.Employee.Email</h4>
                <h4>Department : @Model.Employee.Department</h4>

            </div>
            <div class="card-footer text-center">
                <a href="#" class="btn btn-primary">Back</a>
                <a href="#" class="btn btn-primary">Edit</a>
                <a href="#" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="~/js/CustomScript.js"></script>
}

Styling Index.cshtml View

We are using Bootstrap 4 styling class to position and style elements on the page.

@model IEnumerable<Employee>

@{
    ViewBag.Title = "Employee List";
}

<div class="card-deck">
    @foreach (var employee in Model)
    {
        <div class="card m-3">
            <div class="card-header">
                <h3>@employee.Name</h3>
            </div>
            <img class="card-img-top" src="~/images/noimage.jpg" />
            <div class="card-footer text-center">
                <a href="#" class="btn btn-primary">View</a>
                <a href="#" class="btn btn-primary">Edit</a>
                <a href="#" class="btn btn-danger">Delete</a>
            </div>
        </div>
    }
</div>

asp.net core tutorial for beginners

10 comments:

  1. For me also, photos are not dosplayed. Trying to figure out why?

    ReplyDelete
    Replies
    1. change the correct name to image in your project

      Delete
    2. You might be missing Below Static registration in Middleware. Add below line in your startup class
      app.UseStaticFiles()

      Delete
  2. Should I learn bootstrap before I continue the videos or continue and learn it afterwards?

    The link to the bootstrap anyone?

    ReplyDelete
    Replies
    1. https://csharp-video-tutorials.blogspot.com/2016/05/bootstrap-tutorial-for-beginners.html

      Delete
  3. hi, first of all thanks for this awesome video tutorial series. now when i use your index.cshtml code i dont get the same look as you show, my employees doesnt come side by side, instead they come top to bottom . 1 employee takes full screen then i have to scroll down to see next employee

    ReplyDelete
  4. Dear Sir, Please help me in this i was get button and its action are working but it color , look like square is not appering only the button name is appearing,can please help me with this it was helpful me to move further sir.

    ReplyDelete
  5. you need to add _layout on your .cshtml file

    ReplyDelete
  6. I am Not getting index files name horizontal , i am getting in vertical

    ReplyDelete

It would be great if you can help share these free resources