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.
