>>>>Hi,
>>>>
>>>>As I am testing my ASP.NET web forms application designed for mobile devices, on an actual Samsung tablet, I see something that may need to be improved (good thing is that as far as data flow, so far, everything works).
>>>>
>>>>The Login page is responsive as far as when I rotate the tablet the top logo and the menu disappear and appear, as they are supposed to work. But in either case, the text boxes for User ID and Password remain the same, in terms of the size (height and width). Even though I can type the user ID and password, it would be nicer if the sizes of the text boxes were larger.
>>>>
>>>>My question is, should I simply make the sizes of the text boxes larger at design time? Or is there a way to make the font and the size of the text box larger at run-time, using Bootstrap?
>>>
>>>Your text boxes shouldn't really have a size but be sized to their container in the grid. Might help if you posted you HTML ?
>>
>>Here is the HTML for the logon page:
>>
>>

>>    <div class="container">
>>        <br />
>>        <br />
>>        <div class="row">
>>            <div class="col-sm-6 col-sm-offset-3">
>>
>>                <section id="loginForm">
>>
>>                    <div class="form-group text-center">
>>                        <span>Please enter your employee ID and password below.</span>
>>                    </div>
>>                    <br />
>>                    <div class="col-sm-6 col-sm-offset-3">
>>                        <div class="login form-group">
>>                            <div class="input-group">
>>                                <span class="input-group-addon"><i class="fa fa-user"></i></span>
>>                                <asp:TextBox ID="txtUserName" MaxLength="10" Width="120" Runat="server" CssClass="login form-control" placeholder="Employee ID" ></asp:TextBox>
>>                            </div>
>>                        </div>
>>
>>                        <div class="login form-group">
>>                            <div class="input-group">
>>                                <span class="input-group-addon"><i class="fa fa-key"></i></span>
>>                                <asp:TextBox ID="txtPassword" MaxLength="10" Width="120" TextMode="Password" CssClass="login form-control" Runat="server" placeholder="Password"></asp:TextBox>
>>                            </div>
>>                        </div>
>>
>>                        <div class="form-group text-center">
>>                            <asp:label ID="lblUserNotFound" runat="server" BorderColor="White" ForeColor="Red"></asp:label>
>>                        </div>
>>
>>                        <div class="form-group text-center">
>>                            <asp:Button Text="Log in" type="submit" Runat="server" ID="LogIn" onclick="LogIn_Click" CssClass="btn btn-default"></asp:Button>
>>                        </div>
>>                    </div>
>>
>>                </section>
>>            </div>
>>        </div>
>>    </div>
>>

Will this give you what you want (can be tweaked):Change the first 'div' after 'row' to be:

<div class="col-xs-10 col-xs-offset-1" style="max-width:500px">

Don't set any col classes on the inner div. Don't set width attribute on any of the input boxes.

Thank you. I will try your suggestions.