CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
cloudysky
cloudysky

Reputation: 23

Bootstrap Grid Class Usage

Regarding this example of making a responsive list of <ul> and <li>, I don't understand the principle of the following line:

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">

which makes the responsive design of lists happen. I understand each class among the four, but not their function when combined.

Upvotes: 1

Views: 49

Answers (2)

ashleyr
ashleyr

Reputation: 36

Since you mentioned you know some of them, I assume the following ones (i.e the bootstrap grid layout which is 12 columns):

col-xs-12 => Take full width for size extra small
col-sm-10 => width 10/12 width for small
col-md-8 => width 8/12 width for medium

The remaining ones:

col-sm-offset-1 => put a margin of 1 col width on the left for small
col-md-offset-2 => put a margin of 2 cols with on the left for medium

Upvotes: 2

Sensoray
Sensoray

Reputation: 2430

Full width when the screen size is xs, 10 column widths at size small - pushed over by 1 column, 8 column width at size medium - pushed over by 2 columns.

The sm and md in the offset classes tells you which size it is affecting. So .col-md-offset-2 means that of the 12 grid columns across the screen, the col-md-8 is going to start 2 columns over, so it starts in the 3rd column position. taking up 3-12, 8 columns in total.

Upvotes: 1

Related Questions