Bootstrap: Is it OK to assign column classes to heading tags

Question

Is it OK to do this?

<div class="row">
    <h3 class="col-md-12"> ... </h3>
    <div class="col-md-6"> ... </div>
    <div class="col-md-6"> ... </div>
</div>

I mean, is there any reason why assigning Bootstrap grid class to heading tags would be considered bad practice? I can't think of any such reason, but I always see such classes used only for div's.

Answer 1

That's not a good idea. I'd do this instead:

<div class="row">
    <div class="col-md-12">
        <h3> ... </h3>
    </div>
    <div class="col-md-6"> ... </div>
    <div class="col-md-6"> ... </div>
</div>

The .col-*-* classes should be used only for layout purposes!

Answer 2

It is not a good idea because you are mixing layout and typography.

That said, with bootstrap 3.3.4, here is a comparison of the (direct) styles from both (h1 on the left and col-xs-12 on the right)

If you trace back and look at the ordering in the .css file, when they are different, while h1 properties trump the col (direct and inherited) properties in some cases, they don't mess up the ones that affect layout (margin, padding, float, display...) - these are either same or non-conflicting.

So, practically, you wouldn't have any problems, but that could change with a different version of Bootstrap or if you override the standard styles.