Container(ui_container)Bootstrap Logo

UiBibz::Ui::Core::Layouts::Container

Grid systems are used for creating page layouts. You can read about the doc : Bootstrap doc

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)
  • 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)

Examples

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

Container

container 
ui_container class: "test" do
  ...
  content
  ...
end

<div class="test container">
  ...
  content
  ...
</div>

Type

fluid container 
ui_container content, { type: :fluid }, { class: "test-2" }

<div class="test-2 container-fluid">
  content
</div>

Size

To add multiple sizes of the container, you must use arguments :

  • :xxl
  • :xl
  • :lg
  • :md
  • :sm
  • :xs
breakpont container 
ui_container content, { size: :sm }, { class: "test-2" }

<div class="test-2 container-sm">
  content
</div>