Inside of your row you will create the columns using the col class. This example will create 3 columns of equal width.
<div class="row">
<div class="col">content</div>
<div class="col">content</div>
<div class="col">content</div>
</div>
Even if there is only one column, you should still create a column inside the row.
You can specify numbers after the “col” to make the column take up X spaces in the 12 column grid. In this example, the first column takes up 2 spaces, the third takes up 6 spaces, and the third takes up 4 spaces
<div class="row">
<div class="col-2">content</div>
<div class="col-6">content</div>
<div class="col-4">content</div>
</div>
To center all columns inside a row if the total of the columns is less than 12, use the justify-content-center class
<div class="row justify-content-center">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
You can also do justify-content-end, justify-content-start, justify-content-around, and justify-content-between.
Move columns to the right using .offset-x classes. These classes increase the left margin of a column by x columns. For example, offset-4 moves col-4 over four columns.
<div class="row">
<div class="col-4">text</div>
<div class="col-4 offset-4">text</div>
</div>
To nest your content, add a new .row and set of columns within an existing column. Nested rows should include a set of columns that add up to 12 or fewer.
<div class="row">
<div class="col-9">Level 1: .col-9
<div class="row">
<div class="col-8">Level 2: .col-8</div>
<div class="col-4">Level 2: .col-4</div>
</div>
</div>
</div>
Don't forget to use your HTML5 elements where applicable (instead of a div). The row and column classes can be attached to any “box.”
<aside class="col-3">
</aside>
<header class="row">
</header>
Padding is the space around your content inside of a column. In Bootstrap, each column has 15 pixels of horizontal padding by default NO MATTER what the size of the column or grid is. You can adjust the size of the padding by using these classes: p-0, p-1, p-2, p-3, p-4, p-5
<!--
p-0 removes all padding from all sides of the column
p-3 is the default size
p-5 adds the most padding you can have
p-1, p-2, and p-4 are sizes in between
-->
<div class="col p-4">
You can also control the padding for each size individually, or by the x axis (both right and left sides) and y axis (both top and bottom). This example sets a different padding size for each side (pt is for padding top, pr is for padding right, etc.) and shows how to do it specifying the axis:
<div class="col pt-2 pr-5 pb-1 pl-0"> </col>
<div class="col px-2 py-5"> </col>
Margin, or the space between columns, works the same way. Just replace the "p" in the class names with an "m":
<div class="col m-4"> </col>
<div class="col mt-4 mr-0"> </col>
<div class="col mx-2"> </col>