Introduction
This article will help you to create a responsive website using ASP.NET. Learn more about responsive from What is Foundation?.
Step 1

Download the responsive CSS and JavaScript files from Download Foundation 5 (you can customize your download).

Step 2
Open your Visual Studio then add your downloaded file into your project then add a default.aspx page and call your necessary files within the head tag from that downloaded folder.
  1. <head runat="server">
  2. <title></title>
  3. <script src="Foundation/js/foundation.min.js" type="text/javascript"></script>
  4. <link href="Foundation/css/foundation.min.css" rel="stylesheet" type="text/css" />
  5. </head>
Step 3
Foundation zurb provides so many functions in responsive. You can learn about it from my previous link :(http://foundation.zurb.com/docs/index.html) .
Now I will explain how to create a simple signup form with a responsive page. Once you add foundation.min.js and foundation.min.css you can get very many classes.
Before starting a responsive design you must specify <div class="row"></div>. Here the class row is a new line (for example: <tr></tr> in the table tag).
  1. <div class="row">
  2. </div>
Then you need to assign your space for specific content through the class large; class large-12 is 100% width. We can share 100% width to every object, for example:
  1. <div class="row">
  2. <div class="large-4 columns">...</div>
  3. <div class="large-4 columns">...</div>
  4. <div class="large-4 columns">...</div>
  5. </div>
Full Example
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Responsive_Site.Index" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. <script src="Foundation/js/foundation.min.js" type="text/javascript"></script>
  9. <link href="Foundation/css/foundation.min.css" rel="stylesheet" type="text/css" />
  10. </head>
  12. <body>
  13. <form id="form1" runat="server">
  14. <br /><br />
  15. <div class="row" style="border:2px solid blue">
  16. <div class="large-12 columns">
  17. <br /><br />
  18. <div class="row">
  19. <div class="large-12 columns text-center">
  20. <b>Signup Form</b>
  21. </div>
  22. </div><br /><br />
  23. <div class="row">
  24. <div class="large-12 columns">
  25. Name:
  26. </div>
  27. </div>
  28. <div class="row">
  29. <div class="large-12 columns">
  30. <asp:TextBox ID="txtUName" runat="server" placeholder="User name"></asp:TextBox>
  31. </div>
  32. </div>
  33. <br /><br />
  34. <div class="row">
  35. <div class="large-12 columns">
  36. Email id:
  37. </div>
  38. </div>
  39. <div class="row">
  40. <div class="large-12 columns">
  41. <asp:TextBox ID="txtEmail" runat="server" placeholder="Email id"></asp:TextBox>
  42. </div>
  43. </div>
  44. <br /><br />
  45. <div class="row">
  46. <div class="large-12 columns">
  47. Phone no:
  48. </div>
  49. </div>
  50. <div class="row">
  51. <div class="large-12 columns">
  52. <asp:TextBox ID="txtPhone" runat="server" placeholder="Phone number"></asp:TextBox>
  53. </div>
  54. </div>
  55. <br /><br />
  56. <div class="row">
  57. <div class="large-12 columns">
  58. Address:
  59. </div>
  60. </div>
  61. <div class="row">
  62. <div class="large-12 columns">
  63. <asp:TextBox ID="txtAddress" runat="server" placeholder="Address" TextMode="MultiLine"></asp:TextBox>
  64. </div>
  65. </div>
  66. <br /><br />
  67. <div class="row">
  68. <div class="large-6 columns">
  69. <asp:Button ID="btnSubmit" runat="server" Text="Submit"></asp:Button>
  70. </div>
  71. <div class="large-6 columns">
  72. <asp:Button ID="btnCancel" runat="server" Text="Cancel"></asp:Button>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </form>
  78. </body>
  79. </html>
Output (on large screens)
Output (on small screens)