Col adding 'col' class to all col elements - breaks responsive breakpoints

[jonbnewman]

Demo of problem: https://codepen.io/anon/pen/BdayLm

If you shrink your window with that demo, the lg <Col /> elements should spread out to full width at some point...they do not.

The responsiveness is broken because of extra col class being added to <Col /> elements:

<Row>
  <Col lg>1</Col>
  <Col lg>2</Col>
  <Col lg>3</Col>
  <Col lg>4</Col>
</Row>

...because the rendered element comes out as:

<div class="row">
  <div class="col col-lg">1</div>
  <div class="col col-lg">2</div>
  <div class="col col-lg">3</div>
  <div class="col col-lg">4</div>
</div>

...that will not work, for the breakpoints to work each <Col /> must be rendered like this:

<div class="row">
  <div class="col-lg">1</div>
  <div class="col-lg">2</div>
  <div class="col-lg">3</div>
  <div class="col-lg">4</div>
</div>

If you edit the live HTML in the demo and remove the extra col class from the elements, then the responsiveness works again.

...perhaps I am missing something entirely but I don't see this working on any examples out of the box...and I will have to fork this project to fix this if I want to use it right now - far as I can see.

I can submit a PR to remove the default col class if wanted?

[TheSharpieOne]

Check out the bootstrap docs for this. All of the examples except 1 have the .col base class or a derivative of it, such as .col-12 which you probably need. The one example which doesn't have it may not be correct. Either way, removing .col is probably not the solution, but determining when it need to be there or not be there or allowing it to be removed may be need.
https://v4-alpha.getbootstrap.com/layout/grid/

[jonbnewman]

@TheSharpieOne I have looked at the docs...if you look at:
https://v4-alpha.getbootstrap.com/layout/grid/#stacked-to-horizontal

You can see their examples for the responsive layouts do not include the col class.

[jonbnewman]

I cannot find a way to remove the base col class without modifying the source and not add it in the first place...and the elements will not stack unless the <Col /> is created without that base col class, only one of the col-* classes.

There should be a prop available on the components (or some other means) to tell reactstrap not to add it in the first place.

[TheSharpieOne]

Right, that was the example I was talking about. Also if you add xs={12} it will layout as stacked for small screen sizes as you described/wanted without any code change or fork needed.
I believe the bootstrap docs are missing that. I am only on mobile right now and cannot confirm.

[jonbnewman]

ah...I see what you are saying...you are correct.

As an example, the following works as expected:

<Row>
  <Col lg={3} md={6} sm={12} xs={12}>Test</Col>
  <Col lg={3} md={6} sm={12} xs={12}>Test</Col>
  <Col lg={3} md={6} sm={12} xs={12}>Test</Col>
  <Col lg={3} md={6} sm={12} xs={12}>Test</Col>
</Row>

Thanks @TheSharpieOne :)

[jonbnewman]

As a side note, maybe an example of how to utilize the responsive breakpoints in the docs would be a good idea? I don't think there is an example of it...

[seb-thomas]

hey thanks for your work on this, I've just come across the same issue.
I'm sure you're aware, but in case you're not - one benefit of using the TWBS grid is that you don't need to specify the width at every breakpoint, the smallest one is used and everything smaller is assumed to be fullwidth. So in your above example it should be sufficient to do lg={3} md={6}
It would be good to have the same behaviour in Reactstrap.

[DamianPereira]

The workaround of specifying width for each breakpoint does not work if you want equal width for medium-up. Equal width requires you to not specify a number of columns.

Is there no way of doing this?

• 1 column for xs
• Equal width columns for medium up (default behavior when you don't specify a number), this can become 5 columns or 7 or whatever depending on number of items in row.

[calvinwyoung]

I also just ran into this issue. The workaround of specifying an xs value for the last responsive breakpoint does not seem like what's intended via Bootstrap's grid system (per @Plonko's comment). Would you consider a pull request that allows one to toggle wheter the additional .col gets included?

[jharris4]

I just ran into this as well, it would be great to be able to control whether or not the col base class gets included or not