bootstrap adding color to a column - html

Question

So I have this issues with bootstrap I have a row with 3 column:
col-md-4
col-md-8
col-md-2
All the information that I want to display are in col-md-8. I want to add a background color behind it but not to the whole column just the button and the information that I have display.
Here is the picture of the outcome right now:
And I do not want that I want something like this:
The background color only cover the information rather than cover the whole column.
Here is the code:
<div class='container-fluid'>
<div class="row">
<div class ="row " style = "margin-bottom: 5px;padding:0px;margin-right: 0px;margin-left:0px; ">
<div class = "col-md-4" style = "margin:0px;padding:0px;"></div>
<div class = "col-md-8" style = "border:none;margin:0px;background-color: #dcfdd7;">
<div class = "row ">
<div class = "col-md-12 " style = "margin:0px;padding:0px;">
<div class = "col-md-6">
<g:if test="${cus.status =='Inactive'}">
<g:form class="activateStatus" controller="customer" action="activateStatus" id = "${cus.id}">
<button type="button" class="btn btn-success activate-Status" style ="color:white;font-weight: bold">Activate</button>
</g:form>
</g:if>
<g:if test="${cus.status =='Active'}">
<g:form class="changeStatus" controller="customer" action="changeStatus" id = "${cus.id}">
<button type="button" class="btn btn-danger change-Status" style ="color:white;font-weight: bold">Deactivate</button>
</g:form>
</g:if>
<g:link action="index" controller="customer"><button id = "back" type="button" class="btn btn-primary" style = "font-weight: bold">Back</button></g:link>
<g:link action="editCustomer" id="${cus.id}"><button id = "edit" type="button" class="btn" style = " font-weight: bold;color: white;background-color:#1f549c"><i id = "add-icon" class="fa fa-edit" aria-hidden="true"></i>Edit</button></g:link>
</div>
<div class = "col-md-4"></div>
<div class = "col-md-2"></div>
</div>
</div>
<div class = "row" style = "padding:0px;margin:0px;">
<div class = "col-md-12">
<div class="row">
<div class="col-md-4" style = "padding:0px;margin:0px;">
<h4>Name:</h4>
</div>
<div class="col-md-5" style = "padding:0px;margin:0px;">
<h4>${cus.name}</h4>
</div>
</div>
<div class="row">
<div class="col-md-4" style = "padding:0px;margin:0px;">
<h4>Code:</h4>
</div>
<div class="col-md-5" style = "padding:0px;margin:0px;">
<h4>${cus.code}</h4>
</div>
</div>
<div class="row">
<div class="col-md-4" style = "padding:0px;margin:0px;">
<h4>Contact Person:</h4>
</div>
<div class="col-md-5" style = "padding:0px;margin:0px;">
<h4>${cus.contactPerson}</h4>
</div>
</div>
<div class="row">
<div class="col-md-4" style = "padding:0px;margin:0px;">
<h4>Status:</h4>
</div>
<div class="col-md-5" style = "padding:0px;margin:0px;">
<h4>${cus.status}</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="customerId" value="${cus.id}">
</div>
</div>
</div>
Many thanks.

Answer 1

i tried to make the same website but your code is too complicated for the simple question you are asking , the main concept you should remember is "keep it simple" so it would be easy to help you , and for your self .
code :
https://stackblitz.com/edit/web-platform-v9i4fh?file=index.html
live website :
https://web-platform-v9i4fh.stackblitz.io/
here is a way of doing it , but in your code you have too much stuff going on , it is really difficult to understand how to solve it there . you need to remember the main concept of CSS . in a couple of minutes i will go through your code and will try to figure out what is going on