CODEWITHSUNDEEP
htmltwitter-bootstrapcssbootstrap-4
dan
dan

Reputation: 729

bootstrap 4: d-lg-flex in column (td)

I have a table where some columns needs to be hidden on smaller screens, so I have the code as below:

<table>
  <tr>
    <td>Normal 1</td>
    <td class="d-lg-flex d-none">hidden 1</td>
    <td class="d-lg-flex d-none" >hidden 1</td>
    <td class="d-lg-flex d-none">hidden 1</td>
    <td>Normal 2</td>
  </tr>
</table>

The problem is that on the large screen the 3 columns with 'd-lg-flex d-none' are shown as 3 rows in a column instead of 3 separate columns.

Need help on how to make them show normally on large (lg) screen size.

Thanks!

Upvotes: 1

Views: 873

Answers (2)

mahan
mahan

Reputation: 14985

By default, display of td elements is table-cell. d-none change display of them to none. To reset display of them on large screens, use d-lg-table-cell

.d-lg-table-cell {
  display: table-cell !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<table>
  <tr>
    <td>Normal 1</td>
    <td class="d-none d-lg-table-cell">hidden 1</td>
    <td class="d-none d-lg-table-cell">hidden 1</td>
    <td class="d-none d-lg-table-cell">hidden 1</td>
    <td>Normal 2</td>
  </tr>
</table>

Upvotes: 1

UkFLSUI
UkFLSUI

Reputation: 5672

Change d-lg-flex to d-lg-table-cell. This should work:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<table>
  <tr>
    <td>Normal 1</td>
    <td class="d-lg-table-cell d-none">hidden 1</td>
    <td class="d-lg-table-cell d-none">hidden 1</td>
    <td class="d-lg-table-cell d-none">hidden 1</td>
    <td>Normal 2</td>
  </tr>
</table>

Here's the jsfiddle: https://jsfiddle.net/bfse58ta/1/

Upvotes: 3

Related Questions