How to use Bootstrap 4 in ASP.NET Core

Bootstrap 4

ASP.NET Core

web development

front-end framework

UI design

How to use Bootstrap 4 in ASP.NET Core

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

C# & .NET

Introduction

ASP.NET Core does not include Bootstrap by default (since .NET 6+), so you need to add it manually. The three main approaches are: using LibMan (Library Manager) which is built into Visual Studio, installing via npm, or linking from a CDN. LibMan is the simplest for projects that do not use Node.js tooling. Once added, reference Bootstrap's CSS and JS in your layout file, and use Bootstrap classes in your Razor views.

Method 1: LibMan (Recommended for Visual Studio)

LibMan is Microsoft's client-side library manager, built into Visual Studio and available as a CLI tool.

Via Visual Studio UI

Right-click the project in Solution Explorer
Select Add > Client-Side Library
Set provider to cdnjs
Search for twitter-bootstrap or bootstrap
Select version 4.6.2
Set target location to wwwroot/lib/bootstrap/
Click Install

Via libman.json

Create or edit libman.json in the project root:

json

1{
2  "version": "1.0",
3  "defaultProvider": "cdnjs",
4  "libraries": [
5    {
6      "library": "[email protected]",
7      "destination": "wwwroot/lib/bootstrap/"
8    },
9    {
10      "library": "[email protected]",
11      "destination": "wwwroot/lib/jquery/"
12    },
13    {
14      "library": "[email protected]",
15      "destination": "wwwroot/lib/popper.js/"
16    }
17  ]
18}

Restore via CLI:

bash

dotnet tool install -g Microsoft.Web.LibraryManager.Cli
libman restore

Bootstrap 4 requires jQuery and Popper.js for its JavaScript components (dropdowns, modals, tooltips).

Method 2: npm

If your project already uses Node.js:

bash

npm init -y
npm install [email protected] [email protected] [email protected]

Then copy the files to wwwroot/lib/ using a build step, or configure your bundler to include them.

Method 3: CDN

Add CDN links directly to your layout file. No local installation needed:

html

1<!-- CSS (in <head>) -->
2<link rel="stylesheet"
3      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
4      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
5      crossorigin="anonymous">
6
7<!-- JS (before </body>) -->
8<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
9<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
10<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

CDN is fastest to set up but requires an internet connection and introduces a third-party dependency.

Setting Up the Layout File

Edit Views/Shared/_Layout.cshtml (MVC) or Pages/Shared/_Layout.cshtml (Razor Pages):

html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6    <title>@ViewData["Title"] - My App</title>
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
10    <link rel="stylesheet" href="~/css/site.css" />
11</head>
12<body>
13    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
14        <a class="navbar-brand" asp-page="/Index">My App</a>
15        <button class="navbar-toggler" type="button"
16                data-toggle="collapse" data-target="#navbarNav">
17            <span class="navbar-toggler-icon"></span>
18        </button>
19        <div class="collapse navbar-collapse" id="navbarNav">
20            <ul class="navbar-nav">
21                <li class="nav-item">
22                    <a class="nav-link" asp-page="/Index">Home</a>
23                </li>
24                <li class="nav-item">
25                    <a class="nav-link" asp-page="/About">About</a>
26                </li>
27            </ul>
28        </div>
29    </nav>
30
31    <div class="container mt-4">
32        @RenderBody()
33    </div>
34
35    <!-- jQuery, Popper.js, Bootstrap JS -->
36    <script src="~/lib/jquery/jquery.slim.min.js"></script>
37    <script src="~/lib/popper.js/umd/popper.min.js"></script>
38    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
39    @await RenderSectionAsync("Scripts", required: false)
40</body>
41</html>

Using Bootstrap in Razor Views

html

1@page
2@model IndexModel
3@{
4    ViewData["Title"] = "Home";
5}
6
7<div class="jumbotron">
8    <h1 class="display-4">Welcome</h1>
9    <p class="lead">This is a Bootstrap 4 ASP.NET Core application.</p>
10    <a class="btn btn-primary btn-lg" asp-page="/About">Learn More</a>
11</div>
12
13<div class="row">
14    <div class="col-md-4">
15        <div class="card">
16            <div class="card-body">
17                <h5 class="card-title">Feature One</h5>
18                <p class="card-text">Description of the first feature.</p>
19            </div>
20        </div>
21    </div>
22    <div class="col-md-4">
23        <div class="card">
24            <div class="card-body">
25                <h5 class="card-title">Feature Two</h5>
26                <p class="card-text">Description of the second feature.</p>
27            </div>
28        </div>
29    </div>
30    <div class="col-md-4">
31        <div class="card">
32            <div class="card-body">
33                <h5 class="card-title">Feature Three</h5>
34                <p class="card-text">Description of the third feature.</p>
35            </div>
36        </div>
37    </div>
38</div>

Bootstrap with Tag Helpers

ASP.NET Core Tag Helpers work seamlessly with Bootstrap:

html

1<!-- Form with Bootstrap styling -->
2<form asp-action="Create" method="post">
3    <div class="form-group">
4        <label asp-for="Name" class="control-label"></label>
5        <input asp-for="Name" class="form-control" />
6        <span asp-validation-for="Name" class="text-danger"></span>
7    </div>
8    <div class="form-group">
9        <label asp-for="Email" class="control-label"></label>
10        <input asp-for="Email" class="form-control" type="email" />
11        <span asp-validation-for="Email" class="text-danger"></span>
12    </div>
13    <button type="submit" class="btn btn-primary">Submit</button>
14</form>
15
16<!-- Validation summary -->
17<div asp-validation-summary="ModelOnly" class="alert alert-danger"></div>

Static Files Configuration

Ensure UseStaticFiles() is configured in Program.cs (or Startup.cs):

csharp

1var builder = WebApplication.CreateBuilder(args);
2var app = builder.Build();
3
4app.UseStaticFiles();  // Serves files from wwwroot/
5app.UseRouting();
6app.MapRazorPages();   // or app.MapControllers()
7
8app.Run();

Without UseStaticFiles(), the browser cannot load CSS or JS files from wwwroot/.

Common Pitfalls

Missing jQuery or Popper.js: Bootstrap 4's JavaScript components (modals, dropdowns, tooltips) require jQuery and Popper.js. Without them, these components fail silently.
Wrong file paths: Files must be in wwwroot/ and referenced with ~/. Using ~/lib/bootstrap/css/bootstrap.min.css maps to wwwroot/lib/bootstrap/css/bootstrap.min.css.
Forgetting UseStaticFiles(): Without this middleware, static files in wwwroot/ are not served and CSS/JS returns 404.
Bootstrap 4 vs 5 syntax differences: Bootstrap 5 dropped jQuery and changed data-toggle to data-bs-toggle. If you copy Bootstrap 5 examples into a Bootstrap 4 project, the JS components will not work.
LibMan not restoring on build: By default, LibMan restores on project open in Visual Studio but not during dotnet build. Add a build target to restore automatically if deploying via CI.

Summary

Use LibMan for the simplest Bootstrap 4 setup in Visual Studio projects
Bootstrap 4 requires jQuery and Popper.js for JavaScript components
Reference CSS in <head> and JS before </body> in _Layout.cshtml
Ensure UseStaticFiles() is in your middleware pipeline
Use ~/ prefix for paths to static files in wwwroot/
ASP.NET Core Tag Helpers (asp-for, asp-action) combine naturally with Bootstrap CSS classes

OOD Fundamentals

Master object-oriented design from first principles, SOLID, design patterns, and classic interview problems with hands-on coding.

View the course

Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

How to use Bootstrap 4 in ASP.NET Core

Interview Questions practice on Codemia

Introduction

Method 1: LibMan (Recommended for Visual Studio)

Via Visual Studio UI

Via libman.json

Method 2: npm

Method 3: CDN

Setting Up the Layout File

Using Bootstrap in Razor Views

Bootstrap with Tag Helpers

Static Files Configuration

Common Pitfalls

Summary

Related reading

OOD Fundamentals

Track what you have practised

Interview Questions practice on Codemia