Layouts

Simple Layouts.

Related Topics:

Standart:

Header

Content

Example:


<head>
  <meta charset="utf-8">
  <!-- ... -->
</head>
<body>
  <div class="wrapper">
    <header>
      <!-- Header -->
    </header>
    <div class="content-wrapper">
      <!-- Content -->
    </div>
  </div>
</body>

With Footer:

Header

Content

Footer

Example:


<head>
  <meta charset="utf-8">
  <!-- ... -->
</head>
<body>
  <div class="wrapper">
    <header>
      <!-- Header -->
    </header>
    <div class="content-wrapper">
      <!-- Content -->
    </div>
  </div>
</body>

With Sidebar:

Header

Sidebar

Content

Example:


<head>
  <meta charset="utf-8">
  <!-- ... -->
</head>
<body>
  <div class="wrapper">
    <header>
      <!-- Header -->
    </header>
    <div class="sidebar-open-button">
      <!-- Sidebar Button  -->
      <div class="button-burger"><span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span></div>
    </div>
    <div class="sidebar">
      <div class="container">
        <div class="sidebar-content">
          <!-- Sidebar Content  -->
        </div>
      </div>
    </div>
    <div class="content-wrapper content-wrapper--sidebar">
      <!-- Content -->
    </div>
  </div>
</body>

With Sidebar + Footer:

Header

Sidebar

Content

Footer

Example:


<head>
  <meta charset="utf-8">
  <!-- ... -->
</head>
<body>
  <div class="wrapper">
    <header>
      <!-- Header -->
    </header>
    <div class="sidebar-open-button">
      <!-- Sidebar Button  -->
      <div class="button-burger"><span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span></div>
    </div>
    <div class="sidebar">
      <div class="container">
        <div class="sidebar-content">
          <!-- Sidebar Content  -->
        </div>
      </div>
    </div>
    <div class="content-wrapper content-wrapper--sidebar">
      <!-- Content -->
      <footer>
        <!-- Footer -->
      </footer>
    </div>
  </div>
</body>

Usage container

Container

Usage container-fluid

Container-fluid