Use cards for column headers to make them same width.

biscuit/apps/chronos/templates/chronos/tt_day.html

 <div class="col-sm">
- <ul class="list-group">
-  <li class="list-group-item active">
-   {{ weekday_name }}
-  </li>
- </ul>
  <div class="container">
+  <div class="row">
+   <div class="col-sm">
+    <div class="card chronos-head">
+     <div class="card-body">
+      <span class="card-title">{{ weekday_name }}</span>
+     </div>
+    </div>
+   </div>
+  </div>
   {% for period_num, lesson_period in lesson_periods.items %}
    <div class="row">
     <div class="col-sm">

biscuit/apps/chronos/templates/chronos/tt_week.html

@@ -11,12 +11,16 @@
 
  <div class="row">
   <div class="col-sm">
-   <ul class="list-group">
-    <li class="list-group-item active">
-     {% blocktrans %}Times{% endblocktrans %}
-    </li>
-   </ul>
    <div class="container">
+    <div class="row">
+     <div class="col-sm">
+      <div class="card chronos-head">
+       <div class="card-body">
+        <span class="card-title">{% blocktrans %}Times{% endblocktrans %}</span>
+       </div>
+      </div>
+     </div>
+    </div>
     {% for num, times in periods.items %}
      <div class="row">
       <div class="col-sm">