<div class="text-center"> <span class= "container-fluid"> @html.grid(model).columns(columns => columns.add(foo => foo.incidentnumber).titled("incident number").setwidth(50).filterable(true); columns.add(foo => foo.openedby).titled("opened by").setwidth(110); columns.add(foo => foo.openeddate).titled("opened date").setwidth(110).sortable(true); columns.add(foo => foo.environment).titled("environment").setwidth(110).filterable(true); columns.add(foo => foo.assignedperson).titled("assigned person").setwidth(110).filterable(true); columns.add(foo => foo.description).tostring().substring(0, 10); columns.add(foo => foo.latestfeedback).titled("latest feedback").setwidth(110); columns.add(foo => foo.latestfeedbackdate).titled("latest feedback date").setwidth(110); columns.add(foo => foo.servicemanagerstatus).filterable(true); columns.add(foo => foo.reportbackdate).titled("reportbackdate").setwidth(110); columns.add() .encoded(false) .sanitized(false) .rendervalueas(foo => html.actionlink("details", "details", new { id = foo.incidentid })); }).withpaging(20).sortable(true) </span> </div> i want use bootstrap, new mvc , not sure how it. want table opened on computer screens cellphones.
ok first thing first ,bootstrap has 12 columns divide , there few options can define size of columns on different screens(computer screens,cellphones)
- xs = small screens (mobile phones)
- sm = small screens (tablets)
- md = medium screens (some desktops)
- lg = large screens (remaining desktops)
so in case ,
<div class="col-md-1 col-xs-1">your column</div>
should trick. hope helps! :-)
