{"id":1414,"date":"2018-06-14T17:09:03","date_gmt":"2018-06-14T21:09:03","guid":{"rendered":"http:\/\/id-demos.cms-devl.bu.edu\/core-3\/?page_id=1414"},"modified":"2021-11-11T16:53:19","modified_gmt":"2021-11-11T21:53:19","slug":"bootstrap-grid-classes","status":"publish","type":"page","link":"https:\/\/id-demos.cms-devl.bu.edu\/core-3\/html-elements\/grid\/bootstrap-grid-classes\/","title":{"rendered":"Bootstrap Grid Classes"},"content":{"rendered":"

Responsive Foundation uses a modified version of the Bootstrap grid system. W3schools has some great documentation on that here<\/a>. Bootstrap is set up so that you use two classes together to create a grid – your column class, which holds your content, and a row class that wraps around it so that the content lines up with the grid. The column classes rely on padding to create gutters, so putting a background on your row or column classes when using these classes will probably not give you the results you’re expecting to see. If you need to add a background, you probably want to use our custom margin classes instead.<\/p>\n

Example pages for testing<\/h2>\n\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Full width – all breakpoints<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Full width – $xs<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Full width – $sm<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Full width – $md<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Full width – $lg<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Content width – all breakpoints<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Content Width – $xs<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Content width – $sm<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Content width – $md<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Content width – $lg<\/a><\/h3>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n

Basic usage<\/h2>\n

Show backgrounds:<\/h3>\n

\n
\n
1<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
11<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
2<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
10<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
3<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
9<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
4<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
8<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
5<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
7<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
6<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
6<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
7<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
5<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
8<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
4<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
9<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
3<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
10<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
2<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
11<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n

\n
1<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

\n
\n
12<\/sup>\u204412<\/sub><\/div>\n

 <\/p>\n<\/div>\n<\/div>\n

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

One column<\/h3>\n

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

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