Making Beautiful Style Together: Visual Studio and Bootstrap

By Bill Hatfield  |  eMail Email    Print Print  Post a comment

Time to Beautify!

Time tracking is one of those necessary evils in life. Everyone from factory workers and construction workers to software developers, doctors and lawyers are required to track their hour-to-hour activity across their work week. Good software can make this process a little less painful, especially if it’s available wherever you happen to be. The page I’ll present here is a simple, bare-bones and, at first anyway, quite ugly Web-based time tracker.

If you’ve been following along with the examples above, you can simply add a new page as you did when you first created the project.  Then add the code below within the <form> tag.

    <h1>Time Entry</h1>

    Username: <br/>

        <input id="Username" type="text" /><br/>

    Client: <br/>

        <input id="Client" type="text" /><br/>

    Category: <br/>

        <select id="Category">

            <option>Meeting</option>

            <option>Administration</option>

            <option>Analysis/Design</option>

            <option>Development</option>

            <option>Testing</option>

        </select><br/>

    Start: <br/>

        <input id="Start" type="text" /><br/>

    Duration: <br/>

        <input id="DurationHours" type="text" /> hours, <br/>

        <input id="DurationMinutes" type="text" /> minutes<br />

    Notes: <br/>

        <textarea id="Notes" cols="20" rows="2"></textarea> <br/>

    <br/>

    <input id="Submit" type="submit" value="Submit" />

 

The result harkens back to the dark ages of web design: the 90s.

image019

Your challenge, should you choose to accept it, is to make this page a tribute to modern responsive design!  Or at least to make it look a little less crappy…

The first step is to Bootstrap-enable the page by adding the header tags and the div container for the page.

<head runat="server">

   <title>Time Entry</title>

   <meta charset="utf-8"/>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <link rel="stylesheet"  

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

   <link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

    <script

       src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">

    </script>

</head>

 

<body>

<form id="HtmlForm" runat="server">

<div class="container-fluid">

...

</div>

 

That step alone has a positive effect.

image020

Mostly the difference is the fonts used for the header and the labels.

The next step is to put to use some of the knowledge you acquired in the last section to organize the fields in a more pleasing way. Rather than having a single column of controls, it will look nicer if we create two columns: one for Username, Client and Category and the second for Start, Duration hours and Duration minutes. Then Notes can be at the bottom along with the Submit button.

To accomplish this, a row can hold each pair of side-by-side controls. The code that follows does exactly that. It also uses a few other tricks I’ll discuss next.

 

<div class="container-fluid">

    <h1>Time Entry</h1>

 

    <div class="row">

        <div class="col-sm-4" >

            <label for="Username">Username</label>

            <input id="Username" type="text" class="form-control"/>

        </div>

        <div class="col-sm-4" >

            <label for="Start">Start</label>

            <input id="Start" type="text" class="form-control"/>

        </div>

    </div>

    <br/>

    <div class="row">

        <div class="col-sm-4" >

            <label for="Client">Client</label>

            <input id="Client" type="text" class="form-control"/>

        </div>

        <div class="col-sm-4" >

            <label for="DurationHours">Duration (Hours)</label>

            <input id="DurationHours" type="text" class="form-control"/>

        </div>

    </div>

    <br/>

    <div class="row">

        <div class="col-sm-4" >

            <label for="Category">Category</label>

            <select id="Category" class="form-control">

                <option>Meeting</option>

                <option>Administration</option>

                <option>Analysis/Design</option>

                <option>Development</option>

                <option>Testing</option>

            </select>

        </div>

        <div class="col-sm-4" >

            <label for="DurationMinutes">Duration (Minutes)</label>

            <input id="DurationMinutes" type="text" class="form-control"/>

        </div>

    </div>

    <br/>

    <div class="row">

        <div class="col-sm-8" >

            <label for="Notes">Notes</label>

            <textarea id="Notes" rows="5" class="form-control"></textarea>

        </div>

    </div>

    <br/>

    <div class="row">

        <div class="col-sm-8" >

            <button type="button" class="btn btn-default btn-lg">

                <span class="glyphicon glyphicon-send" aria-hidden="true"></span>

                Submit

            </button>

        </div>

    </div>   

</div>

 

I think you’ll agree that the result is much more pleasing.

 image021

But it wasn’t just positioning that worked that magic. For example, what caused the controls to suddenly have rounded corners? And what made that cool glow appear on the control with focus? All that was necessary for those niceties was to add class="form-control" to each of the controls. Once you’ve done that, they are themed with Bootstrap’s default theme.

The labels look different, too. Instead of just putting text in the page to label the controls, a label tag was used which identifies the control it’s a label for.

Finally I replaced the input type=”submit” with a button control. Within it, in addition to the text, I’ve added a span associated with a glyphicon class. This is a way of accessing one of the many icons that are built in to Bootstrap.

Visual Studio and Bootstrap FAQs

Visual Studio has a long history and has had been a huge Microsoft investment over the years. So as you’d expect, and sheer power of the IDE is unmatched. Also unmatched is the third-party support in the form of forums, articles and blogs dedicated to it. So finding information on virtually any aspect of Visual Studio is usually only a Google search (ahem, I mean Big search) away.

Bootstrap is the most popular too, is a very popular HTML, JavaScript and CSS framework for responsive Web and Mobile design. So here, too, there’s lots of support in the form of community forums, tutorials, add-ons and themes.

In this section, I want to answer some common questions and provide links so you can continue your exploration of both Visual Studio and Bootstrap.

 

Where can I go to find out more about Visual Studio’s features and capabilities?

See https://www.visualstudio.com/en-us/features/features-overview-vs.aspx .

 

Where can I find out more about Visual Studio’s NuGet Manager and what’s available there?

NuGet’s home is at http://www.nuget.org/. For a list of packages available, see http://www.nuget.org/packages. The documentation is here: http://docs.nuget.org/. And NuGet’s blog can be found here: http://blog.nuget.org/.

 

Where can I find out more about Visual Studio’s IntelliSense?

Check out https://msdn.microsoft.com/en-us/library/vstudio/hcw1s69b(v=vs.120).aspx

 

Is all the Bootstrap source code available? Where can I get it?

Bootstrap is free and open source (MIT license) and is available from this GitHub at:

https://github.com/twbs/bootstrap

 

I know that Bootstrap is free and open source, but my company insists on knowing the specifics. Where can I go to find out exactly how the licensing works?

http://getbootstrap.com/getting-started/#license-faqs

 

What browsers and devices are supported by Bootstrap?

This chart succinctly answers your question indicating the browser, the version of the browser on each OS and, in the case of Windows, the version of the OS (7 or 8.1).

image021

For more details: http://getbootstrap.com/getting-started/#support

 

You said there are glyphs (icons) that are built in to Bootstrap. Where can I see what’s available?

http://getbootstrap.com/components/#glyphicons

 

Is there a lint-like tool that can be used with Bootstrap?

Yes! Bootlint is the official Bootstrap HTML linter tool. It can automatically check for common HTML mistakes in Bootstrap webpages. For more, see:

http://blog.getbootstrap.com/2014/09/23/bootlint/

 

Where can I go to get connected to the Bootstrap community?

 

Bootstrap’s default theme is nice, but it’s kind of dull. Are there places where you can download additional Bootstrap themes?

Yes! Some are free and some carry costs:

 

Conclusion

In this article you’ve been introduced to Bootstrap. You saw how to add it to your pages and how to use its grid to organize information on a page. You also discovered some tips for implementing responsive design. Then you saw an ugly duckling of a page turn into a beautiful swan using the grid and a few additional features provided by the Bootstrap framework.

Finally I provided some resources where you can continue your exploration of Visual Studio Community Edition and Bootstrap.

This article was sponsored by Microsoft Corporation.


Page 5 of 5

Previous Page
1 2 3 4 5
 

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  • HTML5 eBook

    HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.
  • Html5 Logo