How to use Bootstrap whilst maintaining semantic HTML markup?

Question

Bootstrap provides classes such as text-left (Alignment classes), text-lowercase (Transformation classes) etc, which is the same as defining inline-styles (not technically, but logically).

In an alternative methodology such as bem, it imposes that classes should reflect 'physical' blocks and elements, and their modifier (or the state of the element, such as active, current), and any styles should be applied purely in the CSS.

The Bootstrap approach seems like a poor separation of concern between structure and presentation, and goes against this W3C Tip for Webmasters.

This issue is echoed by many:

1. Niko Sams - Why I don't like Twitter Bootstrap
2. Paradax - Bootstrap The good, the bad and the ugly
3. bvision - Please stop embedding Bootstrap classes in your HTML!

How does one use Bootstrap while still keeping the HTML markup semantic?

Answer 1

Bootstrap provides mixins which you can use. So instead of adding classes like col-xs-12 in the HTML, you'd use @include make-xs-column(12) inside the selector block for the element. To add a row, there's the @mixin make-row.

Referring to an answer by Alexey Morashko, instead of this unsemantic markup:

<div class="items-list row">
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product first</div>
        <div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product second</div>
        <div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product third</div>
        <div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
    </div>
</div>

You can instead use:

HTML

<div class="items-list">
    <div class="item">
        <div class="item-name">Product first</div>
        <div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="item">
        <div class="item-name">Product second</div>
        <div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
    </div>
    <div class="item">
        <div class="item-name">Product third</div>
        <div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
    </div>
</div>

CSS

.items-list {
    @include make-row();     
    .item 
        @include make-xs-column(12);
        @include make-sm-column(6);
        @include make-md-column(4);
    }
}

---

You can find more examples of Bootstrap mixins in the Sitepoint article - 5 Useful Sass Mixins in Bootstrap.