Currently, I am working on a responsive web page that features a form. However, I have noticed that all the input elements are spilling out of the form both from the left and right sides. Can someone please shed some light on why this could be happening?
This is the code I am using...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Temporary Testing Pages</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/bootstrap.css">
<style>
.custFrmOnlyBkCol { background-color: lightgray; }
</style>
</head>
<body>
<div class="jumbotron">
<div class="col-md-12>
<form action="#" class="custFrmOnlyBkCol">
<!-- In Css : .custFrmOnlyBkCol { background-color: lightgray; } -->
<div class="form-group row">
<label class="col-3 text-right">Id</label>
<div>
<p>101</p>
</div>
</div>
<div class="form-group row">
<label class="col-3 text-right" for="">First Name</label>
<input type="text" class="form-control col-md-9">
</div>
<div class="form-group row">
<label class="col-3 text-right" for="">Last Name</label>
<input type="text" class="form-control col-md-9">
</div>
<input class="form-control offset-md-3 col-md-6 btn btn-primary" type="submit" value="Submit">>
</form>
</div>
</div>
</body>
</html>