bootstrap-layout/docs/src/html/pages/index.html

Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities

---
title: Getting started
slug: home
---
{% extends "layouts/default.html" %}
	
{% block page %}
{% markdown %}
# bootstrap-layout

Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities for Bootstrap 4.

## Installation
> Simple install via npm:

```bash
npm install bootstrap-layout
```
{% endmarkdown %}

<h2>Styling</h2>
<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#css" data-toggle="pill" class="nav-link active">CSS</a>
    </li>
    <li class="nav-item">
      <a href="#sass" data-toggle="pill" class="nav-link">Sass</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="css">
      {% include 'code/installation/css.html' %}
    </div>
    <div class="tab-pane" id="sass">
      {% include 'code/installation/sass.html' %}
    </div>
  </div>
</div>

<h2>JavaScript</h2>
<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#js-static" data-toggle="pill" class="nav-link active">Global</a>
    </li>
    <li class="nav-item">
      <a href="#js-es6" data-toggle="pill" class="nav-link">ES6</a>
    </li>
    <li class="nav-item">
      <a href="#js-browserify" data-toggle="pill" class="nav-link">Browserify</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="js-static">
      {% include 'code/installation/js-static.html' %}
    </div>
    <div class="tab-pane" id="js-es6">
      {% include 'code/installation/js-es6.html' %}
    </div>
    <div class="tab-pane" id="js-browserify">
      {% include 'code/installation/js-browserify.html' %}
    </div>
  </div>
</div>

<h2>Boilerplates</h2>
<blockquote>
  Project starter setups using Bootstrap Layout.
</blockquote>

<ul class="list-unstyled list-group-menu">
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-npm">bs-layout-boilerplate-npm</a> <br>
    Basic npm setup (no build system)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-gulp">bs-layout-boilerplate-gulp</a> <br>
    Basic gulp setup (compile Sass, import Sass files from npm packages, customize colors)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-gulp-advanced">bs-layout-boilerplate-gulp-advanced</a> <br>
    Advanced gulp setup (compile Sass, import Sass files from npm packages, customize colors, minify CSS, autoprefixer, sourcemaps, browserify mo
  dule system, file watchers)</li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-laravel">bs-layout-boilerplate-laravel</a> <br>
    <strong>Laravel</strong> application setup (gulp, Laravel Elixir, Sass, browserify)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-rails">bs-layout-boilerplate-rails</a> <br>
    <strong>Rails</strong> application setup (Asset Pipeline)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-angular2">bs-layout-boilerplate-angular2</a> <br>
    <strong>Angular 2</strong> application setup (TypeScript, SystemJS)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-vue">bs-layout-boilerplate-vue</a> <br>
    <strong>Vue.js</strong> application setup (Webpack)
  </li>
</ul>

{% endblock %}