Jake
Jake

Reputation: 321

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

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

Upvotes: 2

Views: 408

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

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 :)

Upvotes: 1

Related Questions