title: Bootstrap Asp.net web form page is not responsive when the screen resolution size reduces
body: <p>I'm trying to create an responsive asp.net web page using the bootstrap frame. while reducing the the screen size my design is not looking as it is in the higher screen resolution.</p>
  
  <p>code:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CreateResume.aspx.cs" Inherits="Login_Page.SucessPage" %&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
     &lt;head runat="server"&gt;
        &lt;title&gt;Resume Builder&lt;/title&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
        &lt;link href="Content/bootstrap.css" rel="stylesheet" /&gt;
        &lt;link href="Content/bootstrap.min.css" rel="stylesheet" /&gt;
        &lt;script src="Scripts/jquery-2.2.1.js"&gt;&lt;/script&gt;
        &lt;script src="Scripts/jquery-2.2.1.min.js"&gt;&lt;/script&gt;
        &lt;script src="Scripts/bootstrap.js"&gt;&lt;/script&gt;
        &lt;script src="Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;style type="text/css"&gt;
           .titleAlignment {         
           text-align:center;
           }
           .subTitleAlignment {
           margin-left:160px !important;
           }
           .RegDetailsPortion {
           width:50%; 
           float:left;
           }
           .GraduationDetailsPortion {
           width:50%;
           float:left;
           }
           #GraduationDetailsImg {
           margin-left:100px;
           margin-top:100px;
           width:300px;
           height:300px;
           }
           .disableHyperLinkDecoration {
           text-decoration:none !important;
           }
           .disableHyperLinkDecoration:hover {
           color: #33CC33;
           }
           .panel-title {
           text-align:center;
           }
           #btnCreateResume {
           margin-left:525px !important;
           }
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;form id="form1" runat="server" class="form-horizontal" &gt;
           &lt;div class="container"&gt;
              &lt;h3 class="titleAlignment"&gt;RESUME CREATION&lt;/h3&gt;
              &lt;div class="panel-group" id="accordion"&gt;
                 &lt;!-- Graduation Region Start --&gt;
                 &lt;div class="panel panel-default"&gt;
                    &lt;div class="panel-heading"&gt;
                       &lt;h4 class="panel-title"&gt;
                          &lt;a class="disableHyperLinkDecoration" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;GRADUATION:&lt;/a&gt;
                       &lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div id="collapseTwo" class="panel-collapse collapse in"&gt;
                       &lt;div class="panel-body"&gt;
                          &lt;div class="col-lg-6 col-m-6" &gt;
                             &lt;div class="RegDetailsPortion"&gt;
                                &lt;div class="form-group"&gt;
                                   &lt;asp:Label ID="lblDegree" runat="server" CssClass="control-label col-sm-4" Text="Degree:" Font-Bold="true"&gt;&lt;/asp:Label&gt;
                                   &lt;div class="col-sm-8"&gt;
                                      &lt;asp:TextBox ID="txtDegree" runat="server" class="form-control" TextMode="MultiLine" Columns="20" Rows="3" placeholder="Degree" MaxLength="100" ValidationGroup="ResumeCreation"&gt;&lt;/asp:TextBox&gt;
                                      &lt;asp:RequiredFieldValidator ID="rfvRCDegree" runat="server" ControlToValidate="txtDegree" ErrorMessage="Please enter the Degree" ForeColor="red"&gt;&lt;/asp:RequiredFieldValidator&gt;
                                      &lt;asp:RegularExpressionValidator ID="regEXRCDegree" runat="server" ControlToValidate="txtDegree"
                                         ValidationExpression="[a-zA-Z ]*$" ErrorMessage="Please enter Alphabets only" ForeColor="Red" /&gt;
                                   &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                   &lt;asp:Label ID="lblUnivNAme" runat="server" CssClass="control-label col-sm-4" Text="Name of Univ/College:" Font-Bold="true"&gt;&lt;/asp:Label&gt;
                                   &lt;div class="col-sm-8"&gt;
                                      &lt;asp:TextBox ID="txtUnivName" runat="server" class="form-control" TextMode="MultiLine" Columns="20" Rows="3" placeholder="University/College Name" ResumeCreation="ResumeCreation"&gt;&lt;/asp:TextBox&gt;
                                      &lt;asp:RequiredFieldValidator ID="rfvRCUniversityName" runat="server" ControlToValidate="txtUnivName" ErrorMessage="Please enter the University/College Name" ForeColor="red"&gt;&lt;/asp:RequiredFieldValidator&gt;
                                      &lt;asp:RegularExpressionValidator ID="regEXRCUniversity" runat="server" ControlToValidate="txtUnivName"
                                         ValidationExpression="[a-zA-Z ]*$" ErrorMessage="Please enter Alphabets only" ForeColor="Red" /&gt;
                                   &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                   &lt;asp:Label ID="lblCity" runat="server" CssClass="control-label col-sm-4" Text="City/Town:" Font-Bold="true"&gt;&lt;/asp:Label&gt;
                                   &lt;div class="col-sm-8"&gt;
                                      &lt;asp:TextBox ID="txtCity" runat="server" class="form-control" placeholder="city" MaxLength="100" ValidationGroup="ResumeCreation"&gt;&lt;/asp:TextBox&gt;
                                      &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUnivName" ErrorMessage="Please enter the University/College Name" ForeColor="red"&gt;&lt;/asp:RequiredFieldValidator&gt;
                                      &lt;asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtUnivName"
                                         ValidationExpression="[a-zA-Z ]*$" ErrorMessage="Please enter Alphabets only" ForeColor="Red" /&gt;
                                   &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                   &lt;asp:Label ID="lblYearOfPassing" runat="server" CssClass="control-label col-sm-4" Text="Year of Passing:" Font-Bold="true"&gt;&lt;/asp:Label&gt;
                                   &lt;div class="col-sm-8"&gt;
                                      &lt;asp:DropDownList ID="drpListYearOfPassing"  runat="server" Width="360px" Height="30px"&gt;
                                         &lt;asp:ListItem Text="Select Year" Value="0"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="2016" Value="1"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="2015" Value="2"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="2014" Value="3"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="2013" Value="4"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="2012" Value="5"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="2011" Value="6"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="2010" Value="7"&gt;&lt;/asp:ListItem&gt;
                                      &lt;/asp:DropDownList&gt;
                                      &lt;asp:RequiredFieldValidator ID="rfvRCYearOfPassing" runat="server" ErrorMessage="Please Select the Year" ControlToValidate="drpListYearOfPassing" ForeColor="Red" InitialValue="0"&gt;&lt;/asp:RequiredFieldValidator&gt;
                                   &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                   &lt;asp:Label ID="lblGraduationStatus" runat="server" CssClass="control-label col-sm-4" Text="Graduation Status:" Font-Bold="true"&gt;&lt;/asp:Label&gt;
                                   &lt;div class="col-sm-8"&gt;
                                      &lt;asp:DropDownList ID="drpListGraduationStatus" runat="server" Width="360px" Height="30px"&gt;
                                         &lt;asp:ListItem Text="Select Status" Value="0"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="Completed" Value="1"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="Pursuing" Value="2"&gt;&lt;/asp:ListItem&gt;
                                         &lt;asp:ListItem Text="Withdrawn" Value="3"&gt;&lt;/asp:ListItem&gt;
                                      &lt;/asp:DropDownList&gt;
                                      &lt;asp:RequiredFieldValidator ID="rfvRCGraduationStatus" runat="server" ErrorMessage="Please Select the Status" ControlToValidate="drpListGraduationStatus" ForeColor="Red" InitialValue="0"&gt;&lt;/asp:RequiredFieldValidator&gt;
                                   &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                   &lt;asp:Label ID="lblMarksObtained" runat="server" CssClass="control-label col-sm-4" Text="Marks/Grade Optained:" Font-Bold="true"&gt;&lt;/asp:Label&gt;
                                   &lt;div class="col-sm-8"&gt;
                                      &lt;asp:TextBox ID="txtMarksObtained" runat="server" class="form-control" placeholder="Marks/Grade" MaxLength="4" ValidationGroup="ResumeCreation"&gt;&lt;/asp:TextBox&gt;
                                      &lt;asp:RequiredFieldValidator ID="rfvRCMarks" runat="server" ControlToValidate="txtMarksObtained" ErrorMessage="Please enter the Marks/Grade" ForeColor="Red"&gt;&lt;/asp:RequiredFieldValidator&gt;
                                      &lt;asp:RegularExpressionValidator ID="regExRCMarks" runat="server" ControlToValidate="txtMarksObtained" ValidationExpression="^[a-zA-Z0-9]+$" ErrorMessage="please enter Marks or Grade only" ForeColor="Red"&gt;&lt;/asp:RegularExpressionValidator&gt;
                                   &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                   &lt;asp:Label ID="lblPerMarks" runat="server" CssClass="control-label col-sm-4" Text="%age Marks:" Font-Bold="true"&gt;&lt;/asp:Label&gt;
                                   &lt;div class="col-sm-8"&gt;
                                      &lt;asp:TextBox ID="txtPerMarks" runat="server" class="form-control" placeholder="% of Marks" MaxLength="3" ValidationGroup="ResumeCreation"&gt;&lt;/asp:TextBox&gt;
                                      &lt;asp:RequiredFieldValidator ID="rfvRCPercentage" runat="server" ControlToValidate="txtPerMarks" ErrorMessage="Please enter the Marks Percentage" ForeColor="Red"&gt;&lt;/asp:RequiredFieldValidator&gt;
                                      &lt;asp:RegularExpressionValidator ID="regEXRCPercentage" runat="server" ControlToValidate="txtPerMarks" ValidationExpression="(100)|(0*\d{1,2})" ErrorMessage="Please enter the numbers only" ForeColor="Red"&gt;&lt;/asp:RegularExpressionValidator&gt;
                                   &lt;/div&gt;
                                &lt;/div&gt;
                             &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-6 col-m-6"&gt;
                             &lt;div class="GraduationDetailsImgPortion"&gt;
                                &lt;img src="Images/Graduation.gif" alt="Graduation" id="GraduationDetailsImg" /&gt;
                             &lt;/div&gt;
                          &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="btn-group"&gt;
                 &lt;asp:Button ID="btnCreateResume" runat="server" Text="Create" CssClass="btn-primary btn-md" OnClick="btnCreateResume_Click" /&gt;
                 &lt;asp:Button ID="btnCancelResume" runat="server" Text="Cancel" CssClass="btn-primary btn-md" OnClick="btnCancelResume_Click1" CausesValidation="false" /&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/form&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My web is looking as expected in the higher screen resolution</p>
  
  <p><a href="https://i.stack.imgur.com/emMZY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/emMZY.jpg" alt="enter image description here"></a></p>
  
  <p>but its design is miss aligned in lower screen resolution</p>
  
  <p><a href="https://i.stack.imgur.com/L0Y6K.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L0Y6K.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/wwHLZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wwHLZ.jpg" alt="enter image description here"></a></p>
  
  <p>How to convert my web page to responsive web page.Could anyone help me to understand the concept of creating the responsive webpage.</p>