CODEWITHSUNDEEP
csstwitter-bootstrap
Pranalya
Pranalya

Reputation: 27

what is the difference between col-lg-4 and col-md-3 and col-xs-3?

For the field size i gave col-lg-4 and col-Md-3 and col-XS-2.but at last the column size is 4 only then why we need col-MD-3 and col-XS-2.explain me please...

texttext 1

Upvotes: 2

Views: 6483

Answers (1)

Etheryte
Etheryte

Reputation: 25310

You can see the Bootstrap grid documentation for the details, should they be updated at some date after this reply.

The syntax of a Bootstrap column class name is constructed as follows:

. {prefix} - {when to collapse} - {number of grid columns to occupy}

The prefix in the above is col , indicating that the element is a part of the Bootstrap column system.

The when to collapse option ( xs, sm, md or lg) indicate at what width the columns should stop being displayed inline and collapse to be positioned above each other instead.

The number of grid columns to occupy indicates how large portion of the whole row the classable element should occupy. A whole row is made up of a total of 12 columns in Bootstrap.

The collapsing widths are currently defined as follows:

  • xs - the grid is horizontal at all times, the container is styled as width: auto, meaning it will take up all the space currently available.
  • sm - the grid is horizontal past a breaking point of 750px of width.
  • md - ibid (as previously), but from 970px.
  • lg - ibid, but from 1170px.

Shortly put, the different collapsing options allow you to define at what width your layout should collapse: as a simplified explanation, at what window width the mobile view of the page (or similar) should be shown.

The documentation linked at the beginning of this reply also offers a number of examples.

Upvotes: 7

Related Questions