Home / Questions / 55322
Accepted
Pablo Ezequiel Inchausti
Asked: 2020-03-15 12:48:46 +0800 CST 2020-03-15 12:48:46 +0800 CST

How to hide a column with Bootstrap4 when resizing?

  • 772

How could one hide a table column with bootstrap4 when changing the screen resolution to a lower one? For example, in the following table, hide the column with "Lat, Lng" when the browser is made smaller:

The code in the table is normal:

<table class="table table-striped">
 <thead>
  <tr>
    <th>Place Name</th>
    <th>[ Lat, Lng ]</th>
    <th></th>
    <th></th>
  </tr>
 </thead>
 <tbody>
  <tr *ngFor="let place of places">
   <td>{{ place.address  }}</td>
   <td><small>[ {{ place.latitude }}, {{ place.longitude }} ]</small></td>
   <td><button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" (click)="viewPlace(place)"><span class="fa fa-search-plus fa-lg"></span> view</button></td>
   <td><button type="button" class="btn btn-link" (click)="deletePlace(place)"><span class="fa fa-trash-o fa-lg"></span> delete</button></td>
  </tr>
 </tbody>
</table>
bootstrap

2 Answers

  1. Best Answer

    Adds the class hidden-md-downto the element <th>and <td>corresponding. The class indicates that such elements should be hidden at medium or smaller resolutions, which corresponds to the resolutions: extra-small , small , and medium .

    On this page you can see the different helper classes that help to hide content of your page depending on the current resolution of the client.

    Below I put an image of the existing resolutions (jumps) in the Bootstrap 4 grid system (it can be consulted here ):

    enter image description here

    • 2

  2. The class hidden-md-downdidn't work for me in bootstrap 4. I used the d-noneand classes d-md-block. d-nonealways hides, but d-md-blockshows on medium sized devices upwards.

    For more information: https://getbootstrap.com/docs/4.0/utilities/display/

    • 1