Making Beautiful Style Together: Visual Studio and Bootstrap
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:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap-theme.min.css"/>
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.
When more width is available, perhaps on a tablet, some items begin to appear beside each other and more graphics appear.
Finally, on a standard desktop browser, items are arranged more freely and all graphics appear.