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:
<div class="row form-group">
<div class="col-md-4">
<input type="email" class="form-control" placeholder="Enter email" value="[email protected]">
</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 twitter-boostrap if I want to create a form group element where the left side is an input and the right side the - icon?
-
\$\begingroup\$ This seems pretty consistent with Bootstrap. Have you considered not using Bootstrap? \$\endgroup\$cimmanon– cimmanon2014年09月09日 02:07:42 +00:00Commented Sep 9, 2014 at 2:07
-
\$\begingroup\$ 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. \$\endgroup\$bitoiu– bitoiu2014年09月10日 09:48:15 +00:00Commented Sep 10, 2014 at 9:48
2 Answers 2
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.
Bootstrap css does not adhere to the web standards properly. In bootstrap the style sheet is never completely isolated from the html by definition it reduces the code quality. If you are building responsive web site it is always better to use flexbox since they are easy to use and lot cleaner. But if you still insist on using bootstrap use bootstrap scss or less and use their mixins like
@include make-lg-column(4)
After selecting the the div you want to change
and avoid putting bootstrap classes in you html as much as possible.