Home > database >  How can I show a Bootstrap 5 column only on mobile?
How can I show a Bootstrap 5 column only on mobile?

Time:04-01

I have a sortable table on the second column and dragging doesn't work well with it so would like to create some space before the column for dragging. How can I make the first column only show on mobile devices?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    Show only on mobile devices
  </div>
  <div >
    Show on all devices
  </div>
</div>

CodePudding user response:

I think this is what you are looking for (col-sm-1 d-block d-sm-none):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    Show only on mobile devices
  </div>
  <div >
    Show on all devices
  </div>
</div>
  • Related