I wonder if someone could spare me a couple of minutes to tell me where I'm going wrong here. I'm trying to hide certain cells in a table under the new bootstrap 4 framework. Under version 3 I would have used hidden-xs.
<table class="table table-bordered">
<thead class="hidden-xs">
<tr>
<th colspan="2" style="border-left: transparent 1px solid;border-top: transparent 1px solid;border-bottom: transparent 1px solid;"></th>
<th class="text-center hidden-xs">9</th>
<th class="text-center hidden-xs">10</th>
<th class="text-center hidden-xs">11</th>
<th class="text-center hidden-xs">12</th>
<th class="text-center hidden-xs">13</th>
<th class="text-center hidden-xs">14</th>
<th class="text-center hidden-xs">15</th>
<th class="text-center hidden-xs">16</th>
<th class="text-center hidden-xs">17</th>
<th class="text-center hidden-xs">18</th>
<th class="text-center">Score</th>
</tr>
</thead>
</table>
I've tried replacing hidden-xs with d-none d-sm-block but it has no effect. Stumped.
As a note the solutions offered in Missing visible-** and hidden-** in Bootstrap v4 unfortunately don't seem to work.
Thanks, C