Making Beautiful Style Together: Visual Studio and Bootstrap

By Bill Hatfield  |  eMail Email    Print Print  Post a comment

Creating a Page the Leverages Bootstrap

In Solution Explorer, right-click on your project and from the context menu, choose Add / New Item. Select Web Form, give it a name and click OK. The newly created .aspx page appears in the root of the project.

Now, to make Bootstrap available to your page, change the head tag to look like this:

<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="bootstrap.min.css"/>

   <script src="bootstrap.min.js"></script>

   <link rel="stylesheet" href="bootstrap-theme.min.css"/>

</head>

The first link tag loads in the Bootstrap CSS files. The script tag loads in the JavaScript elements. The second link tag is optional and retrieves the Bootstrap default theme. If you don’t have a very specific design in mind, this default theme is a great starting point. At the end of this article, I’ll identify some sites where you can download additional Bootstrap themes.

Understanding Responsive Design

Responsive design is one of the hottest buzzwords in site design today. It refers to the ability of a site to adapt to the size of the browser — whether it’s viewed on a high-resolution desktop or a phone. Of course this involves making text wrap appropriately, but it also means that the way objects appear on the page changes depending on the width available.

Here’s an example from the Barack Obama website. When the browser is narrow, as it would be on a phone, everything is stacked vertically and graphics are kept to a minimum.

image006

When more width is available, perhaps on a tablet, some items begin to appear beside each other and more graphics appear.

image007

 

Finally, on a standard desktop browser, items are arranged more freely and all graphics appear.image008


Page 2 of 5

Previous Page
1 2 3 4 5
Next Page

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