Hiding Columns On Small Screens In Bootstrap 4 #24255 - GitHub

Home » Col-sm-hidden Bootstrap 5 » Hiding Columns On Small Screens In Bootstrap 4 #24255 - GitHub

Maybe your like

Skip to content Dismiss alert {{ message }} / bootstrap Public

  • Uh oh!

    There was an error while loading. Please reload this page.

  • Notifications You must be signed in to change notification settings
  • Fork 79.1k
  • Star 174k
  • Code
  • Issues 397
  • Pull requests 177
  • Discussions
  • Actions
  • Projects 2
  • Security
  • Insights
Additional navigation options Hiding columns on small screens in Bootstrap 4 #24255New issueNew issueClosedClosedHiding columns on small screens in Bootstrap 4#24255Labelscssv4@klor

Description

@klorkloropened on Oct 5, 2017

Hiding columns on small screens is hard and inconsistent in Bootstrap 4 compared to Bootstrap 3 because 1) you have to use "d-" classes and 2) mix them with "col-" classes.

In Bootstrap 3, I could do like this (verbose example):

<div class="row"> <div class="hidden-xs col-sm-6 col-md-6 col-lg-6"> Hide me on small screens </div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> Only show me on small screens </div> </div>

As I understand, the .hidden-* classes were removed because they conflicted with jQuery's $(...).hide() and $(...).show() methods.

To overcome this, I suggest a new grid column that is easier to comprehend and does not conflict with jQuery:

  • .col-xs-0 (same as .hidden-xs in BS3)
  • .col-sm-0
  • .col-md-0
  • .col-lg-0
  • .col-sm-0

So I can do:

<div class="row"> <div class="col-xs-0 col-sm-6"> HIDE ME ON SMALL SCREENS. Show me on larger screens. </div> <div class="col-xs-12 col-sm-6"> SHOW ME ON SMALL SCREENS. Show me on larger screens. </div> </div>

See also:

  • Bootstrap 4: Grid system
  • Overhaul responsive, display, and visibility utilities #22113
  • StackOverflow: bootstrap 4 responsive utilities visible / hidden xs sm lg not working
  • Bootstrap 4 Hidden & Visible: How Responsive Display Works in Bootstrap 4 Beta

Metadata

Metadata

Assignees

No one assigned

Labels

cssv4

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

You can’t perform that action at this time.

Tag » Col-sm-hidden Bootstrap 5