Display multiple TextBox in a single row using Bootstrap class in ASP.Net

Last Reply on Apr 14, 2017 11:05 PM By YacharuP

Posted on Apr 14, 2017 12:28 AM

As I have tried this code butb couldn't place the text box in same row and i have six fields...I am new in designing bootstrap 

<div class="col-sm-12">
    <div class="form-group">
        <div class="col-sm-2">
            <div class="col-lg-6 col-md-2 control-label">
                <asp:Label ID="Label7" runat="server" Text="Shade"></asp:Label>
            </div>
            <div class="col-lg-9 col-md-2">
                <asp:TextBox ID="txtval6" runat="server" Width="50px"></asp:TextBox>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="col-lg-6 col-md-2 control-label">
                <asp:Label ID="Label8" runat="server" Text="Item"></asp:Label>
            </div>
            <div class="col-lg-9 col-md-2">
                <asp:TextBox ID="txtval7" runat="server" Width="150px"></asp:TextBox>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="col-lg-6 col-md-6 control-label">
                <asp:Label ID="Label9" runat="server" Text="Lot"></asp:Label>
            </div>
            <div class="col-lg-9 col-md-8">
                <asp:TextBox ID="txtval8" runat="server" Width="50px"></asp:TextBox>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="col-lg-6 col-md-6 control-label">
                <asp:Label ID="Label10" runat="server" Text="Cones"></asp:Label>
            </div>
            <div class="col-lg-9 col-md-8">
                <asp:TextBox ID="txtval9" runat="server" Width="100px"></asp:TextBox>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="col-lg-6 col-md-8 control-label">
                <asp:Label ID="Label11" runat="server" Text="Gross Weight"></asp:Label>
            </div>
            <div class="col-lg-9 col-md-8">
                <asp:TextBox ID="txtval10" runat="server" Width="50px"></asp:TextBox>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="col-lg-6 col-md-6 control-label">
                <asp:Label ID="Label12" runat="server" Text="Net Weight"></asp:Label>
            </div>
            <div class="col-lg-9 col-md-8">
                <asp:TextBox ID="txtval11" runat="server" Width="50px"></asp:TextBox>
            </div>
        </div>
    </div>
</div>
Posted on Apr 14, 2017 12:28 AM
Hi @sujayanand,
Please try the following

Validate TextBox in GridView if RadioButton inside same Row is checked using JavaScript in ASP.Net

It might help you.

Cheers Andrea.

Posted on Apr 14, 2017 12:53 AM

No I want the text box to be aligned straight as all in irregular format.


Posted on Apr 14, 2017 12:55 AM

 

HERE THE IMAGE


Posted on Apr 14, 2017 11:05 PM Modified on on Apr 14, 2017 11:20 PM

Hi @sujayanand,

 Try with this code.

<div class="row">
    <div class="col-md-2">
        <div class="col-lg-9 col-md-3 control-label">
            <asp:Label ID="Label7" runat="server" Text="Shade"></asp:Label>
        </div>
        <div class="col-lg-9 col-md-8">
            <asp:TextBox ID="txtval6" runat="server" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
    <div class="col-md-2">
        <div class="col-lg-9 col-md-3 control-label">
            <asp:Label ID="Label8" runat="server" Text="Item"></asp:Label>
        </div>
        <div class="col-lg-9 col-md-8">
            <asp:TextBox ID="txtval7" runat="server" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
    <div class="col-md-2">
        <div class="col-lg-9 col-md-3 control-label">
            <asp:Label ID="Label9" runat="server" Text="Lot"></asp:Label>
        </div>
        <div class="col-lg-9 col-md-8">
            <asp:TextBox ID="txtval8" runat="server" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
    <div class="col-md-2">
        <div class="col-lg-9 col-md-3 control-label">
            <asp:Label ID="Label10" runat="server" Text="Cones"></asp:Label>
        </div>
        <div class="col-lg-9 col-md-8">
            <asp:TextBox ID="txtval9" runat="server" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
    <div class="col-md-2">
        <div class="col-lg-9 col-md-4 control-label">
            <asp:Label ID="Label11" runat="server" Text="Gross Weight"></asp:Label>
        </div>
        <div class="col-lg-9 col-md-8">
            <asp:TextBox ID="txtval10" runat="server" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
    <div class="col-md-2">
        <div class="col-lg-9 col-md-4 control-label">
            <asp:Label ID="Label12" runat="server" Text="Net Weight"></asp:Label>
        </div>
        <div class="col-lg-9 col-md-8">
            <asp:TextBox ID="txtval11" runat="server" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
</div>