The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Media Queries issue Reply To: [Solved] Media Queries issue


I am using bootstrap 3.2 for one of my client website. I am using col-xs-6 to do responsive portfolio page. Actually I want to remove col-xs-6 when it went to 480px dimension.

You’ll have to write your own media query since Bootstrap targets the breakpoints – ≥1200px (large devices,lg),≥992px(medium devices,md),≥768px(small devices, sm) and <768px(extra small devices, xs)

If you wish to ‘remove'(as in hide) the col at 480px, you’ll have to add a custom class that hides the container (actually since bootstrap uses min-width media queries it might be more consistent to do it the reverse way – hide it to begin with and then reveal it above 480px by using min-width)

If you wish to remove the ‘xs-6’ property, then again , you’ll have to add a custom class that makes the column full width(100%) below 480px. Only do this if it is absolutely essential to target the 480px breakpoint, because Bootstrap has an sm class too – “sm-6” for instance which becomes full width(100%) below 768px.