Bootstrap4を実際に書き始めるまでの基礎をまとめました。

CDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

　
前提として、Bootstrapの要素はbody直下にcontainerクラスのdivで囲います。

marginとpadding

Bootstrapでは、クラスを用いてmarginとpaddingを表し、プロパティ上下左右-サイズの型で記述します。(例: mt-4 , p-auto)

プロパティ	内容	上下左右	内容	サイズ	内容
m	margin	t	top	0	0
p	padding	b	bottom	1	*0.25
		l	left	2	*0.5
		r	right	3	*1
		x	left,right	4	*1.5
		y	top,bottom	5	*3
			top,bottom,left,right	auto	auto

グリッドシステム

Bootstrapでは、要素の横1行をrowクラスのdivタグで区切り、12等分した1列をカラムと呼びます。

カラムは、クラス名にcol-画面サイズ-サイズの型で記述します。(例: col-md－6 , col-10)

画面サイズ	内容	サイズ	内容
	<540px	1	1/12rem
sm	540px	2	2/12rem
md	720px	3	3/12rem
lg	960px	4	4/12rem
xl	1140px	...
offset	余白	12	1rem

参考文献

詳しい内容やコンポーネントは公式ドキュメントが参考になります↓ ↓
公式ドキュメント