Bootstrap Form Input Fields look odd-CodePudding

I have been creating a multistep form with three tabs. And i am having problems with the bootstrap styling of the input fields.

This is what it currently looks like (https://imgur.com/a/dGk2b7v): As you can see, the input fields are not what you would get in bootstrap. When you input into them it makes the box bigger (shown in Site Name).

Below is the code that i have tried. And is reproducible.

Here is my GitHub where you can also see the code. (not promoting, just there to show all of the code).

.top-bar{

    width:100%;
    height:40px;
    background-color: #006bff;
    padding-bottom: 10px;
}
li{
    display: inline-block;
    padding: 10px;
}
.phone,.logout{
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
}
.phone:hover,.logout:hover{
    color: #F0C330;
    transition:0.5s;
}
body{
    background-color: #A6C7F0!important;
}
.logo{
    padding:20px;
}
.container{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.container form{    
    background-color: #EEF1F4 !important;            /*Change Size of Box*/
    width: 900px;
    padding: 20px;
    margin: 50px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} 
.box{
    width: 800px;
}
.container table {
    background-color: #EEF1F4 !important;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.link-right{
    display: flex;
    justify-content: flex-end;
}
.suggestions{
    width:98.5%;
    height:125px;
    position: relative;
    bottom:17px;
}
.container h1{
    color: #0B2D58;
    text-transform: uppercase;
    font-weight: 500;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="...">
    <title><?= $data['title'] ?? '' ?></title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="css/header.css" rel="stylesheet">
  </head>


<body>
    <div >
        <!-- Form Start -->
        <form  id="surveyForm" action="<?= $data['action'] ?>" method="post">

            <!-- One "tab" for each step in the form: -->
            <!-- Tab 1 Start -->
                <h1>Contact & Site Details</h1>
                <!-- Row 1 Start -->
                <div >
                    <div >
                        <label for="site_name" >Site Name*</label>
                        <input type="text"  id="site_name" name="site_name"  placeholder="Enter Site Name" oninput="this.className = ''" required><br>
                    </div>

                    <div >
                        <label for="poNum" >PO Number*</label>
                        <input type="text"  id="poNum" name="poNum"  placeholder="Enter PO Number" oninput="this.className = ''" required><br>
                    </div>

                    <div >
                        <label for="customer_name" >Contact Name*</label>
                        <input type="text"  id="customer_name" name="customer_name"  placeholder="Enter Contact Name" oninput="this.className = ''" required>
                    </div>

                    <div >
                        <label for="customer_email" >Email Address*</label>
                        <input type="email"  id="customer_email" name="customer_email"  placeholder="Enter Email" oninput="this.className = ''" required><br>
                    </div>

                    <div >
                        <label for="customer_mobile" >Contact Number*</label>
                        <input type="tel"  id="customer_mobile" name="customer_mobile"  placeholder="Enter Contact Number" oninput="this.className = ''" required> <br>
                    </div>

                    <div >
                        <label for="street1" >Address*</label>
                        <input type="text"  id="street1" name="street1"  placeholder="Address" oninput="this.className = ''" required>
                    </div>

                    <div >
                        <label for="city" >City/Town*</label>
                        <input type="text"  id="city" name="city" placeholder="City/Town" oninput="this.className = ''" required>
                    </div>

                    <div >
                        <label for="county" >County*</label>
                        <input type="text"  id="county" name="county"  oninput="this.className = ''" placeholder="County">
                    </div>

                    <div >
                        <label for="postcode" >Postcode*</label>
                        <input type="text"  id="postcode" name="postcode"  placeholder="Postcode" oninput="this.className = ''" required> <br>
                    </div>
                </div>
                <!-- Row 1 End -->
            
        </form> <!--Form End -->
    </div>
</body>

</html>

CodePudding user response：

The issue is happening because you are clearing all bootstrap classes on input on all fields.

oninput="this.className = ''" - Remove this from all inputs, and your form will look as it is supposed to.

But, why do you have that in the first place, what is the objective?