My Form elements seem to be misaligned and not fitting correctly.
.h-100is used for the blue navigation background to occupy the full height of the screen.- An answer explaining why my code snippet is not working would be appreciated.
HTML
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.blue {
background-color:blue;
}
html,body {
height: 100%;
}
Screenshot