twitter-bootstrap Tutorial => Column layout changes of grid system...

Example

The first code block is written in Bootstrap 3. In Bootstrap 3 there are 4 types of column specifications, namely col-md-* col-lg-* col-sm-* col-xs-* . A fully responsive layout will look like this in Bootstrap 3:

<div class="row">
    <div class="col-lg-4 col-md-8 col-sm-8 col-xs-8">
        contents
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        contents
    </div>
</div>

In Bootstrap 4, they have added a new sm grid tier below 768px for more granular control. So Bootstrap 4 has col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-*. So what used to be .col-md-6 in v3 is now .col-lg-6 in v4. Notice that the -xs infix has been removed so .col-6 represent 6 column units at the extra small (default) breakpoint.

So, if we now want to write the same above example in Bootstrap 4, it would look like this:

<div class="row">
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8">
        contents
    </div>
    <div class="col-xl-8 col-lg-8 col-md-4 col-sm-4 col-4">
        contents
    </div>
</div>