Css Issue

Question

User-797751191 posted

Hi

   I have below code and i want Address to be in next row

<div class="form-group col-md-4 has-error">
                                                <label>Name</label>
                                                <asp:TextBox ID="txtName" runat="server" class="form-control"></asp:TextBox>
                                            </div>
                                            <div class="form-group col-md-4 has-error">
                                                <label>Designation</label>
                                                <asp:TextBox ID="txtAddress" runat="server" class="form-control"></asp:TextBox>
                                            </div>

                                            <div class="form-group col-md-4 has-error">
                                                <label>Address</label>
                                                <asp:TextBox ID="txtAddress" runat="server" class="form-control" ></asp:TextBox>
                                            </div>

Thanks

Answer 1

User-1038772411 posted

Hi, jsshivalik

Without your output Snap no one can completely help you to solve your problem means its hard to assume, as of now as per your question and see code structure just You can use HTML "<br>" Break line tag above address DIV.

Or,

you can use bootstrap using container row and col-12 class for above two div. after below that user new "Row" and "col-12" for address so u can see address DIV below TextName and TextDesignation textboxes.

Thanks.

Answer 2

User288213138 posted

Hi jsshivalik,

You can put the address into another <div class="row">.

Here is a demo you can use as a reference.

The code:

<div class="row">
            <div class="form-group col-md-4 has-error">
                <label>Name</label>
                <asp:TextBox ID="txtName" runat="server" class="form-control"></asp:TextBox>
            </div>
            <div class="form-group col-md-4 has-error">
                <label>Designation</label>
                <asp:TextBox ID="txtAddress" runat="server" class="form-control"></asp:TextBox>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-4 has-error">
                <label>Address</label>
                <asp:TextBox ID="TextBox1" runat="server" class="form-control"></asp:TextBox>
            </div>
        </div>

The result:

Best regards,

Sam

Answer 3

User-474980206 posted

the bootstrap grid row has 12 columns. your form-group are all 4 columns. you could make address over 3 cols to force new line. you could add row markup around the first two, lots of options. you should learn the bootstrap grid.