Book Image

Bootstrap for ASP.NET MVC

By : Pieter van der Westhuizen
Book Image

Bootstrap for ASP.NET MVC

By: Pieter van der Westhuizen

Overview of this book

<p>Bootstrap, a leading open source frontend framework, takes care of typography, form layouts, and user interface components, allowing a developer to focus on writing code. Integrating ASP.NET's powerful components can further enhance its capabilities. This book guides you through the process of creating an ASP.NET MVC website from scratch using Bootstrap.</p> <p>You will learn about various Bootstrap components as well as techniques to include them in your own projects. The book includes practical examples to show you how to use open source plugins with Bootstrap and ASP.NET MVC and will guide you through building a website using Bootstrap, utilizing layout and user interface components. In the process, you will also learn to build HTML helpers and T4 templates as well as how to use the jQuery DataTables plugin. At the end of this book, you will find some valuable tips and tricks, which will help you in getting the most out of your Bootstrap and ASP.NET MVC integrated website.</p>
Table of Contents (18 chapters)
Bootstrap for ASP.NET MVC
Credits
About the Author
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Creating an empty ASP.NET MVC site and adding Bootstrap manually


The default project layout is a good start for any ASP.NET MVC project, but for the sample project we'll be building throughout this book, we'll create an empty ASP.NET MVC site and add the necessary files manually. This is done by performing the following steps:

  1. Start by creating a new ASP.NET web application project in Visual Studio and name the project Northwind.Web.

  2. This time, select the Empty template in the New ASP.NET Project dialog and make sure the MVC checkbox is selected, as shown in the following screenshot:

  3. An empty project layout will be created for you and you'll notice that we do not have the Content, Fonts, or Scripts folder—we'll add them ourselves!

Adding the Bootstrap style sheets

To add the Bootstrap style sheet files to your project, complete the following steps:

  1. Create a new folder by right-clicking on the new project's name inside Visual Studio's Solution Explorer and navigating to Add | New Folder, name the new folder css.

  2. Next, right-click on the newly created css folder and navigate to Add | Existing Item… from the context menu.

  3. Browse to the folder in which you've extracted the Bootstrap distribution files and select the bootstrap.css file that you can locate in the css folder.

Adding the Bootstrap fonts

Add the required Bootstrap fonts by performing the following steps:

  1. As with the style sheets, create a new folder called fonts.

  2. Next, browse to the location to where you've extracted the Bootstrap download and add all the files from the fonts folder to your fonts folder in Visual Studio.

  3. There should be four files in total, each named glyphicons-halflings-regular but with the following different file extensions:

    • .eot

    • .svg

    • .ttf

    • .woff

Adding the Bootstrap JavaScript files

The final Bootstrap file we'll need is bootstrap.js. To add it, perform the following steps:

  1. Before adding the bootstrap.js file to your Visual Studio project, create a new folder called js.

  2. Add the bootstrap.js file to this folder.

  3. Once completed, the project layout should look similar to the following screenshot in the Visual Studio's Solution Explorer: