Drift BootStrap 4, HTML, jQuery
  • Overview
  • Installation and Setup
    • Setup
    • Folders and Files Structure
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Input Group
    • Jumbotron
    • List Group
    • Navbar
    • Navs & Tabs
    • Pagination
    • Progress Bar
    • Scrollspy
    • Typography
  • Classic Version
    • Setup
    • Folders and Files Structure
    • Theme Customizaton
    • RTL Version
Powered by GitBook
On this page

Was this helpful?

  1. Stylesheets

Layouts & Theme

Classes related to layouts

This section covers the documentation about the classes which builds the layout or could be used to customize the layout as per your need.

The following classes could be applied to <body> tag to achieve the desired layout for your project:

/* Layout Related Classes
-------------------------------- */
/* Below is a unique class for default layout. For other layouts, 
you can replace default (after --) with the name of those layouts.
for example .dt-layout--crm */
.dt-layout--default  



/* Sidebar Related Classes (Only for layouts with sidebar)
-------------------------------- */
/* To fix the sidebar */
.dt-sidebar--fixed   

/* To make the sidebar folded */
.dt-sidebar--folded  

/* To expend the sidebar
(Drift uses this on on-hover event when the sidebar is in folded mode) */
.dt-sidebar--expended  



/* Header Related Classes (Only for default layouts)
-------------------------------- */
/* To fix the header */
.dt-header--fixed   



/* Framing Related Classes 
--------------------------------- */
/* To make the framing fluid */
.dt-layout--full-width  

/* To make the framing covered from all four sides */
.dt-layout--framed   

/* To make the framing in boxed style (or fixed width) */
.dt-layout--boxed    



/* Theme Related Classes (only for default layout)
---------------------------------- */
/* To apply the semi-dark theme */
.theme-semidark      

/* To apply the light theme */
.theme-light         

/* To apply the dark theme */
.theme-dark          

The following classes are related to the layouts with drawer and will be applied to sidebar:

/* to convert the sidebar into drawer */
.dt-drawer

/* To switch the drawer position either right or left */
.position-right
.position-left

PreviousSass VariablesNextFonts

Last updated 5 years ago

Was this helpful?