Caverman Caverman - 4 months ago 33
Less Question

How to change Bootstrap panel-body in LESS file?

I'm new with LESS and trying to customize Bootstrap but I've been able to create a common panel class that inherits all of the panel-primary colors. I'm doing that so that if I wanted to change all of my panels to say panel-default I just make that change in one place and they all get the new class.

What I would like to do is change the body's background color to a slight gray. I thought i could do it like the following but it's not picking up the color.

.vtc-panel{
.panel;
.panel-primary;
.panel-body{
background-color:gainsboro!important;
}
}


This is how I'm using the class.

<div class="vtc-panel">
<div class="panel-heading">
<div class="row">
<div class="col-md-3">
<span class="punch-employee-info">Name: </span><span class="punch-employee-info-value">@Model.EmployeeName</span>
</div>
<div class="col-md-4">
<span class="punch-employee-info">Employee #: </span><span class="punch-employee-info-value">@Model.EmployeeNumber</span>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="panel-body">

Answer

Try changing your CSS

.vtc-panel{
   .panel;
   .panel-primary;
   .panel-body{
       background-color:gainsboro !important;
    }    
}

Also, try clearing your cache. This might help out some.

This should do the trick.