Twitter bootstrap - Make a table row inactive

Does the table row contain any inputs? If so, add the disabled HTML5 attribute to the input and perhaps make the text in that row greyed out to show it is inactive? Just an idea..

I.E.

<tr>
   <td style="color:grey;">Sample Text</td>
   <td><input type="text" disabled/></td>
</tr>

I have worked with Twitter Bootstrap a bit and did not see any of these features though.


Bootstrap 4 requires you to add "table-" to the class.

<tr class="table-danger">...</tr>

https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes


I've created a custom class table-inactive:

.table-inactive td {
    background-color: #ececec;
    color: #b9b9b9;
}

Bootstrap has a few elements you might find helpful:


Use contextual classes to change row colors:

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

http://getbootstrap.com/css/#tables-contextual-classes


Use contextual colors to change the color of text:

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

http://getbootstrap.com/css/#helper-classes-colors


The disabled element is primary for form elements and buttons. Check that out here,