I am trying to customize the background color of a form-group element. To illustrate my point, take a look at the image below In the image above, I have highlighted the div in question and I want to change its background color from within the form-group.
Here is the CSS code I attempted:
.signup-ctrl {
//margin-top: 60px;
.form-buffer {
margin: 30px 0px;
background-color: #006dcc;
}
}
And here is the corresponding HTML:
<div class="col-md-5 portfolio-item">
<form>
<div class="form-group form-buffer">
<input type="text" class="form-control" name="name" placeholder="Enter your name">
</div>
<div class="form-group form-buffer">
<input type="email" class="form-control" name="email" placeholder="Enter your email">
</div>
<div class="form-group form-buffer">
<input type="email" class="form-control" name="emailconfirm" placeholder="Enter email confirmation">
</div>
<div class="form-group form-buffer">
<input type="password" class="form-control" name="password" placeholder="Enter your Password">
</div>
<div class="form-group form-buffer">
<input type="text" class="form-control" name="captcha" placeholder="Enter numbers from image">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
Despite my efforts, the styling does not seem to be applied correctly. Any ideas where I went wrong?