Making Beautiful Style Together: Visual Studio and Bootstrap
Bootstrap is a popular approach for standardizing how style is done for both desktop and mobile websites. But getting started can be confusing. In this article, you’ll find out how to get up and running with Bootstrap using Microsoft Visual Studio Community 2015 Edition (VSCE), a free version of Microsoft’s flagship development environment. (If you aren’t already familiar with VSCE, see “Getting a Free, Yet Powerful Web Dev Tool: Visual Studio Community 2015 Edition” to learn how to download and install it.) After that, you’ll see how to apply Bootstrap to an existing site to make it pop.
What Exactly is Bootstrap?
Bootstrap isn’t difficult to understand, but there are a few concepts to master that will help you take advantage of all it has to offer. By the end of this article you’ll be ready to begin taking your sites to the next level.
Getting Started with Visual Studio
First you need Visual Studio Community 2015 Edition. Next, you need to create a project in Visual Studio. Just start Visual Studio and from the menus choose File / New Project (or hit Ctrl+Shift+N).
Along the left, under Templates, open Visual C# and click on Web. Now click to select ASP.NET Web Application. Give the project a name at the bottom and click OK.
A second dialog appears asking for more specifics on the kind of Web application you want to create.
From here, you can select from among a number of different kinds of Web application styles including Web Forms, MVC, etc. Each of these application approaches provide different capabilities to accelerate you development, whatever project entails.
About Microsoft Azure
You may or may not see this dialog appear.
This dialog is a reminder that Microsoft Azure is a cloud computing platform that provides a whole lot of features and capabilities for hosting, maintaining and monitoring your site’s health. Its tight integration with Visual Studio makes it a very good option for many developers. If you’re interested in investigating Microsoft Azure further, you can get a free trial at http://azure.microsoft.com/en-us/pricing/free-trial/. You can also learn more about hosting your website on Azure by reading “So you want to Build and Deploy a Web App to the Cloud – at low-to-no cost”
For our purposes now, go ahead and click the No thanks… option under the Sign In button. Your project will be created and you’re ready to begin.
Getting Started with Bootstrap
Next, you’ll need Bootstrap itself. And thanks to Visual Studio’s NuGet Package Manager, the process is a snap.
In Solution Explorer on the right, click to select your project name (it should be the second from the top, under the solution name). Now from the menus select Project / Manage NuGet Packages…
When the new tab appears. It retrieves a list of NuGet packages available. When the list appears, click the search textbox in the upper-right and enter bootstrap. Your results will look something like this.
Here you see that Bootstrap has installed and one other thing – jQuery. Why? One of the things Visual Studio did when you requested Bootstrap’s installation is to look to see if Bootstrap depended on any other libraries. In this case it required jQuery. So it first installed jQuery and then installed Bootstrap. NuGet packages are available for virtually any library you’re likely to need.
As you can see Visual Studio’s NuGet Package Manager makes an otherwise time-consuming and error-prone process as quick and simple as a search and a click.
In Solution Explorer, notice the new folders in your project.
When you open up Content, fonts, and Scripts, you’ll see all the files that were added for Bootstrap. You don’t need to do anything with these files except reference the ones you need in your pages.