Bootstrap4 colの隙間（padding、margin）を削除する（サンプル付き）

Bootstrap4でデザインを忠実に再現したい時に、colの隙間（padding）が邪魔なときがあります。
この邪魔な隙間を無くしてしまおう！というのが今回の趣旨です。

サンプルも作りました。

CSSで隙間を削除するクラスを作り、そのクラス以下のcolはpaddingやmarginが削除されるようにします。

まずはCSSを作りましょう！

Bootstrap4 colの隙間（padding、margin）を削除する（CSS）

「no-gutters」というクラスを作り「padding」と「margin」を「0」にします。
次に「no-gutters」以下の「col」と「[class*=”col-“]」（col-1〜col-12）にも同じように「padding」と「margin」を「0」にします。

これで準備完了ですね。
後はこのクラスをHTMLにセットするだけでOKです。

Bootstrap4 colの隙間（padding、margin）を削除する（HTML）

これで「no-gutters」クラス以下のcolの隙間が削除されました！

後はデザイン通りにコーディングしていけばOKですね。
良ければサンプルも見てくださいね。