Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Grid does not stack when you set a breakpoint size, it should stack (width 100%) below it.

See original GitHub issue

I was trying bootstrap-styled, at first for a simple grid responsible approach, doesn’t seem to be working right out of the box.

I am not using BootstrapProvider but rather including the individual components, it’s just a simple attempt:

<Row>
<Col md="6" />
<Col md="6"/>
<Row>

Then looking at https://bootstrap-styled.github.io/v4/#/UI Components/Row I see it’s not working there either.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:24 (15 by maintainers)

Top GitHub Comments

1reaction

kopaxcommented, Feb 6, 2019

Yes, it needs to be manually updated. (It’s the only option I can see). We will respect v4 specification and will use OSS feedback such as this one to keep up to date this lib with the original bootstrap.

1reaction

hanoiicommented, Feb 1, 2019

@kopax I am truly confused, you say it works fine, but for me it doesn’t.

See your codesandbox: https://codesandbox.io/s/nr16mnzo3p And have a look at this one, which is basically plain old bootstrap: https://codesandbox.io/s/3vxo9964l6

It’s not the same. On yours, the columns are stacked (on on top of the other) when the browser window is wide and side by side when it’s narrow. On the bootstrap one, is the other way around.

Open them up on a new tab so that it uses the full width of your browser.

Top Results From Across the Web

Full Width Material-UI Grid not working as it should

Best practice is to test out all break points and specify the allocation of space for each screen width.

Grid system - Bootstrap

Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., ....

Grid template areas - CSS: Cascading Style Sheets | MDN

With the grid-area property I can assign each of these areas a name. This will not yet create any layout, but we now...

Layout and Grid System | Components - BootstrapVue

Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) by default, or fluid-width (meaning it's 100% wide all the ......

Layout - dbc docs - Dash Bootstrap Components - Faculty AI

The Bootstrap grid has twelve columns, and six responsive tiers (allowing you to specify different behaviours on different screen sizes, see below).