کلاس‌های .gx-* برای کنترل فاصله‌های افقی بین ستون‌ها استفاده می‌شوند. ممکن است نیاز باشد عنصر والد مثل .container یا .container-fluid نیز با استفاده از کلاس‌های padding مناسب تنظیم شود تا از بروز overflow ناخواسته جلوگیری گردد. برای مثال، در مثال زیر padding با کلاس .px-4 افزایش یافته است:
راه‌حل جایگزین این است که یک عنصر پوشاننده دور .row قرار دهید و از کلاس .overflow-hidden استفاده کنید:
کلاس‌های .gy-* برای کنترل فاصله‌های عمودی بین ردیف‌ها استفاده می‌شوند. مانند فاصله‌های افقی، این فاصله‌ها نیز ممکن است در انتهای صفحه باعث overflow به پایین شوند. در صورت بروز این مشکل، می‌توانید یک عنصر پوشاننده دور .row اضافه کنید و از کلاس .overflow-hidden استفاده نمایید:
کلاس‌های .g-* برای کنترل فاصله‌های افقی و عمودی استفاده می‌شوند. در مثال زیر از فاصله‌های کوچک‌تری استفاده شده، بنابراین نیازی به کلاس .overflow-hidden نیست.
می‌توان کلاس‌های gutter را روی ردیف‌های ستونی هم اعمال کرد. در مثال زیر از ستون‌های واکنش‌گرا و کلاس‌های gutter واکنش‌گرا استفاده شده است.
برای حذف فاصله بین ستون‌ها در سیستم گرید، می‌توان از کلاس .g-0 استفاده کرد. این کلاس marginهای منفی از .row و padding افقی از ستون‌های داخلی را حذف می‌کند.
برای طراحی از لبه به لبه، می‌توان .container یا .container-fluid را حذف کرد و از کلاس .mx-0 روی .row استفاده کرد تا از overflow جلوگیری شود.
در عمل، نتیجه به این صورت است. توجه داشته باشید که می‌توانید این روش را با تمام کلاس‌های گرید از پیش تعریف‌شده ترکیب کنید.