While working on a multistep form with three tabs, I encountered issues with the bootstrap styling of the input fields.
The current appearance can be seen here: (https://i.sstatic.net/1NT6e.jpg): https://i.sstatic.net/FtHRG.png
Clearly, the input fields are not rendering as expected in bootstrap. Inputting text into them causes the box to expand (as shown in the Site Name field).
I have attempted to modify the code, which is reproducible.
For those interested, my GitHub repository contains the full code for reference. (Not intended as promotion, just for code visibility).
.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 class="container">
<!-- Form Start -->
<form class="row g-3" 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 class="row">
<div class="col-md-7">
<label for="site_name" class="form-label">Site Name*</label>
<input type="text" class="form-control" id="site_name" name="site_name" placeholder="Enter Site Name" oninput="this.className = ''" required><br>
</div>
<div class="col-md-5">
<label for="poNum" class="form-label">PO Number*</label>
<input type="text" class="form-control" id="poNum" name="poNum" placeholder="Enter PO Number" oninput="this.className = ''" required><br>
</div>
<div class="col-md-5">
<label for="customer_name" class="form-label">Contact Name*</label>
<input type="text" class="form-control" id="customer_name" name="customer_name" placeholder="Enter Contact Name" oninput="this.className = ''" required>
</div>
<div class="col-md-7">
<label for="customer_email" class="form-label">Email Address*</label>
<input type="email" class="form-control" id="customer_email" name="customer_email" placeholder="Enter Email" oninput="this.className = ''" required><br>
</div>
<div class="col-4">
<label for="customer_mobile" class="form-label">Contact Number*</label>
<input type="tel" class="form-control" id="customer_mobile" name="customer_mobile" placeholder="Enter Contact Number" oninput="this.className = ''" required> <br>
</div>
<div class="col-8">
<label for="street1" class="form-label">Address*</label>
<input type="text" class="form-control" id="street1" name="street1" placeholder="Address" oninput="this.className = ''" required>
</div>
<div class="col-md-5">
<label for="city" class="form-label">City/Town*</label>
<input type="text" class="form-control" id="city" name="city" placeholder="City/Town" oninput="this.className = ''" required>
</div>
<div class="col-md-5">
<label for="county" class="form-label">County*</label>
<input type="text" class="form-control" id="county" name="county" oninput="this.className = ''" placeholder="County">
</div>
<div class="col-md-2">
<label for="postcode" class="form-label">Postcode*</label>
<input type="text" class="form-control" id="postcode" name="postcode" placeholder="Postcode" oninput="this.className = ''" required> <br>
</div>
</div>
<!-- Row 1 End -->
</form> <!--Form End -->
</div>
</body>
</html>