Welcome to today’s post.
In this post I will show you how you can use twitter bootstrap theme within your ASP.Net Core web applications.
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.
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.
That’s all!
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.
