Bootstrap: Clearfix Reset Not Working Properly in Bootstrap 4.0.0 Alpha
I was trying the grid examples given on Bootstrap page when I found that the clearfix reset pulled my grid into an "xs" setting even when the browser window was resized to "lg". Below are a few screenshots with the clearfix set and browser maximized to full width and height showing the difference between Bootstrap 3 and Bootstrap 4:
Bootstrap 3:
Bootstrap 4.0.0 alpha:
VishalSubramanyam
All 8 comments
Could you post a JSBin/JSFiddle of this?
Also, what browser and OS are you using?
RyanZim
on 25 Mar 2016
Hi @VishalSubramanyam!
You appear to have posted a live example (https://fiddle.jshell.net/vishal_subramanyam/cspveff6/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- line 54, column 3: E003: Found one or more
.rows that were not children of a grid column or descendants of a.containeror.container-fluid
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!
(_Please note that this is a fully automated comment._)
twbs-lmvtfy
on 29 Mar 2016
Hi @VishalSubramanyam!
You appear to have posted a live example (https://fiddle.jshell.net/vishal_subramanyam/cspveff6/show/light/), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- line 54, column 3: E003: Found one or more
.rows that were not children of a grid column or descendants of a.containeror.container-fluid
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!
(_Please note that this is a fully automated comment._)
twbs-lmvtfy
on 29 Mar 2016
Hi @VishalSubramanyam!
You appear to have posted a live example (https://jsbin.com/pehacaresa/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- line 11, column 1: E003: Found one or more
.rows that were not children of a grid column or descendants of a.containeror.container-fluid - W002:
<head>is missing X-UA-Compatible<meta>tag that disables old IE compatibility modes
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!
(_Please note that this is a fully automated comment._)
twbs-lmvtfy
on 29 Mar 2016
Hi @VishalSubramanyam!
You appear to have posted a live example (https://jsbin.com/pehacaresa/1/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- line 11, column 1: E003: Found one or more
.rows that were not children of a grid column or descendants of a.containeror.container-fluid - W002:
<head>is missing X-UA-Compatible<meta>tag that disables old IE compatibility modes
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!
(_Please note that this is a fully automated comment._)
twbs-lmvtfy
on 29 Mar 2016
This is my JSBin after revision with Bootstrap 4:
https://jsbin.com/jajirudepu/1/edit?html,output
I am using Chrome on Windows 10
VishalSubramanyam
on 29 Mar 2016
.visible-xs was removed in v4. See http://v4-alpha.getbootstrap.com/migration/#responsive-utilities. You should use a .hidden-*-up and/or .hidden-*-down class instead. These classes hide the element at the given breakpoint and all sizes "up" (larger) or "down" (smaller).
Note: v4 adds an new breakpoint. Therefore, you should use one breakpoint larger than you would in v3 for all grid sizing.
RyanZim
on 29 Mar 2016
Closing per @RyanZim. Let me know if there's something I'm overlooking.
cvrebert
on 3 Apr 2016
Related issues
iklementiev
路
3Comments
ghost
路
3Comments
cvrebert
路
3Comments
devfrey
路
3Comments
devdelimited
路
3Comments
Most helpful comment
Could you post a JSBin/JSFiddle of this?
Also, what browser and OS are you using?