Welcome to today’s post.
In this post I will show you how you can use the Twitter bootstrap theme within your ASP.NET Core web applications.
In the tasks I will show today, I will first show you how to add the Twitter Bootstrap theme as a client library from a JavaScript CDN. I will then show how to integrate the CDN into your web application.
I will also show how to configure the bootstrap library in a development environment and in a non-development environment (such as a production environment). What this means is that in an isolated development environment, where there may be no proxy enabled access the internet, the library path will default to a relative folder path in your application subfolder containing bootstrap that was installed from the ASP.NET Core project template. In the non-development environment, the path to the bootstrap library will be the CDN URL.
Then I will show how to apply the same environment configurations to support running a jQuery library from either a CDN (from a non-development environment), or from a local folder in a development environment.
Installing the Twitter Bootstrap Library from the CDN
With the current ASP.NET Core web application templates available within Visual Studio 2017, it is quite straightforward to create a web application that uses bootstrap styling.
Creating a new ASP.NET Core Web Application that uses bootstrap is done using the Web application template as shown below when creating a new project.
After this is generated. Go to the Solution Explorer and expand the wwwroot folder.
You should see a bootstrap subfolder under wwwroot.
If you used the empty web application template to generate a web project, then you can do the following steps to install bootstrap into your wwwroot folder.
On the wwwoot folder, click on
Add | Client Side Library…
The following dialog will pop-up:
In the library edit type in “bootstrap”.
Select twitter-bootstrap. The folders will select as shown:
Click install.
If you created your application using the template, then bootstrap would already have been installed into the wwwroot\lib subfolder. You will need to modify any pages to include from this folder. I will show how this is done in the next section.
Configuring the Twitter Bootstrap CSS and JavaScript Library
In your application, there will need to be a shared layout page that includes references to the bootstrap script library and CSS files.
Under \Views\Shared, if not already there, create a file _Layout.cshtml.
Open the file.
In between the <head> … </head> section, add the lines:
<environment include="Development">
<link rel="stylesheet" href= "~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
The above will apply the stylesheet when your application is being run in the development environment.
Next, under the same header tag, add the following lines:
<environment exclude="Development">
<link rel="stylesheet"
href= "https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href=
"~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css"
asp-append-version="true" />
</environment>
The above will apply the bootstrap CDN stylesheet when the application is run from test or production environment.
Within the <body> … </body> tags, just before the closing tag, add the following lines:
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
The above will apply the JavaScript library for jQuery and Bootstrap when your application is being run in the development environment.
Next, after the above lines under the same body tag, add the following lines:
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true">
</script>
</environment>
The above will apply the bootstrap script library and jQuery script library from the CDN when the application is run from test or production environment.
To include the _Layout.cshtml layout page in your view UI pages, include the ViewStart.cshtml file under the \Views folder.
ViewStart.cshtml should contain the line to include the layout page:
@{
Layout = "_Layout";
}
When you run the application, you will see the page render with a bootstrap theme, like the one below.
The above walkthrough has shown how to install and configure the Twitter Bootstrap theme into your ASP.NET Core applications. We have also seen how to configure referencing the theme’s styling and library into the application depending on our current environment (development, test, production).
That is all for today’s post.
I hope this post has been useful for you in your web development.
Andrew Halil is a blogger, author and software developer with expertise of many areas in the information technology industry including full-stack web and native cloud based development, test driven development and Devops.
