Col
The Bootstrap column component, implemented in Ruby.

bs_col(*args, &block)

Returns a bootstrap column containing content specified by a block. Also the column is customizable with the following options.
Optional options
  • sm, md, lg, xl, xxl: Expects an Integer <= 12. This parameter set the size of the column by the given breakpoint
  • default - Expects an Integer <= 12. default: 12 is equal to col-12 in bootstrap
  • order, order_sm, order_md, order_lg, order_xl, order_xxl: Expects an Integer <= 12. Set the order of the column by the given breakpoint
  • offset, offset_sm, offset_md, offset_lg, offset_xl, offset_xxl: Expects an Integer <= 12. Move columns to the right using offset parameter by the given breakpoint
  • align_self - Expects start, center, end. Align vertically within the column
HTML attributes This component accepts all the canonical HTML global attributes like id or class.

Examples

Example 1: Basic

1
bs_row do
2
bs_col md: 12, lg: 6, xl: 4 do
3
# content here
4
end
5
end
Copied!
returns
1
<div class="row">
2
<div class="col-md-12 col-lg-6 col-xl-4">
3
<!-- Content here -->
4
</div>
5
</div>
Copied!

Example 2: Using offset option

1
bs_row do
2
bs_col md: 4 do
3
plain ".col-md-4"
4
end
5
bs_col md: 4, offset_md: 4 do
6
plain ".col-md-4 .offset-md-4"
7
end
8
end
Copied!
returns
1
<div class="row">
2
<div class="col-md-4">.col-md-4</div>
3
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
4
</div>
Copied!

Example 3: Using the order option

1
bs_row do
2
bs_col sm: 12, md: 6, xl: 3 do
3
plain "Column 1"
4
end
5
bs_col sm: 12, md: 6, xl: 3, order_md: 5 do
6
plain "Column 2"
7
end
8
bs_col sm: 12, md: 6, xl: 3, order_md: 1 do
9
plain "Column 3"
10
end
11
end
Copied!
returns
1
<div class="row">
2
<div class="col-sm-12 col-md-6 col-xl-4">
3
Column 1
4
</div>
5
<div class="col-sm-12 col-md-6 col-xl-4 order-md-5">
6
Column 2
7
</div>
8
<div class="col-sm-12 col-md-6 col-xl-4 order-md-1">
9
Column 3
10
</div>
11
</div>
Copied!
Last modified 4mo ago