Bootstrap Custom CSS Test Page

This page tests all the Bootstrap classes we're using in the CTWR website.

Grid System Test

col-12 (100%)

col-6 (50%)

col-6 (50%)

col-4 (33%)

col-4 (33%)

col-4 (33%)

col-md-6 (50% on tablet+)

col-md-6 (50% on tablet+)

col-lg-7 (58% on desktop+)

col-lg-5 (42% on desktop+)

Flexbox Utilities Test

Centered with d-flex + justify-content-center + align-items-center

Spacing Utilities Test

mt-4 (margin-top: 1.5rem)

mb-3 (margin-bottom: 1rem)

mt-5 mb-5 (margin-top/bottom: 3rem)

Text Utilities Test

text-center - This text should be centered

text-decoration-underline - This text should be underlined

Button Base Styles Test

File Size Comparison

File	Size	Reduction
css/bootstrap.css (old)	281 KB	-
css/bootstrap.min.css (old)	237 KB	-
css/bootstrap-custom.css (new)	3 KB	-278 KB (99%)

Resize Test

Resize your browser window to test responsive grid breakpoints:

Small (< 576px): Mobile phones
Medium (≥ 768px): Tablets - col-md-* classes activate
Large (≥ 992px): Desktops - col-lg-* classes activate
Extra Large (≥ 1200px): Large desktops - container max-width increases