Bootstrap Grid Examples
< View Code Snippets Library
Multiple Column Grid Block List Using Flexbox
All Bootstrap VersionsThis code example uses flexbox to create a grid of list items. You can specify two, three, or four columns by adjusting the list item width.
Bootstrap 4 Vertical Align and Absolute Center
Bootstrap 4This demonstrates how to use the Bootstrap flexbox utility classes to perform some common layout cases: vertical alignment and both vertical and horizontal centering of content. It is important to set the body and html to 100% and give your parent container some height. Get Flexbox Cheat Sheet
Responsive Containers Example
Bootstrap 4This example demonstrates how to add Bootstrap responsive container classes to control when your grid should be 100% and then change to a max width. Read Docs
Responsive Card Deck Example
Bootstrap 4Responsive Card Deck Using Bootstrap 4 Row Column Classes
This example demonstrates how you can use the responsive row classes to quickly build a responsive grid for multiple cards or columns. Read Docs
Vertically Centered Text with Bootstrap 4 Flexbox
Bootstrap 4Bootstrap 4 flexbox utility classes allow you to quickly add CSS flexbox to anything. A common design challenge of vertically centering text can be achieved easily with a few flexbox utility classes.
Apple Like Content Section – Image Vertical Centered Text
Bootstrap 4Sample code to have alternating rows of image and vertical centered text. Similar to what is seen on the Apple website.
Row Background Color Full Width
Bootstrap 4There is a design trend to have horizontal background colors with the content set to a max-width. The way I achieve this effect is using a section tag with a background color set to it.
section.bg-primary > .container > .row > .col-sm-6
Bootstrap Grid Examples and Tutorial
Bootstrap 3 Bootstrap 4A collection of Bootstrap grid examples used in page layouts.
Looking for something else?
Suggest or contribute a code snippet to be added to the library.
Other Code Snippet Categories