Bootstrap 3 hidden-xs makes row narrower

Question

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    lt div class  container  gt    lt div class  row  gt     lt div class  col-xs-4 col-sm-2 col-md-1  align  center  gt     Col1    lt  div gt     lt div class  col-xs-4 col-sm-2  align  center  gt     Col2    lt  div gt     lt div class  col-xs-12 hidden-xs col-sm-6 col-md-5  align  center  gt     Col3    lt  div gt     lt div class  col-xs-12 hidden-xs col-sm-12 hidden-sm col-md-3   align  center  gt     Col4    lt  div gt     lt div class  col-xs-4 col-sm-2 col-md-1  align  center  gt     Col5    lt  div gt    lt  div gt   lt  div gt    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

User · Accepted Answer

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    lt div class  container  gt       lt div class  row  gt           lt div class  col-xs-4 col-sm-2 col-md-1  align  center  gt              Col1          lt  div gt           lt div class  col-xs-4 col-sm-2  align  center  gt              Col2          lt  div gt           lt div class  hidden-xs col-sm-6 col-md-5  align  center  gt              Col3          lt  div gt           lt div class  visible-md col-md-3   align  center  gt              Col4          lt  div gt           lt div class  col-xs-4 col-sm-2 col-md-1  align  center  gt              Col5          lt  div gt       lt  div gt   lt  div gt

User · Answer

row       margin-right  15px      throw this in your CSS

[html] Bootstrap 3 hidden-xs makes row narrower

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3