CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfluid
johnnyzx
johnnyzx

Reputation: 11

Make Bootstrap Columns Fluid, (Auto Adjustable) now they are stacking on small screen

I don't have reputations please check link but removing spaces

Problem 1

I am new to responsive and Bootstrap, on fixed width of 980px. I created the 6 columns for 6 icons, in desktop view they look like this, https://i.sstatic.net/87DyA.jpg but in Mobile view they are stacking, My boss wants that it should change according to view, like in tablet mode it should show 3 icons per row, and in mobile view 2 icons per view. How can I achieve that? http://goo.gl/XkNc39

Problem 2

My layout is on fixed-width of 980px, but on small view its getting out of area. I am not aware of media queries very much. I can't understand what I am doing wrong.

Thanks in Advance

Upvotes: 0

Views: 617

Answers (1)

Sanderfish
Sanderfish

Reputation: 1530

Problem 1

The Bootstrap grid (like most grid systems) always counts to 12. That means that you should calculate how large the column you need to use is. For example: if you want 4 items next to each other you do 12 / 4 = 3, so you use col-..-3.

The classes you should use for your icons are

<div class="col-md-3 col-sm-4 col-xs-6">

The classes explained: on medium devices (col-md-3) items have a width of 3 columns, so 4 items per row. On small devices (col-sm-4) items have a width of 4 columns, so 3 items per row. On extra small devices (col-xs-6) items have a width of 6 columns, so 2 items per row.

I've edited your CodePen and it's working now. http://codepen.io/anon/pen/avoqeg

Problem 2

It could have something to do with a margin/padding. You could try to take a look in the developers console (right click > inspect element). Or you could reproduce the problem in another CodePen so I can take a look.

Upvotes: 2

Related Questions