Menu
I'm experimenting with Bootstrap 3 responsive grids and am trying to make a column disappear from a row when the screen size is small. I can get the column to disappear but the whole row seems to get narrower as a result.
Here's my code that is giving me grief:
<div class="container"> <div class="row"> <div class="col-xs-4 col-sm-2 col-md-1" align="center"> Col1 </div> <div class="col-xs-4 col-sm-2" align="center"> Col2 </div> <div class="col-xs-12 hidden-xs col-sm-6 col-md-5" align="center"> Col3 </div> <div class="col-xs-12 hidden-xs col-sm-12 hidden-sm col-md-3 " align="center"> Col4 </div> <div class="col-xs-4 col-sm-2 col-md-1" align="center"> Col5 </div> </div> </div> The columns Col4 and then Col3 disappear as the screen gets smaller but the row gets narrower at each removal (when compared to a header row row that doesn't change). I don't get why as I've made sure all the blocks add up to a width of 12 for each stage of the process. I though that maybe the col-xs-12 was the problem but removing this stops the column being removed at all and puts the removed column in with Col5!
I'm obviously missing 'something' but I can't find anything anywhere to help me - hopefully I will find enlightenment here.
611
Grid Classes: The bootstrap-3 grid system has four classes, which are mentioned below: col-xs This class is used for devices with extra-small screen sizes, such as phones, whose width is less than 768px ( <768px).
col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
If you use col class the columns will be of equal width. If you use col-auto the width of the column will be the width of the contents in the column. You can even use a combination of both, like below. In this case the first column width will be equal to the contents of that column.
"D-" is kind of utilities for Bootstrap that effect on Display directly and help you to have Grid Layout. In Css we call that "Display".
How does it work if you only are using visible-md at Col4 instead? Do you use the -lg at all? If not this might work.
<div class="container"> <div class="row"> <div class="col-xs-4 col-sm-2 col-md-1" align="center"> Col1 </div> <div class="col-xs-4 col-sm-2" align="center"> Col2 </div> <div class="hidden-xs col-sm-6 col-md-5" align="center"> Col3 </div> <div class="visible-md col-md-3 " align="center"> Col4 </div> <div class="col-xs-4 col-sm-2 col-md-1" align="center"> Col5 </div> </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
