In this session of ASP.NET Core Tutorial, we show you how you can install and use Bootstrap in ASP.NET Core. Also we discuss about installing the other client-side libraries with Library Manager. Generally Bootstrap is a front end framework which contains several styling classes. The Bootstrap Classes help you to make your HTML pages more stylish. If you are not familiar with Bootstrap framework, you can read more about it HERE and find more about different classes the way that you can use them.
You can install libraries and packages in your ASP.NET Core Web App, while developing your code with Visual Studio IDE through different methods and tools. For instance, Nuget Package Manager, Library Manager (LibMan), NPM and Bower are the tools that we can use for this purpose. In this session, we use Library Manager (LibMan) which is one of the options for installing Client-Side Libraries.
How we can setup Bootstrap in our ASP.NET Core Web App?
- Setp1: Right click on your project name
- Step2: Select Add option
- Step3: Form the appeared sub-menu click on Client-Side Library
- Step4: Inside Client-Side Library Manager tools, set provider on cdnjs
- Step5: Inside Library text box, enter Bootstrap or any other client-side library that you want to install.
- Step6: From the result list, select your desired version.
- Step7: Based on your need, select “Include All Library File” to have all library files or select “Choose Specific files” to have selecting required files option.
- Step8: Inside “Target Location” text box, enter your location that you want to install your selected library
- Step9: Click on “Install” button to setup the library
Install Bootstrap
For installing Bootstrap or any other client-side library with Library Manager tools, first right click on your Web App name and from the menu, select “Add” item, Then from the sub-menu run Client-Side Library. Now, LibMan Tools is available.
Then, select cdnjs as “Provider” and enter name of your required library inside “Library” text box. As a result, LibMan provides you a list with available version of searched library. From the list, select your desired version.
Next, based on your need, select “Include All Library File” radio button to have all library files or select “Choose Specific files” radio button to have the option of selecting just your required file from the library files.
Finally, we can set the location that we want to install the library inside “Target Location” field and press Install button to have the library installed. As long as the library is installed, its files appear inside the place that we set in “Target Location” field. Also, LibMan.Json file is created inside root of the project.
Having said that, we can upgrade, downgrade installed libraries and install/uninstall new libraries with this visual tools and with its LibMan.json manifest file.
We can clean all the installed libraries through right clicking on the manifest file (LibMan.json) and select “Clean Client-Side Libraries” option.
We can restore all installed libraries through right clicking on the manifest file (LibMan.json) and select ” Restore Client-Side Libraries” option.
Use Bootstrap
For using Bootstrap and other installed libraries in all the Views, it is recommended loading the libraries inside Layout View as it is lunched before all the Views.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <meta name="viewport" content="width=device-width" /> <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="~/lib/jquery/jquery.js"></script> <script src="~/lib/bootstrap/js/bootstrap.js"></script> <title>@ViewBag.Title</title> </head> <body> <div class="container"> @RenderBody() </div> @*@RenderSection("Scripts", required: false)*@ @if (IsSectionDefined("Scripts")) { @RenderSection("Scripts", required: true) } </body> </html> |
Then we can use Bootstrap classes and other loaded libraries inside all the Views.
Home/Index View with Bootstrap Class
|
1 2 3 4 5 6 7 8 9 10 |
@{ ViewBag.Title = "Welcome to Cost Web Application"; } <div class="alert alert-primary"> <h1>Hello from Home/Index view</h1> </div> |
Cost/List View with Bootstrap Class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@model IEnumerable<Cost> @{ ViewBag.Title = "Cost List"; } <table class="table table-dark"> <thead> <tr> <th>ID</th> <th>Amount</th> <th>Category</th> <th>Comment</th> <th colspan="3" class="text-center">Actions</th> </tr> </thead> <tbody> @foreach (var cost in Model) { <partial name="_CostList_PartialView" model="cost" /> } </tbody> </table> |
Shared/_CostList_PartialView with Bootstrap Class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@model DailyCostWebApplication.Models.Cost <tr> <td>@Model.ID</td> <td>@Model.Amount</td> <td>@Model.Category</td> <td>@Model.Comment</td> <td><a class="btn btn-primary d-block" href="#">View</a></td> <td><a class="btn btn-info btn-block d-block" href="#">Edit</a></td> <td><a class="btn btn-danger btn-block d-block" href="#">Delete</a></td> </tr> |
Cost/Detail View with Bootstrap Class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@model CostDetailViewModel @{ //Layout = null; ViewBag.Title = "Cost Detail"; } <div class="row"> <div class="col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-12"> <div class="card"> <div class="card-header"> @Model.PageTitle </div> <div class="card-body"> <p class="card-text">ID: @Model.CostData.ID</p> <p class="card-text">Amount: @Model.CostData.Amount</p> <p class="card-text">Category: @Model.CostData.Category</p> <p class="card-text">Comment: @Model.CostData.Comment</p> <a href="#" class="btn btn-primary">Cost List</a> </div> </div> </div> </div> |
If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Also you can have access to list of all sessions HERE.
You can download this Session Slides form HERE