Skip to content
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
Closed

v4 - Add responsive clearfix utility classes #17355

monoblaine opened this issue Aug 26, 2015 · 3 comments
Labels

Comments

@monoblaine
Copy link
Contributor

@monoblaine 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.)

@mdo mdo added this to the v4.1 ideas milestone Oct 9, 2016
@kaleb
Copy link

@kaleb 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
Copy link
Contributor Author

@monoblaine 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
Copy link
Member

@mdo 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.