May 11, 2015 // By James Barrett
With Microsoft embracing Bootstrap in the latest Visual Studio templates, the time has never been better to outline the advantages of using Twitter’s front end framework in your next project. In this article I will be going over the features of Bootstrap, setting up an instance in Visual Studio, and extending its functionality with jQuery and LESS/SASS.
First and foremost, Bootstrap saves both designers and developers time by providing accelerators to common web interactions out of the box. Components like breadcrumbs, pagination, and dropdown navigation can be easily inserted into your projects with pre -made, semantically correct markup.
In addition, Bootstrap utilizes the 960 grid (a common design pattern for the web) to rapidly design and code html templates that are aesthetically pleasing, and responsive to multiple screen resolutions. Add in the Glyphicon library of font based icons, and you have everything you need to get a web application or site’s UI up and running in minutes.
Bootstrap and Visual Studio 2013
In Visual Studio 2013, Microsoft has included the basic Bootstrap files in their MVC template. Setting up an instance is a 5 minute process:
Once Visual Studio is open, Select File -> New Project. From the templates, select Web under Visual C# and choose ASP.NET Web Application.
On the next screen, select the template you want to use for the project. In this example, we’ll choose MVC.
Once the template is loaded, your screen will look something like this:
Updating and Expanding Bootstrap in Visual Studio 2013
The next step we need to do makes sure we have the latest version of Bootstrap running, and we also want to set up some files that will allow us to expand on its functionality. We will need three things:
- The latest version of Bootstrap
- Bootstrap’s LESS files
- a LESS compiler - for this example we will be using Web Essentials 2013
All of these files can be downloaded through the NuGet Package Manager in Visual Studio. As you are installing each package, overwrite any files it asks — this will update everything in the build and allow you to work on the latest version of Bootstrap.
Now that everything is updated, let’s dive in a bit to the default template Visual Studio provides. In particular, let’s look at the opening container:
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Application name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> <li><a href="/Home/About">About</a></li> <li><a href="/Home/Contact">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="/Account/Register" id="registerLink">Register</a></li> <li><a href="/Account/Login" id="loginLink">Log in</a></li> </ul> </div> </div> </div>
The first thing you’ll notice is the use of the navbar classes in the opening div. The first class, navbar sets the framework for the navbar, (height and border). The next class, navbar-inverse builds on those attributes, defining a new set of styles for the background and color of content. Finally, navbar-fixed-top sets attributes giving the navigation a fixed position at the top.”
The next div contains only one class, aptly named container. This is one of the most often used classes when working with bootstrap, and it comes in two flavors: container and container-fluid.
The container class is has a fixed width based on the grid system in Bootstrap, and responds to the baked in media queries.
The container-fluid class simply gives all content within the div a 100% width.
The next set of divs give you the overall structure of the content of navigation. For this post, let’s focus on the navbar-collapse class and the data-toggle and data-target attributes.
Look here for an example of this feature in action: http://getbootstrap.com/examples/starter-template/
You’ll notice that at a certain screen width, the navigation collapses and can be invoked by clicking on the hamburger icon. This interaction, also baked into Bootstrap, is based on a media query that is linked to the navbar-collapse class; at a certain browser width, the css changes on that div to support the mobile interaction.
This is just the tip of the Bootstrap iceberg. Over the next few weeks, I hope to delve into specific bootstrap examples, including dropdowns, more complex responsive components, and diving deeper into manipulating the grid system. The above examples should give you a high level introduction into the power of Bootstrap.
Now get coding!
If you’d like to speak to us directly, email us or call us at 877-277-1044.