[#VS2013] HowTo: Create a website project in Visual Studio using Bootstrap

image

Hello!

For today’s post I hope that the 3G network works fine in the train; specially when I need to download the NuGet package.

How to create a WebSite project in Visual Studio 2012 or 2013 including Bootstrap

First one: do you know Bootstrap? If you don’t, you should !

Bootstrap is a framework created by Twitter to create interfaces and responsive website based on HTML5 and CSS3.

As that’s it, basically is a zip file which has a couple of .css and. js files. The most common way to get this package is access to the site of Bootstrap and click Download Bootstrap .

image

The zip has everything you need to create a website taking advantage of the features offered by Bootstrap. However there are other more elegant way of doing this.

1 Create a website with Visual Studio 2012 or 2013. For this example I’ve hidden the local path and I put name to the site “BootstrapSample”

image

This action creates a clean website

image

2 Add an HTML page and call it index.html

image

3 Add the following code to the page

 1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5: </head>

   6: <body>

   7:     <div>

   8:         <h1>Title A</h1>

   9:         <p>

  10:             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  11:         </p>

  12:     </div>

  13:     <div>

  14:         <h1>Title B</h1>

  15:         <p>

  16:             Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  17:             Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  18:         </p>

  19:     </div>

  20:     <div>

  21:         <h1>Title C</h1>

  22:         <p>

  23:             Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  24:             Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  25:         </p>

  26:     </div>

  27: </body>

  28: </html>

Note: ‘ve put for example a poem in latin of my authorship.

4. If we navigate the page will see the following

image

Incredible, we have created a simple HTML and ZERO RESPONSIVE page!

5. Then add elements that possesses Bootstrap our website to take advantage of it. In the project we deploy the context menu, select the option “Manage NuGet Packages” and seek by Bootstrap. We select the right and click on “Install”.

image

Big stuff: Bootstrap is Twitter and is pretty obvious in the search results that 1 is not a product of Twitter but… well someone. Beware that you add to your project.

6. Once added the elements of this package our project already has the necessary elements to work with Bootstrap.

image

Update: the next step is not valid, Bootstrap 3.0 is responsive by default. 

7. A detail I saw when I downloaded this pkg is not containing the file “bootstrap-responsive.css” which is which has the styles in responsive mode. We add a file with this name to the project and get the content fromhttp://getbootstrap.com/2.3.2/assets/css/bootstrap.css

8. Now it is to edit the page so it take advantage of some features of Bootstrap. We modify the code to take account of the following

-lines 6, add references to the Bootstrap CSS

-line 10 Add a general DIV to hold the entire contents of the page with the “container” class. This div Add margins to content and adjust it automatically.

-line 11, add a new DIV with the class “row – fluid” that is what contains 3 sections with the content of the page

-line 12, in each DIV put the “col-md-4” class to identify it. (in another post explain how bootstrap mode GRID works or if you want you can see the official help here ))

 1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   6:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   7:     <link href="Content/bootstrap/bootstrap-responsive.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <div class="row">

  12:             <div class="col-md-4">

  13:                 <h1>Title A</h1>

  14:                 <p>

  15:                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

  16:                 </p>

  17:             </div>

  18:             <div class="col-md-4">

  19:                 <h1>Title B</h1>

  20:                 <p>

  21:                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

  22:                     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

  23:                 </p>

  24:             </div>

  25:             <div class="col-md-4">

  26:                 <h1>Title C</h1>

  27:                 <p>

  28:                     Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.

  29:                     Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

  30:                 </p>

  31:             </div>

  32:         </div>

  33:     </div>    

  34:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  35: </body>

  36: </html>

 

9 Ready!

If we navigate to the page and change the size of it would see something similar to this

Bootstrapsample

In the next post I comment on something else already going to ASP.Net MVC projects and stuff because my level off!

References: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Greetings @ La Finca

El Bruno

imageimageimageGoogle

Advertisements

10 thoughts on “[#VS2013] HowTo: Create a website project in Visual Studio using Bootstrap

  1. Hola!
    Me gustaría hacerte una consulta.
    Estoy interesada en el TFS
    Pero utilizado Visual Studio. VB WinForms + Visual WebGui
    el TFS será igual de aplicable?
    Gracias.

    Like

  2. Hi Bruno

    Great post!

    But I think you are in a slight mistake with the bootstrap versions. The current version is 3 (the version that you have downloaded from Nuget in the first step), but later you have downloaded a file (bootstrap-responsive.css) from the version 2.3.2. These file is not neccessary because in version 3, bootstrap is responsive by default. In fact, in your next post you have used the “span” class that does not exist in version 3. I think that you have mixed both versions.

    If it is I who is wrong, forgive and delete forever my comment 😦

    Sorry for my english… si quieres el día que nos veamos te lo cuento en persona 🙂

    Like

    1. Cool cool cool !! best part “… in version 3, bootstrap is responsive by default …”
      I didn’t know this, I’m use to use the spanX class, and I didn’t find this one in the latest release.
      Thanks for the information, I’ll check the documentation for version 3 and update the posts !!!
      Regards

      Like

      1. Now, bootstrap is responsive and fluid (percent size) by default, personally, I was more happy before with the span classes but now you have to use the new col- classes. If you don’t want to be responsive, you will use only the col-x classes that are not affected by media queries. Anyway, now is flat, so I will use bootstrap 3 🙂 (I’m very simple and flat is enough reason for me).

        Like

    1. OMG My code goes out of the page margins ! In post created 3 years ago … 😉
      WP evolved a lot during this time, sadly the plugin I’ve used to paste code, does not evolve 😦
      Thanks for the clarification
      Regards
      -Bruno

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s