- This topic is empty.
-
AuthorPosts
-
July 20, 2014 at 11:27 pm #175963MT FrescoParticipant
hi all,
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.
Thanks in advance.
July 21, 2014 at 4:43 am #175988Paulie_DMemberActually I want to remove col-xs-6 when it went to 480px dimension.
It’s not clear what you are trying to do.
Do you have a media query for 480px?
Do you have a link we could look at?
July 21, 2014 at 6:29 am #175990TheDutchCoderParticipantBootstrap doesn’t seem to have responsive show/hide classes, but you can create them yourself.
Example:
/* Mobile hiding/showing */ .hide-m { display: none; } .show-m { display: block; } /* Laptop hiding/showing */ @media screen and (min-width: 768px) { .hide-l { display: none; } .show-l { display: block; } } /* Desktop hiding/showing */ @media screen and (min-width: 992px) { .hide-d { display: none; } .show-d { display: block; } }
Not sure if I’m using the right Bootstrap media queries, but you can alter them yourself ;-)
Then to show/hide a column you can do:
<div class="col hide-l show-d"></div>
Which will show the column on mobile, hide it on laptop and show it on desktop.
July 22, 2014 at 9:19 pm #176191Krish1980ParticipantI 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.
July 22, 2014 at 9:23 pm #176192Krish1980ParticipantYou could do the same with Bootstrap too, just not for the break-point mentioned by the OP
July 22, 2014 at 10:22 pm #176193MT FrescoParticipantThanks all of you for your kind answers.
Actually one of my facebook friend told me solution last night.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.