Bootstrap Grid Examples

• 

  Vertically Centered Text with Bootstrap 4 Flexbox

  Bootstrap 4

  Bootstrap 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 4

  Sample 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 4

  There 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 4

  A collection of Bootstrap grid examples used in page layouts.

Other Code Snippet Categories

• Buttons

• Cards

• Carousels

Code Tools

• Collapse

Content Sections

• Dropdowns

• Forms

• Grid

• Images

• JavaScript

• Jumbotron

• Lists

• Modals

• Navbars

• Page Layouts

• Social Media

• Tables

• Tabs

• Utilities