MVC5 having to add div markups for bootstrap, can we use css instead

Question

We are using MVC5 to build a responsive website. A developer who has joined the team has pointed out that we are adding markup to our cshtml pages to support the responsive design. He thought that really we should just be adding css classes to our elements and then letting the style sheet take care of the layout.

Currently we are adding to the cshtml class sections of code around controls like.

 <div class="row">
      <div class="form-group col-md-6">
            @Html.LabelFor(model => model.TypeId)
            @Html.EditorFor(model => model.TypeId)
            @Html.PeritoValidationMessageFor(model => model.TypeId)
      </div>
 </div>

I suppose my question is - If I want a responsive design do I need to add the divs or is there some way I can apply css classes to my controls instead?

We are going to stick with Bootstrap for the responsive design and would not change the current approach unless it was relatively straight forward to do.

Thanks

Jake

Boostrap requires a specific hierarchy of classes for its CSS to work, hence the need for extra divs. If you remove levels/divs you cannot have the control over columns and layout bootstrap expects. Tell your designer while complete separation of style from content is nice in theory, that is not how Bootstrap works :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Aug 28, 2014 at 9:24
Thanks for your reply. I suspected as much but it never hurts to check these things at the start of a project. — Jake
– Jake, Commented Sep 1, 2014 at 16:00

iCollect.it Ltd · Accepted Answer · 2014-08-28 12:46:24Z

Moving comment to answer:

"If I want a responsive design do I need to add the divs or is there some way I can apply css classes to my controls instead?"

Bootstrap requires a specific hierarchy of classes for its CSS to work, hence the need for extra divs. A lot of work went into creating the Bootstrap responsive layout. CSS alone is just not capable of the type of responsive design Bootstrap easily provides (you could hard-wire styles for each viewport size, but you will wind up with a much bigger mess than you started with).

Basically if you remove those divs you cannot have the control over the columns and layout they way Bootstrap expects. You will have to create custom CSS styles for the whole page, for each size, which defeats the aim of using Bootstrap in the first place.

Answer: Tell your designer that, while complete separation of style from content is nice in theory, that is not how Bootstrap works :)

Collectives™ on Stack Overflow

MVC5 having to add div markups for bootstrap, can we use css instead

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related