Visual Studio Tools For Bootstrap

Scope

This article focuses on the tools available in Visual Studio to develop Web Applications using Bootstrap.

Requirements

The following article is based on Visual Studio 2013.

Introduction

Bootstrap is one of the most popular HTML, CSS and JavaScript framework for developing responsive, mobile friendly projects on the web.

Bootstrap makes front-end web development faster and easier. It's designed for folks of all skill levels, devices of all shapes and projects of all sizes.

When creating Web Apps in Visual Studio, Bootstrap is included by default in the project that helps developers create high-end responsive web applications.

To enhance the development experience, there are many tricks, tools and Visual Studio Extensions available. This article shows some of these tools that may really improve developer productivity and make development much easier.

Bootstrap support by Default for Web Apps in Visual Studio

From Visual Studio, when creating a new web application, whether web forms or MVC, Bootstrap is already installed and loaded in the project.

The following is an example of a new MVC application.

As you can see below, the Booststrap CSS and JavaScript files are already added by default.





Moreover, Visual Studio provided IntelliSense for Bootstrap. This again makes Bootstrap much easier to use and substantially increases developer productivity.



Default Scaffolding using ASP.NET MVC

Visual Studio not only supports Bootstrap, it can also generate your views using Bootstrap.

The following is a basic example of scaffolded code.

Step 1

Create a new Model.

public class People
{
   public int Id { get; set; }
   public string Name { get; set; }
   public string Surname { get; set; }
   public string Address { get; set; }
}

Step 2

Add a Controller.

Right-click on Controller, then add a Controller.


Step 3

Select MVC 5 Controller with views, using Entity Framework.



Step 4

Select the model class and hit Add.



This may take a couple of seconds. Visual Studio creates the view from the model.

The following pages are created using Bootstrap as shown below.



Based on the model, Visual Studio will automatically detect the required fields and generate the views for the Create, Delete, Details, Edit and Index pages.

All these pages are written using Bootstrap as in the following.

Sample from Index.cshml

<table class="table" >
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Surname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th></th>
    </tr>

Sample from Edit.cshtml

<div class="form-group">
    @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
</div>

Custom Scaffolding / Scaffolding templates

In actual applications, there is a need to keep the layout standard across all the pages. For example, tables should be of a specific layout.

One way of doing that is to modify each page after scaffolding the code and that requires duplication of tasks. Another more interesting way of proceeding is to define a template so that Visual Studio knows how to scaffold the code.

This can be done using a really great Visual Studio plugin called SideWaffle.

The SideWaffle extension adds a bunch of useful snippets, project and item templates to Visual Studio. Its purpose is to make your daily work in Visual Studio a richer and more productive experience.

Installing SideWaffle

The following is the procedure to Install SideWaffle.

Step 1

Go to Tools, then Extensions and Updates > Online > Search SideWaffle.



Step 2

Select Side Waffle Power Pack and click Download.

Step 3

This will download a VSIX package.

Step 4

Once the download completes, open it and select the versions of Visual Studio you need to install it.



Generating Templates using SideWaffle

Step 1

When the installation completes, restart Visual Studio.

Step 2

Right-click on the project, Add new Item and select ASP.NET Scaffolding T4 Files.



Step 3

Identify the Code Templates.

The folder Code Templates will be added. These are the templates that are used to create the scaffolding.
To modify the "View Templates", look for the "MVC View" folder.



Step 4

Modify the Template.

The "MVC View" folder has the templates for all the views that can be scaffolded via MVC.

Assume that when viewing the records, all the tables must be bordered and have a hover effect.

To do this, modify the list template (list.cs.t4) and add the following to the table tag.

<table class="table table-bordered table-hover" >

Step 5

Test the changes.

To test this change, delete the People controller and views and scaffold them again as explained in Part 2.

Now, if you go to the Index.html of the folder people, the classes table-bordered table-hover have automatically been added.

The same thing will happen if you scaffold another view for any other model.

<table class="table table-bordered table-hover" >
   <tr>
       <th>
           @Html.DisplayNameFor(model => model.Name)
       </th>
       <th>
           @Html.DisplayNameFor(model => model.Surname)
       </th>
       <th>
           @Html.DisplayNameFor(model => model.Address)
       </th>
       <th></th>
    </tr>

The following is the output of the generated code.



Bootstrap Snippet Pack

Bootstrap Snippet Pack has a collection of Bootstrap snippets for Visual Studio.

Very often, web developers need to go to minimize their development environment then go to the Bootstrap website to find a piece of HTML of a specific component.

Doing this all day reduces the developer productivity since he must switch back and forth between the browser and the development environment.

Fortunately, with Bootstrap Snippet Pack, a code snippet can be retrieved via Visual Studio.

To install the Bootstrap Snippet Pack, from Visual Studio, go to Tools, then Extensions and Updates > Online > Search Bootstrap Snippet Pack.



Once Installed, from Visual Studio editor, hit CTL+K, CTL+X to bring in the snippet tool.



Then select Bootstrap and the component needed.



The Bootstrap Snippet Pack will automatically generate the required HTML.



Bootstrap Bundle

Another great Visual Studio Extension is Bootstrap Bundle.

Bootstrap Bundle includes a project template for all the Bootstrap example layouts and to start Bootstrap's Modern Business and Business Casual full website templates.

The extension guides you through the creation of a Bootstrap themed ASP.Net MVC website, you can choose your site layout as well as the site color scheme based on BootSwatch.

Installing Bootstrap Bundle

This plugin can be downloaded from Visual Studio itself. Just go to Tools, then Extensions and Updates > Online and search for Bootstrap Bundle.

Select the plug-in and hit download then install.



Creating a template using Bootstrap Bundle

Step 1

To use the plugin, select File, then New Project.

Step 2

Select Bootstrap Bundle MVC Site.



Step 3

This will show a wizard that will help you create a Bootstrap WebSite.



Step 4

For this example, select from the templates, then select Modern Business.



Step 5

Select the pages that will be needed.



Step 6

Click Next to select a theme.



Step 7

Click Next to Add the WebSite title, then click Finish.



Step 8

This takes a couple of seconds for the code and pages to be scaffolded.



Step 9

You may then run the application.

All the code has been scaffolded and a clean template is created within minutes.

The user just must customize the contents and it's all done.

The following are some screenshots of the output.







References

• Getbostrap.com
• SideWaffle Template Pack
• SideWaffle.com
• Bootstrap Snippet Pack
• BootstrapBundle.com