{"id":1387,"date":"2018-06-14T16:49:55","date_gmt":"2018-06-14T20:49:55","guid":{"rendered":"http:\/\/id-responsi.cms-devl.bu.edu\/kitchensink\/?page_id=1387"},"modified":"2018-06-14T17:09:32","modified_gmt":"2018-06-14T21:09:32","slug":"content-width-sm","status":"publish","type":"page","link":"https:\/\/id-responsi.cms-devl.bu.edu\/kitchensink\/grid\/bootstrap-grid-classes\/content-width-sm\/","title":{"rendered":"Content width – $sm"},"content":{"rendered":"

Show backgrounds:<\/h3>\n

\n
\n
1<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
11<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
2<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
10<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
3<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
9<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
4<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
8<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
5<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
7<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
6<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
6<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
7<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
5<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
8<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
4<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
9<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
3<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
10<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
2<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
11<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n

\n
1<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

\n
\n
12<\/sup>⁄12<\/div>\n

<\/sub><\/div>\n<\/div>\n

grid-example-show-boundaries <\/p>\n

One column<\/h3>\n

Example<\/h4>\n
\n
\n
1<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
11<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n

Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-1">Your HTML here<\/div>\r\n\t<div class="col-sm-11">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Two columns<\/h3>\n
Example<\/h4>\n
\n
\n
2<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
10<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-2">Your HTML here<\/div>\r\n\t<div class="col-sm-10">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Three columns<\/h3>\n
Example<\/h4>\n
\n
\n
3<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
9<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-3">Your HTML here<\/div>\r\n\t<div class="col-sm-9">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Four columns<\/h3>\n
Example<\/h4>\n
\n
\n
4<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
8<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-4">Your HTML here<\/div>\r\n\t<div class="col-sm-8">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Five columns<\/h3>\n
Example<\/h4>\n
\n
\n
5<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
7<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-5">Your HTML here<\/div>\r\n\t<div class="col-sm-7">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Six columns<\/h3>\n
Example<\/h4>\n
\n
\n
6<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
6<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-6">Your HTML here<\/div>\r\n\t<div class="col-sm-6">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Seven columns<\/h3>\n
Example<\/h4>\n
\n
\n
7<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
5<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-7">Your HTML here<\/div>\r\n\t<div class="col-sm-5">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Eight columns<\/h3>\n
Example<\/h4>\n
\n
\n
8<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
4<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-8">Your HTML here<\/div>\r\n\t<div class="col-sm-4">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Nine columns<\/h3>\n
Example<\/h4>\n
\n
\n
9<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
3<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-9">Your HTML here<\/div>\r\n\t<div class="col-sm-3">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Ten columns<\/h3>\n
Example<\/h4>\n
\n
\n
10<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
2<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-10">Your HTML here<\/div>\r\n\t<div class="col-sm-2">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Eleven columns<\/h3>\n
Example<\/h4>\n
\n
\n
11<\/sup>⁄12<\/sub><\/div>\n<\/div>\n
\n
1<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-11">Your HTML here<\/div>\r\n\t<div class="col-sm-1">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n
Twelve columns<\/h3>\n
Example<\/h4>\n
\n
\n
12<\/sup>⁄12<\/sub><\/div>\n<\/div>\n<\/div>\n
Code snippet<\/h4>\n
\r\n<div class="row">\r\n\t<div class="col-sm-12">Your HTML here<\/div>\r\n<\/div>\r\n<\/pre>\n