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.
Why Bootstrap?
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:
In the Solution Explorer, you’ll notice that a number of files have been included. The two folders what are important to bootstrap are the Content folder, which contains the bootstrap CSS, and the View folder which contains the Bootstrap javascript files, including a copy of jQuery. Since Bootstrap is a constantly evolving framework, we’ll want to make sure we have the latest version. Thankfully, Visual Studio has a way keeping things up to date easy.
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.
One area where Bootstrap shines is in its out-of-the-box support for responsive, ‘mobile first’ designs. Using CSS media queries, and jQuery, a developer can easily include common responsive interactions. In the above example, a button tag has the class navbar-toggle assigned to it, as well as two attributes: data-toggle and data-target. data-toggle is linked to a JavaScript function called “collapse” which shows and hide’s content on click. data-target tells bootstrap what div you want to perform that action on. So, in the above example, when you click on the button, it will perform the collapse toggle animation on the div with the class navbar-collapse.
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.