Inline CSS is not working with Bootstrap classes

Question

I am a beginner and I am working on a webpage. My idea for the webpage is, If I click on the login button, the #login-box will disappear and another one (.dashboard) will appear. I have added display: none to the .dashboard class to become hide at first. Then I did some JavaScript code to hide the #login-box and add display: block to .dashboard class if I click on the login button.

My Codes:

const loginBoxEl = document.getElementById("login-box");
const loginBtnEl = document.getElementById("login-btn");
const dashboardEl = document.getElementById("dashboard");

loginBtnEl.addEventListener("click", function() {
    loginBoxEl.style.display = "none";
    dashboardEl.style.display = "block";
});

#login-box {
    height: 100vh;
}

#login-area {
    border-radius: 8px;
    box-shadow: 5px 5px 10px lightgray;
}

#dashboard {
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payoneer Bank Account | Dabananda Mitra</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <!-- Login Box -->
    <div class="d-flex justify-content-center align-items-center" id="login-box">
        <div class="p-5" id="login-area">
            <h1 class="bank-title">Welcome to Payoneer</h1>
            <input class="form-control my-3" type="email" placeholder="E-mail" required>
            <input class="form-control my-3" type="password" placeholder="Password" required>
            <button class="btn btn-success" type="submit" id="login-btn">Log in</button>
        </div>
    </div>

    <!-- Dashboard -->
    <div id="dashboard">
        <h1>Dashboard</h1>
    </div>

    <!-- Bootstrap JavaScript CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <!-- Custom JavaScript -->
    <script src="./main.js"></script>
</body>
</html>

When I am clicking on the login button the .dashboard class is becoming display: block but the #login-box is not disappearing through the display: none is adding as inline CSS.

How can I solve the problem?

Because, for some reason, bootstrap adds `!important` to the `display` property: `.d-flex { display: flex!important; }` — Roberto Zvjerković, Aug 11 '21 at 12:53
Then what is the solution? How can I add `display: none !important` with JavaScript or is there any better way? — , Aug 11 '21 at 13:02
https://stackoverflow.com/questions/462537/overriding-important-style — Roberto Zvjerković, Aug 11 '21 at 13:21

score 0 · Accepted Answer · answered Aug 11 '21 at 13:02

const loginBoxEl = document.getElementById("login-box");
    const loginBtnEl = document.getElementById("login-btn");
    const dashboardEl = document.getElementById("dashboard");

    loginBtnEl.addEventListener("click", function() {
    loginBoxEl.classList.add("hide_login");;
    dashboardEl.style.display = "block";
    });

#login-box {
    height: 100vh;
}

#login-area {
    border-radius: 8px;
    box-shadow: 5px 5px 10px lightgray;
}

#dashboard {
    display: none;
}
.hide_login{
  display: none!important;
}

<div class="d-flex justify-content-center align-items-center" id="login-box">
  <div class="p-5" id="login-area">
      <h1 class="bank-title">Welcome to Payoneer</h1>
      <input class="form-control my-3" type="email" placeholder="E-mail" required>
      <input class="form-control my-3" type="password" placeholder="Password" required>
      <button class="btn btn-success" type="submit" id="login-btn">Log in</button>
  </div>
</div>

<!-- Dashboard -->
<div id="dashboard">
  <h1>Dashboard</h1>
</div>

Your answer is too simple and easy to understand. Thank a lot. — , Aug 11 '21 at 13:44

score 0 · Answer 2 · answered Aug 11 '21 at 13:30

Please check this one, I have used jQuery and changed the click event accordingly.

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#login-btn",function() {
        $('#login-box').removeClass('d-flex');
        $('#login-box').css('display','none');
        $('#dashboard').css('display','block');
    });
    
});

#login-box {
    height: 100vh;
}

#login-area {
    border-radius: 8px;
    box-shadow: 5px 5px 10px lightgray;
}

#dashboard {
    display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payoneer Bank Account | Dabananda Mitra</title>
    <!-- Bootstrap CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Custom CSS -->
</head>
<body>
    <!-- Login Box -->
    <div class="d-flex justify-content-center align-items-center" id="login-box">
        <div class="p-5" id="login-area">
            <h1 class="bank-title">Welcome to Payoneer</h1>
            <input class="form-control my-3" type="email" placeholder="E-mail" required>
            <input class="form-control my-3" type="password" placeholder="Password" required>
            <button class="btn btn-success" type="submit" id="login-btn">Log in</button>
        </div>
    </div>

    <!-- Dashboard -->
    <div id="dashboard">
        <h1>Dashboard</h1>
    </div>

    <!-- Bootstrap JavaScript CDN -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>
</html>

Inline CSS is not working with Bootstrap classes

2 Answers2