New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4 - Add responsive clearfix utility classes #17355

Closed
monoblaine opened this Issue Aug 26, 2015 · 3 comments

Comments

Projects
None yet
4 participants
@monoblaine
Contributor

monoblaine commented Aug 26, 2015

With the demise of the responsive utility classes like visible-xs-block, visible-sm-block, etc.; I think we need some additional utility classes (clearfix-xs, clearfix-sm, etc) for grid column clearing purposes.

So we can write something like this:

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
    <div class="clearfix-sm"></div> <!-- Show only for sm -->
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
    <div class="clearfix-md"></div> <!-- Show only for md -->
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
    <div class="clearfix-lg"></div> <!-- Show only for lg -->
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
</div>

instead of this:

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
    <div class="clearfix hidden-xs-down hidden-md-up"></div> <!-- Show only for sm -->
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
    <div class="clearfix hidden-sm-down hidden-lg-up"></div> <!-- Show only for md -->
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
    <div class="clearfix hidden-md-down hidden-xl-up"></div> <!-- Show only for lg -->
    <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
</div>

(I actually wanted to create a pull request about this, but SASS code is currently far beyond my comprehension ability.)

@kaleb

This comment has been minimized.

Show comment
Hide comment
@kaleb

kaleb Mar 7, 2017

Is this needed after the move to flexbox grid? Also, is the Column Reset section even needed anymore? http://v4-alpha.getbootstrap.com/layout/grid/#column-resets

kaleb commented Mar 7, 2017

Is this needed after the move to flexbox grid? Also, is the Column Reset section even needed anymore? http://v4-alpha.getbootstrap.com/layout/grid/#column-resets

@monoblaine

This comment has been minimized.

Show comment
Hide comment
@monoblaine

monoblaine Mar 7, 2017

Contributor

@kaleb Well, for my theoretical (and weird) example, yes it's needed. But after the PR #22113, the example code I've given should be rewritten like this:

  <div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
-     <div class="clearfix hidden-xs-down hidden-md-up"></div> <!-- Show only for sm -->
+     <div class="clearfix d-none d-sm-block d-md-none"></div> <!-- Show only for sm -->
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
-     <div class="clearfix hidden-sm-down hidden-lg-up"></div> <!-- Show only for md -->
+     <div class="clearfix d-none d-md-block d-lg-none"></div> <!-- Show only for md -->
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
-     <div class="clearfix hidden-md-down hidden-xl-up"></div> <!-- Show only for lg -->
+     <div class="clearfix d-none d-lg-block d-xl-none"></div> <!-- Show only for lg -->
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
  </div>
Contributor

monoblaine commented Mar 7, 2017

@kaleb Well, for my theoretical (and weird) example, yes it's needed. But after the PR #22113, the example code I've given should be rewritten like this:

  <div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
-     <div class="clearfix hidden-xs-down hidden-md-up"></div> <!-- Show only for sm -->
+     <div class="clearfix d-none d-sm-block d-md-none"></div> <!-- Show only for sm -->
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
-     <div class="clearfix hidden-sm-down hidden-lg-up"></div> <!-- Show only for md -->
+     <div class="clearfix d-none d-md-block d-lg-none"></div> <!-- Show only for md -->
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
-     <div class="clearfix hidden-md-down hidden-xl-up"></div> <!-- Show only for lg -->
+     <div class="clearfix d-none d-lg-block d-xl-none"></div> <!-- Show only for lg -->
      <div class="col-sm-6 col-md-4 col-lg-3">.col-sm-6 .col-md-4 .col-lg-3</div>
  </div>
@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Jul 2, 2017

Member

Going to bail on this for now given our flexbox grid negates the core use case for this.

Member

mdo commented Jul 2, 2017

Going to bail on this for now given our flexbox grid negates the core use case for this.

@mdo mdo closed this Jul 2, 2017

@mdo mdo removed this from the v4.1 ideas milestone Jul 2, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment