Layout options - Layouts

Aprox

Dashboards
Layouts
ELEMENTS
Typography
User inteface
- Buttons
- Badges
- Button groups
- Dropdowns
- Navs
- Pagination and breadcrumbs
- Progress bars
- List groups
- Notifications
- Modals
- Tooltips and popovers
- Thumbnails
- Cards
- Accordion
- App brand
- Navbar
- Sidenav
- Footer
- Carousel
- Lightbox
- Drag&Drop
- Treeview
- Plyr
- Cropper.js
- Bootstrap tour
- Fullcalendar
Forms
Tables
Charts
- GMaps
- Mapael
- Flot.js
- C3.js
- Chartist
- Chart.js
- Morris.js
- Sparkline
Icons
Miscellaneous
- Masonry
- SpinKit
- Ladda
- Vegas.js
- Numeral.js
- BlockUI
- Idle Timer
- Perfect Scrollbar
- Clipboard.js
EXTRAS
Pages

59
- Articles
  - List
  - Edit
- Authentication
  - Login v1
  - Register v1
  - Login v2
  - Register v2
  - Login v3
  - Register v3
  - Login + Register
  - Lock screen v1
  - Lock screen v2
  - Password reset
  - Email confirm
- Education
  - Courses v1
  - Courses v2
- E-commerce
  - Product list
  - Product item
  - Product edit
  - Order list
  - Order detail
- Forums
  - List
  - Threads
  - Discussion
- Messages v1
  - List
  - Item
  - Compose
- Messages v2
  - List
  - Item
  - Compose
- Messages v3
  - List
  - Item
  - Compose
- Projects
  - List
  - Item
- Tickets
  - List
  - Edit
- Users
  - List
  - View
  - Edit
- Account settings
- Chat
- Clients
- Contacts
- FAQ
- File manager
- Gallery
- Help center
- Invoice
- Kanban board
- Pricing
- Profile v1
- Profile v2
- Search results
- Task list
- Teams
- Vacancies
- Voting
Complete UI
- Base
- Plugins
- Charts

Layouts / Layout options

You can configure the initial layout by setting control classes to the html element. See also layout helpers.

<html class="layout-fixed layout-collapsed">
  ...
</html>

After the initial layout setup the recommended way to control layout options is layout helpers, because the helpers do some extra work, such as: setting container paddings (when navbar is fixed), performing layout animations, setting correct sidenav state classes depending on screen size etc.

.layout-reversed

Reverse layout direction without markup change.

.layout-expanded

Expand layout sidenav on small screens (< 992px).

.layout-collapsed

Collapse layout sidenav on large screens (>= 992px).

.layout-offcanvas

Make layout sidenav offcanvas.

.layout-fixed

Set layout position to fixed.

.layout-fixed-offcanvas

Set layout position to fixed with offcanvas sidenav.

.layout-navbar-fixed

Set layout navbar position to fixed.

.layout-footer-fixed

Set layout footer position to fixed.