Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Max column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets N/A Yes
Column ordering N/A Yes

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .ro

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

example of the columns with text

1/1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit erat non neque imperdiet ut lacinia purus varius. Phasellus lobortis lacus vitae lectus elementum id tincidunt sapien condimentum. Etiam interdum erat id felis varius varius. Maecenas diam massa, semper id gravida et.Quisque congue tristique turpis non egestas. Morbi vestibulum, odio eget luctus auctor, purus ipsum sollicitudin eros, quis mollis felis nulla quis nulla. Nam eget risus et felis pharetra sollicitudin ut facilisis justo. Mauris non libero eget nibh convallis convallis nec eget tortor.

1/2 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio. Etiam neque neque, facilisis sed consequat vitae, ornare sed. Phasellus cursus mollis nunc, eget vehicula enim elementum sit amet. Duis nec nunc justo, non aliquam orci. Nulla ornare, sapien in commodo

1/2 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio. Etiam neque neque, facilisis sed consequat vitae, ornare sed. Phasellus cursus mollis nunc, eget vehicula enim elementum sit amet. Duis nec nunc justo, non aliquam orci. Nulla ornare, sapien in commodo

1/3 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio. Etiam neque neque, facilisis sed consequat vitae, ornare sed.

1/3 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio. Etiam neque neque, facilisis sed consequat vitae, ornare sed.

1/3 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio. Etiam neque neque, facilisis sed consequat vitae, ornare sed.

1/4 Aliquam tempus magna ac turpis conse quat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed.

1/4 Aliquam tempus magna ac turpis conse quat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed.

1/4 Aliquam tempus magna ac turpis conse quat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed.

1/4 Aliquam tempus magna ac turpis conse quat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed.

1/3 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio.

2/3 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio. Etiam neque neque, facilisis sed consequat vitae, ornare sed. Phasellus cursus mollis nunc, eget vehicula enim elementum sit amet. Duis nec nunc justo, non aliquam orci. Nulla ornare, sapien in commodo.

2/3 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio. Etiam neque neque, facilisis sed consequat vitae, ornare sed. Phasellus cursus mollis nunc, eget vehicula enim elementum sit amet. Duis nec nunc justo, non aliquam orci. Nulla ornare, sapien in commodo.

1/3 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio.

3/4 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien. Vestibulum a nulla sit amet felis gravida blandit ut sed odio. Etiam neque neque, facilisis sed consequat vitae, ornare sed. Phasellus cursus mollis nunc, eget vehicula enim elementum sit amet. Duis nec nunc justo, non aliquam orci. Nulla ornare, sapien in commodo vulputate ornare mollis nunc id tortor felis gravida.

1/4 Aliquam tempus magna ac turpis consequat luctus. Sed erat sapien, porttitor non hendrerit non, mollis a sapien.