ritacse
11/26/2015 - 5:00 PM

Bootstrap 3

Some notes for responsive design

1)Since each .col class has 15px padding on either side, you should usually wrap nested columns in a .row, which has -15px margins. This avoids duplicating the padding, and keeps the content lined up between nested and non-nested col classes.

2)xs = extra small screens (mobile phones)
sm = small screens (tablets)
md = medium screens (some desktops)
lg = large screens (remaining desktops)

3)col-xs-6 col-md-4 spans 6 columns on xs and sm, and 4 columns on md and lg, even though sm and lg were never explicitly declared.

4)it's actually totally fine if your .row includes more than 12 cols, as long as you are aware of how they will react. --This is a contentious issue, and not everyone agrees.

5)Set an element to display: block and center via margin. Just need to add a class "center-block" in the img tag