Bootstrap CSS Container Layout

I've always been used to write my own CSS but I decided to give a go to twitter-bootstrap and I want to make sure I'm not using more HTML containers that I need to:

This is my code for a single element of a list:











My main issue with this is to have two ` wrapping single elements, in the first case it's an and then a . If this was normal HTML I would condemn the DOM code as being inefficient and cluttered as the would not be necessary.

Is this a proper usage of twitter-boostrap if I want to create a form group element where the left side is an input and the right side the -` icon?

Just like many CSS frameworks, bootstrap is meant to reduce (or even eliminate) the need to write CSS. Instead, it offers predefined classes to be used with divs to give the page a shape.

I agree that it might seem that the code above has "divitis." As a matter of fact, not even with CSS3 is it always possible to create a certain layout or style using semantic HTML only. So since the divs exist exactly for that, and using a framework might reduce development time by scales, I don't see anything bad with the code above. It's completely semantic, correct as of bootstrap, and apart from bootstrap itself contains no redundancy.

StackExchange Code Review Q#62317, answer score: 2