Bootstrap Snippet Pack for Visual Studio

So recently I've been more and more interested in using Bootstrap. Boostrap is awesome for creating very rich and responsive websites or even mobile apps in something like Apache Cordova. My biggest issue was how do I make a Boostrap site quickly without having to memorize all the classes that make up the styles.

In comes Bootstrap Snippet Pack. An extension for Visual Studio that allows you to quickly create Bootstrap elements in a few simple clicks or key strokes. So what is it? It's a Visual Studio extension that contains pre-defined code snippets for you to quickly call. Simple as that!

First, go get the extension here. Once you have run through the installation you may have to restart Visual Studio. Now that you have the extension, open Visual Studio and create a new web project of any kind, MVC, Webforms or just an HTML page.

The easiest way to add a snippet is by using the keyboard shortcut to access code snippets in Visual Studio. The magic key stroke is Crtl+K, Crtl+X. You are presented with the snippet tool as shown below.

Simply select Bootstrap from the menu and hit enter. You are now presented with all the code snippets for Bootstrap. Again, shown below.

Let's try something simple. Find Bootstrap 3.x form. This will give you a simple label, textbox and submit button styled with Bootstrap.

If you run this you are given the following design:

Now as you can see I have used a boilerplate ASP.Net application, specifically a Webforms application. By inserting the form snippet between the Jumbotron element, also boostrap, and the rest of the body, I get a simple Email submittal form. Again this is all styled with Bootstrap.

Now that you have seen how simple it can be to mock up a website using a nice style it's time to explore. Go through the Bootstrap snippets and try them out. The form that I have showed you can have many more fields. Just copy the email label and texbox and paste in as many as you want for whatever fields you need. Just remember to change the names so you don't have 10 email fields. That's it! Also, visit the Bootstrap website here and start digging into how forms, buttons, modals, tables and so much more are styled with Bootstrap.

Well I hope you enjoyed this post. If you have any questions drop me a message via any of the social media spots above. Hopefully this is another tool that will help you be great! Thanks!


Comments are closed