Layouts


Layouts help you to customize the main view of your app. There is 14 different layout views and we made it really simple to change layouts, by simply changing a class name your entire layout will change automatically and adopt to any screen.


  • Default Layout

    This is the default bootkit layout style.

    ...
    ...

  • Right side open by default

    To get this layout, add the class ui-content-compact to the id="content"

    ...
    ...
    ...

  • Left side white nav

    To get this layout, add the class ui-aside--light to the id="aside"

    ... ...

  • Right side overlay

    To get this layout, add the class ui-content-aside-overlay to the id="content"

    ...
    ...
    ...

  • Left side compact view

    To get this layout, add the class ui-aside-compact to the id="ui"

    ...

  • Left side compact right side open

    To get this layout, first add the class ui-aside-compact to the id="ui", second add the class ui-content-compact to the id="content"

    ...
    ...
    ...

  • Left side Dark

    To get this layout, add the class ui-aside--dark to the id="aside"

    ... ...

  • Left side full

    To get this layout, add the class navbar-header--default to the id="header" > navbar-header

    ...

  • Layout full width-height

    To get this layout, first add the class ui-fullWhith to the id="ui", second add the class u-padding0 to the id="content" > ui-content-body

    ...
    ...
    ...

  • Logo background contrast color

    To get this layout, add the class navbar-header--dark to the id="header" > navbar-header

    ...

  • Header green bg

    To get this layout, add the class ui-header--green text-white to the id="header"

    ...

  • Header purple bg

    To get this layout, add the class ui-header--purple text-white to the id="header"

    ...

  • Header blue bg

    To get this layout, add the class ui-header--blue text-white to the id="header"

    ...

  • Header blue bg

    To get this layout, add the class ui-header--dark text-white to the id="header"

    ...