SyntaxStudy
Sign Up

.col-*

class

Grid column classes. Numbers 1-12 define width. Breakpoints: xs (default), sm, md, lg, xl, xxl.

Syntax

<div class="col-sm-6 col-md-4 col-lg-3">

Example

html
<div class="row">
    <!-- Full width mobile, half on tablet+ -->
    <div class="col-12 col-md-6">Column 1</div>
    <div class="col-12 col-md-6">Column 2</div>
</div>

<div class="row">
    <!-- Auto-width equal columns -->
    <div class="col">Auto</div>
    <div class="col">Auto</div>
    <div class="col-6">Half</div>
</div>