What is meant by bootstrapping a page? Converting aspx to bootstrap? - css

Question

I have the task of modifying some already developed web app's aspx pages. Those pages Needs to be converted to use the new Bootstrap layout. So what is meant by bootstrapping page? one of the pages is below. Please give me some idea.
<%# Page Language="VB" MasterPageFile="~/MasterExternal.master" AutoEventWireup="false" CodeFile="OptIt.aspx.vb" Inherits="OptIt" %>
<%# MasterType VirtualPath="~/MasterExternal.master" %>
<asp:Content ID="c2" ContentPlaceHolderID="cpStyle" Runat="Server">
<style type="text/css">
#middleContentContentParent {position:relative;left:50px;width:900px;}
.dtText {font-size:22px;height:35px;line-height:35px;width:50px}
input[type=text] {padding:0;}
</style>
</asp:Content>
<asp:Content ID="c3" ContentPlaceHolderID="cp3" Runat="Server">
<form runat="server" id="aspnet">
<div style="position:relative;width:860px;height:450px;margin:0 20px 0 20px">
<h1>Opt-In to TXT Messaging</h1>
<hr />
<div style="text-align:left;" >
<div runat="server" id="divFields">
<p>
Enter your cell phone noted in the email you just received to receive your TXT confirmation. Then follow the directions in the TXT message.
</p>
<br />
<div style="width:360px;margin:0 auto;text-align:center">
<asp:ValidationSummary class="valSummaryLg" ID="valSummary" runat="server" />
<h4>Mobile Number</h4>
<p style="text-align:left">
(<input runat="server" type="text" size="3" class="dtText" maxlength="3" id="CellPhone1_1" value="" /> ) <input class="dtText" runat="server" type="text" maxlength="3" size="3" id="CellPhone1_2" value="" /> - <input runat="server" type="text" maxlength="4" size="4" id="CellPhone1_3" class="dtText" value="" />
<asp:CustomValidator runat="server" ID="valPhone" Text="*"></asp:CustomValidator>
<br />
<br />
<asp:Button runat="server" CssClass="button1Lg" ID="btnSubmit" Text="Submit" />
</p>
</div>
</div>
<div runat="server" id="lblMessage" visible="false">
<br /><br />
<h2>Almost done... </h2>
<p>
Follow the instructions in the TXT you just received. If you don't receive a TXT confirmation message, please see the "Commons Problems" below.
</p>
<br /><br />
<h4>Common Problems with TXTing (using SHORT CODES):</h4>
<p>
FFPS uses a 5 digit "short code" to send TXT messages. Short codes are used for businesses to ensure the sender is respecting the recipient's TXTing preferences. Some carriers (like Sprint) require individuals to call and UNBLOCK SHORT CODES. Some of the common problems with receiving FFPS TXT messages include:
</p>
<div style="margin:0 0 0 20px">
<h5>You are using Wal-Mart Family Mobile</h5>
<p><b>How to Fix:</b> Sorry, Wal-Mart does not support TXTing with Short Codes</p>
<h5>You are using Sprint and they have blocked Short Codes</h5>
<p><b>How to Fix:</b> Call Sprint and request to "Unblock Short Codes"</p>
</div>
</div>
</div>
</div>
</form>
</asp:Content>

Answer 1

This is an answer for my own question. I have changed this to use bootstrap. I have added row classes for every row. Please have a look and give some ideas.
<%# Page Language="VB" MasterPageFile="~/MasterExternal.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Scholarship_Default" %>
<%# MasterType VirtualPath="~/MasterExternal.master" %>
<asp:Content ID="c2" ContentPlaceHolderID="cpStyle" Runat="Server">
<%--<style type="text/css">
#middleContentContentParent {position:relative;left:50px;width:860px;}
#divDownloadForms img {vertical-align:middle}
</style>--%>
</asp:Content>
<asp:Content ID="c3" ContentPlaceHolderID="cp2" Runat="Server">
<%--<div style="position:relative;width:820px;height:400px;margin:0 auto;">--%>
<div>
<div class="row">
<h1>Scholarship Form</h1>
</div>
<div class="row">
<h2>Instructions</h2>
</div>
<div class="row">
In order to apply for a scholarship, you will need to complete the Scholarship/Signup forms. Please mail the 4 page form by the deadline stated below (otherwise, may cause delays or prevent placement). Detailed instructions and the mailing address are found on the form (link below).<br />
</div>
<div class="row">
<h2>Form Deadline</h2>
</div>
<div id="divDownloadForms">
<div class="row">
For
<b><asp:Label runat="server" ID="lblSeason"></asp:Label></b>,
FFPS must receive your scholarship form by <b><asp:Label runat="server" ID="lblDate"></asp:Label></b>.
</div>
<div class="row">
<h5>Download the Scholarship/Signup Form - High Resolution (pdf)</h5>
</div>
<div class="row">
<img src="../images/icons/attach.gif" alt="" /> Download File
</div>
</div>
</div>
</asp:Content>

Answer 2

Sham, If you can show the existing design, then I can help you. You need to add column grid in between row's for suitably viewing in all view-ports.