Ibox Layout component

The component displays a box with a header. The box can have other components inside it. The ibox creates a group of the enclosed components. The ibox can be a simple box, or a collapsible box. If set to be collapsible, an icon will appear on the right side of the header, that when clicked on, opens/closes the box. If a box is closed, the box will have the size of the header height, thus freeing up space on the interface.

Component(s) can be placed on the IBox header, thus allowing the placement of additional buttons, icons, that can have custom functionalities.

Supported events:

Show, Hide, Animation, Click, MouseEvents, Scroll, Touch, Drag&Drop

Style customization


Default value

Derived value

Computed value


$ibox-title-bg-color $gray-100 $ibox-title-bg-color-->$gray-100-->#f8f9fa #f8f9fa Ibox header background color.
$ibox-content-bg-color $white $ibox-content-bg-color-->$white-->#fff #fff Ibox content background color.
$ibox-color inherit inherit Ibox default font color.
$ibox-title-color $ibox-color $ibox-title-color-->$ibox-color-->inherit inherit Ibox header default font color.
$ibox-content-color $ibox-color $ibox-content-color-->$ibox-color-->inherit inherit Ibox content default font color.
$ibox-margin-bottom 0 0 Ibox lower margin.
$ibox-margin 0 0 $ibox-margin-bottom 0 $ibox-margin-->0 0 $ibox-margin-bottom 0-->0 0 1.5rem 0 0 0 1.5rem 0 Ibox margin.
$ibox-padding 0 0 Ibox padding.
$ibox-border 1px solid $ibox-border-color $ibox-border-->1px solid $ibox-border-color-->1px solid $border-color-->1px solid $gray-200-->1px solid  #e9ecef 1px solid  #e9ecef Ibox frame.
$ibox-title-border-color $ibox-border-color $ibox-title-border-color-->$ibox-border-color-->$border-color-->$gray-200-->#e9ecef #e9ecef Ibox title frame.
$ibox-title-border-style none none Ibox title frame style.
$ibox-title-border-width 0 0 Ibox title frame width.
$ibox-title-padding $spacer $spacer ($spacer * 0.5) $ibox-title-padding-->$spacer $spacer ($spacer * 0.5)-->1rem 1rem (0.5rem) 1rem 1rem (0.5) Ibox title padding.
$ibox-title-min-height $ibox-title-text-font-size * 3 $ibox-title-min-height-->$ibox-title-text-font-size * 3-->$font-size-lg * 3-->$font-size-base * 1.25 * 3-->1rem * 1.25 * 3 3.75rem Ibox title minimum row height.
$ibox-title-text-font-weight 600 600 Ibox title font weight.
$ibox-title-text-margin 0 0 ($spacer * 0.5) 0 $ibox-title-text-margin-->0 0 ($spacer * 0.5) 0-->0 0 (1rem * 0.5) 0 0 0 (0.5rem) 0 Ibox title margin.
$ibox-title-text-font-size $font-size-lg $ibox-title-text-font-size-->$font-size-lg-->$font-size-base * 1.25-->1rem * 1.25 1.25rem Ibox title font size.
$ibox-content-border-color $ibox-border-color $ibox-content-border-color-->$ibox-border-color-->$border-color-->$gray-200-->#e9ecef #e9ecef Ibox content frame color.
$ibox-content-border-style solid solid none solid solid none Ibox content frame style.
$ibox-content-border-width 1px 0 1px 0 Ibox content frame width.
$ibox-content-padding $spacer $ibox-content-padding-->$spacer-->1rem 1rem Ibox content padding.
$ibox-content-font-size inherit inherit Ibox content default font size.
$ibox-tools-color $gray-400 $ibox-tools-color-->$gray-400-->#ced4da #ced4da Ibox tools icon color.
$ibox-tools-margin-left $spacer * 0.5 $ibox-tools-margin-left-->$spacer * 0.5-->1rem * 0.5 0.5rem Spacing between ibox tools icons.
$ibox-border-color $border-color $ibox-border-color-->$border-color-->#e9ecef #e9ecef IBox frame color.

Related pages