The final step for using Bootstrap 4 in your ASP.NET MVC project is to create a Layout page that will contain all the necessary CSS and JavaScript files in order to include Bootstrap components in your pages. To create a Layout page, follow these steps:
Shared
to the Views
folder.Shared
folder. The item can be found in the .NET Core | Server-side category of the Add New Item dialog._Layout.cshtml
and click on the Add button:_Layout.cshtml
file:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>@ViewBag.Title</title> <link rel="stylesheet" href="~/css/bootstrap.css" /> </head> <body> @RenderBody() <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> </body> </html>
Views
folder called _ViewStart.cshtml
. The _ViewStart.cshtml
file is used to specify common code shared by all views._ViewStart.cshtml
file:@{ Layout = "_Layout"; }
<head>
element of the file. In the <body>
tag, the @RenderBody
method is invoked using Razor syntax.</body>
tag, a reference to the jQuery library and the Bootstrap JavaScript file is added. Note that jQuery must always be referenced before the Bootstrap JavaScript file.You could also reference the jQuery and Bootstrap library from a Content Delivery Network (CDN). This is a good approach to use when adding references to the most widely used JavaScript libraries. This should allow your site to load faster if the user has already visited a site that uses the same library from the same CDN, because the library will be cached in their browser.
In order to reference the Bootstrap and jQuery libraries from a CDN, change the <script>
tags to the following:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
You can download the example code files for this book from https://github.com/Pietervdw/bootstrap-for-aspnetmvc.
There are a number of CDNs available on the Internet; listed here are some of the more popular options:
3.15.226.120