Jquery is not working! Class Jumotron does not work

Aakash 20

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Admin_Login.aspx.cs" Inherits="TMS_Project.admin.Admin_Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Admin Login</title>
    <link href="../assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../dist/sweetalert2.min.css" rel="stylesheet" />
    <script src="../dist/sweetalert2.min.js"></script>
</head>
<body style="background-color:whitesmoke">
    <form id="form1" runat="server">
        <div class="container">
            
            <div class="row">

                <div class="col-md-4 mx-auto" style="box-shadow: -2px 2px 29px 1px rgba(0,0,0,0.75); -webkit-box-shadow: -2px 2px 29px 1px rgba(0,0,0,0.75); -moz-box-shadow: -2px 2px 29px 1px rgba(0,0,0,0.75);">
                    <div class="jumbotron text-center text-white bg-primary">   
                        <h2>Admin Login</h2>
                    </div>
                    <asp:TextBox ID="UsernameTxt" placeholder="Enter Username" CssClass="form-control" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="UsernameTxt" ForeColor="Red" SetFocusOnError="true" Display="Dynamic" runat="server" ErrorMessage="Username is required"></asp:RequiredFieldValidator>
                    <br />  
                    <asp:TextBox ID="PasswordTxt" TextMode="Password" placeholder="Enter Password" CssClass="form-control" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="PasswordTxt" ForeColor="Red" SetFocusOnError="true" Display="Dynamic" runat="server" ErrorMessage="Password is required"></asp:RequiredFieldValidator>
                    <br />
                    <asp:Button ID="LoginBtn" OnClick="LoginBtn_Click" runat="server" Text="Login" CssClass="btn btn-primary btn-block" />
                    <br />
                </div>

            </div>
        </div>
    </form>
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

SurferOnWww 2,171 Reputation points

2024-01-27T01:46:00.4333333+00:00

The word "does not work" does not provide the readers of this page with meaningful information to help you to solve your issue. Can you describe your expectation and actual result in details?
Albert Kallal 5,146 Reputation points

2024-01-27T18:20:26.2833333+00:00

That jumbotron is bootstrap. However, bootstrap does require jQuery. In your references I don't see a jQuery reference (I see bootstrap and sweet alert -- but both of those ALSO requires jQuery, and thus you should not only add jQuery, but place jQuery reference before your bootstrap and sweet alert script references. So, jQuery is required for bootstrap to work. So, try adding a jQuery to your above script references.

Accepted answer

Lan Huang-MSFT 27,721 Microsoft Vendor

Hi @Aakash,

To use Bootstrap Jumbotron, you just need to use the Bootstrap.css file.

It's not clear from your code which version of Bootstrap you are using, probably because it is older.

You can try the following code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Admin Login</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"/>
 </head>
<body style="background-color:whitesmoke">
    <form id="form1" runat="server">
        <div class="container">
            
            <div class="row">

                <div class="col-md-4 mx-auto" style="box-shadow: -2px 2px 29px 1px rgba(0,0,0,0.75); -webkit-box-shadow: -2px 2px 29px 1px rgba(0,0,0,0.75); -moz-box-shadow: -2px 2px 29px 1px rgba(0,0,0,0.75);">
                    <div class="jumbotron text-center text-white bg-primary">   
                        <h2>Admin Login</h2>
                    </div>
                    <asp:TextBox ID="UsernameTxt" placeholder="Enter Username" CssClass="form-control" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="UsernameTxt" ForeColor="Red" SetFocusOnError="true" Display="Dynamic" runat="server" ErrorMessage="Username is required"></asp:RequiredFieldValidator>
                    <br />  
                    <asp:TextBox ID="PasswordTxt" TextMode="Password" placeholder="Enter Password" CssClass="form-control" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="PasswordTxt" ForeColor="Red" SetFocusOnError="true" Display="Dynamic" runat="server" ErrorMessage="Password is required"></asp:RequiredFieldValidator>
                    <br />
                    <asp:Button ID="LoginBtn"  runat="server" Text="Login" CssClass="btn btn-primary btn-block" />
                    <br />
                </div>

            </div>
        </div>
    </form>
  
</body>
</html>

User's image

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

1 additional answer

Bruce (SqlWork.com) 59,046 Reputation points

2024-01-27T18:15:10.09+00:00

The Jumbotron is ccs only and does not use any JavaScript or jquery.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

Jquery is not working! Class Jumotron does not work

1 additional answer