Creating a MVC Layout page
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:
- Add a new sub folder called
Sharedto theViewsfolder. - Add a new MVC View Layout Page to the
Sharedfolder. The item can be found in the .NET Core | Server-side category of the Add New Item dialog. - Name the file
_Layout.cshtmland click on the Add button:
- With the current project layout, add the following HTML to the
_Layout.cshtmlfile:<!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> - Finally, add a new MVC View Start Page to the
Viewsfolder called _ViewStart.cshtml. The_ViewStart.cshtmlfile is used to specify common code shared by all views. - Add the following Razor markup to the
_ViewStart.cshtmlfile:@{ Layout = "_Layout"; } - In the preceding mark-up, a reference to the Bootstrap CSS file that was generated using the Sass source files and Gulp is added to the
<head>element of the file. In the<body>tag, the@RenderBodymethod is invoked using Razor syntax. - Finally, at the bottom of the file, just before the closing
</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.
Content Delivery Networks
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>
Note
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:
- MaxCDN: https://www.maxcdn.com/
- Google Hosted Libraries: https://developers.google.com/speed/libraries/
- CloudFlare: https://www.cloudflare.com/
- Amazon CloudFront: https://aws.amazon.com/cloudfront/
