Why use multiple col-[lg|md|sm|xs]- in bootstrap?

Question

I have seen some projects using something like

<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">

Why they use multiple col-?

score 5 · Accepted Answer · answered Apr 07 '16 at 14:24

5

Because we can get it right for all devices for eg small devices , medium devices, small devices, xtra small devices Xs - extra small device Md - medium device Sm- small device

answered Apr 07 '16 at 14:24

Pratik Solanki

392
3
9

Do I need to specify `
` to get 100% width in all devices?
– Sato Apr 08 '16 at 06:36
1

no. You can use the only `col-lg-12` width will be adjusted automatically for all device widths unless you want different widths for different devices – Rohit Agre Apr 11 '16 at 05:40

score 2 · Answer 2 · answered Apr 07 '16 at 14:41

From the bootstrap doc:

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Why use multiple col-[lg|md|sm|xs]- in bootstrap?

2 Answers2