Table column width with Bootstrap

Question

This is my first question in StackOverflow, because it's the first time I haven't been able to find an answer that helped me solve my problem.
I'm trying to make a table for a menu with bootstrap. I want the breakfast, lunch and dinner columns width to be 30% each and the one saying carbs, fat and proteins 10% but I cannot make it work.
I read through the documentation and actually found a pretty similar quiestion here. However, I still cannot make it work. I put my code here in CodePen so you can see what I'm seeing.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-bordered">
  <thead>
    <tr class="m-0">
      <th class="w-10">#</th>
      <th class="w-30">Breakfast</th>
      <th class="w-30">Lunch</th>
      <th class="w-30">Dinner</th>
    </tr>
  </thead>
  <tbody>
    <tr class="m-0">
      <th scope="row" class="w-10">Carbohydrates</th>
      <td class="w-30">-
      </td>
      <td class="w-30">
        -
      </td>
      <td class="w-30">-
      </td>
    </tr>
    <tr class="m-0">
      <th scope="row" class="w-10">Fat</th>
      <td class="w-30">-
      </td>
      <td class="w-30">
        -
      </td>
      <td class="w-30">-
      </td>
    </tr>
    <tr class="m-0">
      <th scope="row" class="w-10">Proteins</th>
      <td class="w-30">-
      </td>
      <td class="w-30">
        -
      </td>
      <td class="w-30">-
      </td>
    </tr>
  </tbody>
</table>

Can anyone help me spot what I'm missing? I've just been learning to code on my own for about 3 months and started with bootstrap last week, so I hope it isn't something very obvious.
Thanks in advance!

Answer 1

You need to provide CSS rules

table .w-10 { width:10%; }
table .w-30 { width:30%; }

Note that Bootstrap does come with some predefined width classes, but only for multiples of 25%.