Bootstrap: center <h3> underneath table - html

Question

Link
Heres the website containing the full html rendered Link
Here's my code:
<template name="activeOrderTable"><table class="table">
<thead>
<tr>
<th>Commodity</th>
<th>Quantity</th>
<th>Price (High Quality Metal)</th>
<th>Order Type</th>
<th>Merchant</th>
<th>Location</th>
<th>Date Added</th>
</tr>
</thead>
<tbody>
{{#each activeOrders}}
<tr>
<td>{{prettifyCommodity commodity}}</td>
<td>{{quantity}}</td>
<td>{{price}}</td>
<td>{{prettifyOrderType orderType}}</td>
<td>{{merchant}}</td>
<td>{{location}}</td>
<td>{{prettifyDate createdAt}}</td>
<td><button type="button" class="btn btn-danger btn-xs" data-id="{{_id}}"><span class="glyphicon glyphicon-remove-sign"></span></button></td>
</tr>
{{else}}
<h3>You have no active orders</h3>
{{/each}}
</tbody>
</table>
I would like to center the You have no active orders
I've tried class text-center but its not working.

Answer 1

Your H3 element is inside the table so the browser is trying to 'fix it'.
You should wrap your H3 tag in <tr><td colspan="6"><td></tr> tags and then apply class="text-center" to H3

Answer 2

Just add a text-center class on your h3 tag directly, not on it's parent divs like this:
{{else}}
<h3 class="text-center">You have no active orders</h3>
{{/each}}
Here's a jsfiddle with the above codes: http://jsfiddle.net/AndrewL32/65sf2f66/26/

Answer 3

You must try applying vanilla CSS to the above code.
table.table h3 {
text-align:center;
}