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







Share this page:
Follow us:
Task Runner