locked
Need an example RRS feed

Answers

  • User839733648 posted

    Hi wmec,

    Is it possible to insert

    Yes, you could. Just adding the class to the above.

    I've made a sample to simulate a table and maybe you could refer to it.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <div class="well well-lg">
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="form-group">
                                        <asp:Label ID="Label1" runat="server" Text="Label:"></asp:Label>
                                        <asp:TextBox ID="TextBox1" runat="server" CssClass="form-control"></asp:TextBox>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="Label2" runat="server" Text="DropDownList:"></asp:Label>
                                    <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control">
                                        <asp:ListItem>111</asp:ListItem>
                                        <asp:ListItem>222</asp:ListItem>
                                        <asp:ListItem>333</asp:ListItem>
                                    </asp:DropDownList>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <asp:Label ID="Label3" runat="server" Text="TextArea"></asp:Label>
                    <textarea id="TextArea1" cols="20" rows="2" class="form-control"></textarea><br />
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <asp:Label ID="Label5" runat="server" Text="Label:"></asp:Label>
                                    <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>upload:<asp:FileUpload ID="FileUpload1" runat="server" /><br />
                                    <asp:Button ID="Button1" runat="server" Text="Button" CssClass="btn btn-primary" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <asp:Image ID="Image1" runat="server" ImageUrl="Images/test.JPG" />
                    <asp:Image ID="Image2" runat="server" ImageUrl="Images/test.JPG" />
                    <asp:Image ID="Image3" runat="server" ImageUrl="Images/test.JPG" />
                    <asp:Image ID="Image4" runat="server" ImageUrl="Images/test.JPG" />
                </div>
            </div>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 22, 2018 2:11 AM

All replies

  • User839733648 posted

    Hi wmec,

    It seems that the image you've provided is not so clear. And I could not fully understand your requirement.

    It seems like a login form. If you want to create a login form, you could refer to the following link:

    https://www.w3schools.com/howto/howto_css_login_form.asp 

    https://getbootstrap.com/docs/4.1/components/forms/

    Best Regards,

    Jenifer

    Monday, October 15, 2018 2:31 AM
  • User364663285 posted

    Dear,
    I need an example showing one area with the boundaries (as shown to screenshot below).
    https://1drv.ms/u/s!Ai8CrEskdewXm0O31KGFa0dr1Y2F

    Monday, October 15, 2018 6:47 AM
  • User839733648 posted

    Hi wmec,

    I suggest that you could use the well class in Bootstrap.

    More details about this, you could refer to the link: https://www.w3schools.com/bootstrap/bootstrap_wells.asp 

    Besides, I've made an easy sample on my side.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="well well-lg">
                <div class="text-center">
                    username:<input type="text" id="username" /><br /><br />
                    password:<input type="text" id="password" /><br /><br />
                    <input type="button" value="Login" />
                    <input type="button" value="Register" />
                    <!-- https://www.w3schools.com/bootstrap/bootstrap_wells.asp -->
                </div>
            </div>
        </div>
    </body>
    </html>

    Result:

    Best Regards,

    Jenifer

    Monday, October 15, 2018 8:46 AM
  • User364663285 posted

    Dear,
    Is it possible to insert

        <div class="container">
            <div class="well well-lg">
    

    on top of these codes?

        <table>
            <tr>
                <td>
                    <asp:Label ID="Label24"
                    ...
    

    Saturday, October 20, 2018 4:46 AM
  • User839733648 posted

    Hi wmec,

    Is it possible to insert

    Yes, you could. Just adding the class to the above.

    I've made a sample to simulate a table and maybe you could refer to it.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container">
                <div class="well well-lg">
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="form-group">
                                        <asp:Label ID="Label1" runat="server" Text="Label:"></asp:Label>
                                        <asp:TextBox ID="TextBox1" runat="server" CssClass="form-control"></asp:TextBox>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="Label2" runat="server" Text="DropDownList:"></asp:Label>
                                    <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control">
                                        <asp:ListItem>111</asp:ListItem>
                                        <asp:ListItem>222</asp:ListItem>
                                        <asp:ListItem>333</asp:ListItem>
                                    </asp:DropDownList>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <asp:Label ID="Label3" runat="server" Text="TextArea"></asp:Label>
                    <textarea id="TextArea1" cols="20" rows="2" class="form-control"></textarea><br />
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <asp:Label ID="Label5" runat="server" Text="Label:"></asp:Label>
                                    <asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>upload:<asp:FileUpload ID="FileUpload1" runat="server" /><br />
                                    <asp:Button ID="Button1" runat="server" Text="Button" CssClass="btn btn-primary" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <asp:Image ID="Image1" runat="server" ImageUrl="Images/test.JPG" />
                    <asp:Image ID="Image2" runat="server" ImageUrl="Images/test.JPG" />
                    <asp:Image ID="Image3" runat="server" ImageUrl="Images/test.JPG" />
                    <asp:Image ID="Image4" runat="server" ImageUrl="Images/test.JPG" />
                </div>
            </div>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 22, 2018 2:11 AM
  • User364663285 posted

    I put

            <div class="container">
                <div class="well well-lg">
    

    but I do not see the effect.

    Monday, October 22, 2018 5:10 AM
  • User839733648 posted

    Hi wmec,

    I've checked your page source code.

    It seems that you do not add the reference of Bootstrap css code: 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    Best Regards,

    Jenifer

    Monday, October 22, 2018 7:12 AM
  • User364663285 posted

    How to adjust background color of the area?

    Monday, October 22, 2018 8:57 AM
  • User839733648 posted

    Hi wmec,

    If you want to change the color of the area, you could customize color in the style like below.

        <style>
            .well {
                background-color: rgb(22, 105, 173);
            }
        </style>

    result:

    Best Regards,

    Jenifer

    Tuesday, October 23, 2018 6:00 AM
  • User364663285 posted

    I put your code but it is not taking effect below
    http://www.searchhouselive.com/RegRec2/?id=18&user_abbr=mc2&readonly=n

    Tuesday, October 23, 2018 7:58 AM