Col(ui_col)Bootstrap Logo

UiBibz::Ui::Core::Layouts::Col

Grid systems are used for creating a series of columns that house your content. You can read about the doc : Bootstrap doc

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 col content, options, html_options 

 # or by block 
 col options, html_options do 
   content 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • lg[integer/hash]
  • md[integer/hash]
  • num[integer]
  • offset[integer]
  • order[integer]
  • pull[integer]
  • push[integer]
  • sm[integer/hash]
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • xl[integer/hash]
  • xs[integer/hash]
  • xxl[integer/hash]

Examples

Some examples explain how to use the options present in the component.

Col

Col 1
Col 2
ui_row class: "test" do
  ui_col do
    Col 1
  end
  ui_col "Col 2"
end

<div class="test row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
</div>

Options

A column can take several arguments [Hash/Integer]:

  • num - Integer/Symbol (1..12 || :auto)
  • offset - Integer (1..12)
  • pull - Integer (1..12)
  • push - Integer (1..12)
Col 1
Col 2
Col 3
Col 4 
ui_row class: "test" do
  ui_col 3 do
    Col 1
  end
  ui_col({ num: 10, offset: 2 }, { class: "test-col" }) do
    Col 2
  end
  ui_col "Col 3", { num: 2, pull: 4 }, { class: "test-col2" }
  ui_col md: 4 do
    Col 4
  end
end

<div class="test row">
  <div class="col-3">Col 1</div>
  <div class="test-col col-10 offset-2">Col 2</div>
  <div class="test-col2 col-2 col-pull-4">Col 3</div>
  <div class="col-md-4">Col 4</div>
</div>

Col with differents sizes

To add multiple sizes of columns, you must use arguments :

  • lg[integer/hash]
    • num[integer](1..12 || :auto)
    • offset[integer](1..12)
    • pull[integer](1..12)
    • push[integer](1..12)
  • md[integer/hash]
    • num[integer](1..12 || :auto)
    • offset[integer](1..12)
    • pull[integer](1..12)
    • push[integer](1..12)
  • num[integer]
  • sm[integer/hash]
    • num[integer](1..12 || :auto)
    • offset[integer](1..12)
    • pull[integer](1..12)
    • push[integer](1..12)
  • xl[integer/hash]
    • num[integer](1..12 || :auto)
    • offset[integer](1..12)
    • pull[integer](1..12)
    • push[integer](1..12)
  • xs[integer/hash]
    • num[integer](1..12 || :auto)
    • offset[integer](1..12)
    • pull[integer](1..12)
    • push[integer](1..12)
  • xxl[integer/hash]
    • num[integer](1..12 || :auto)
    • offset[integer](1..12)
    • pull[integer](1..12)
    • push[integer](1..12)
Col 1
Col 2
ui_row class: "test" do
  ui_col(md: { num: 5, offset: 2 }, xs: { num: 2 }) do
    Col 1
  end
  ui_col "Col 2", { md: { num: 7, pull: 4 }, xs: { num: 10 }}, { class: "test-col2" }
end

<div class="test row">
  <div class="col-md-5 offset-md-2 col-xs-2">Col 1</div>
  <div class="test-col2 col-md-7 col-md-pull-4 col-xs-10">Col 2</div>
</div>