0
I have an HTML page in bootstrap it is already responsive. But I need that when you access the site in a certain resolution defined by me hide only one of a table that is possible?
2 answers
3
You have the responsibility utilities that allow you to do this without needing CSS external to the Framework:
To display:
.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
*(asterisk) - may be: 'block', 'inline' and 'inline-block'.
To hide:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
Simply add this style to the element you want to fire.
OBS:
XS = Extra small (Menor que 768px)
SM = Small (Maior ou igual a 768px)
MD = Medium (Maior ou igual a 992px)
LG = Large (Maior ou igual a 1200px)
Example of use application:
<table>
<tr>
<td class="" >Exibe Todos</td>
<td class="hidden-xs">Exibe SM ou maior</td>
<td class="hidden-xs hidden-sm">Exibe MD ou maior</td>
<td class="hidden-xs hidden-sm hidden-md">Exibe LG</td>
</tr>
</table>
-
How do I do it? type <td class="Hidden-Xs"> this? I want to know how to activate in the column I want you to hide
-
That’s right, only add the classname in the 'td' or 'tr' you want to hide, if you want to hide on small devices use '<td class='Hidden-Xs'></td>', works for any element, not only with tds, you can use with 'div', 'span' and all the others.
0
You can do this only with CSS.
Set a maximum width resolution and within the items you want to search for.
For example hiding a column with a maximum screen width of 450px.
@media only screen and (max-width: 450px) {
td.classecolunaesconder{display:none; }
}
Browser other questions tagged html bootstrap table responsive
You are not signed in. Login or sign up in order to post.
Do you just want to know how to do or apply in your code? If it’s the second option, edit the question with the same.
– Felipe Duarte
Apply in the code
– Felipe Dutra
You can use JS to identify the screen resolution window.screen ex.: http://www.javascriptkit.com/howto/newtech3.shtml
– Caique Romero