# Bootstrap CSS Container Layout

I've always been used to write my own CSS but I decided to give a go to 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:

<div class="row form-group">
<div class="col-md-4">
<input type="email" class="form-control" placeholder="Enter email" value="vitor.monteiro@ubs.com">
</div>
<div class="col-md-2">
<span class="glyphicon glyphicon-minus"></span>
</div>
</div>


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

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

• This seems pretty consistent with Bootstrap. Have you considered not using Bootstrap? – cimmanon Sep 9 '14 at 2:07
• Well, this is a simple scenario, so bootstrap would be used in a larger context. If you think this is OK and no code review is needed, no other way to improve this code, add it as an answer and I'll upvote. – bitoiu Sep 10 '14 at 9:48

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.