Bootstrap - Column

About

The UI - Column system in Bootstrap is build with CSS - Flex Box

Syntax

• ClassName Syntax

col
/* or */
col-{length}

where:

• length is number between 0-24 that defines the length weight of the column

Example

For a 12 columns grid, col-8 will take 2 more space than a col-4

.row {
  border: 1px solid #ccc;
  background-color: #ddd;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Documentation / Reference

• https://getbootstrap.com/docs/4.1/layout/grid/