Light Bootstrap Dashboard PRO Laravel

License

Currently, on Creative Tim you can get the products with three types of licenses: MIT License, Personal License or Developer License. All the freebies are licensed to MIT License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what license is the best fit for you (Personal License or Developer License). View the rights table and the description for each license on our Official License Page.

Login

The user must autenthicate before using the management dashboard. There are 3 credentials by default that can be used:

• [email protected], with the password secret
• [email protected], with the password secret
• [email protected], with the password secret

For logging in, the user can press the Login button in the top navbar or add /login to the url.

The App\Http\Controllers\LoginController handles the user's authentication.

If you input the wrong data when trying to authenticate, there are validation rules to check if the email and password are right and if the user has an account (see resources/views/alerts/errors.blade.php ).

@if (!$errors->isEmpty())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        @foreach ($errors->all() as $error)
            {{ $error }} <br>
        @endforeach
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
    </div>
@endif
                                    

Register

A new account can be created by a user with the help of the Create account button from the login page or the Register button from the top navabar or just by simply adding /register to the url. The user must provide the name, email, the user type - by default Admin, Author or Member - and a password.

The App\Http\Controllers\RegisterController handles the user's registration.

protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'role_id' => $data['role_id'],
        'password' => Hash::make($data['password']),
    ]);
}             
                                

The data introduced by the user is validated because the account needs a valid email address and the password and password confirmation to match.

protected function validator(array $data)
{
    return Validator::make($data, [
        'name' => ['required', 'string', 'min:3', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'role_id' => ['required'],
        'password' => ['required', 'string', 'min:6', 'confirmed'],
        'agree' =>['required']
    ]);
}
                                    

Recover Password

In the case of an user forgetting the credentials there is the possibility of resetting them. For resetting the password the user should use the Forgot password? button from the login page or by adding /passowrd/reset. The user must provide the email for the account and after that a link will be sent for resetting the password to the provided mail address.

Also, the resources/views/auth/passwords and resources/views/auth/reset take care of resetting the password.

Profile edit

You have the option to edit the current logged in user's profile information (name, email, profile picture) and password. To access this page, just click the "Examples/Profile" link in the left sidebar or add /profile in the URL.

The App\Http\Controllers\ProfileController handles the update of the user information and password.

                                        
public function update(ProfileRequest $request)
{
    auth()->user()->update(
        $request->merge(['picture' => $request->photo ? $request->photo->store('profile', 'public') : null])
            ->except([$request->hasFile('photo') ? '' : 'picture'])
    );

    return back()->withStatus(__('Profile successfully updated.'));
}

/**
* Change the password
*
* @param  \App\Http\Requests\PasswordRequest  $request
* @return \Illuminate\Http\RedirectResponse
*/
public function password(PasswordRequest $request)
{
    auth()->user()->update(['password' => Hash::make($request->get('password'))]);

    return back()->withStatus(__('Password successfully updated.'));
}
                                        
                                    

If you input the wrong data when editing the profile, don`t worry. Validation rules have been added to prevent this (see App\Http\Requests\ProfileRequest). If you try to change the password, you will see that additional validation rules have been added in App\Http\Requests\PasswordRequest. You also have a custom validation rule that can be found in App\Rules\CurrentPasswordCheckRule.

                                        
public function rules()
{
    return [
        'old_password' => ['required', 'min:6', new CurrentPasswordCheckRule],
        'password' => ['required', 'min:6', 'confirmed', 'different:old_password'],
        'password_confirmation' => ['required', 'min:6'],
    ];
}
                                        
                                    

Role Management

The Pro theme allows you to add user roles. By default, the theme comes with Admin, Creator and Member roles. To access the role management example click the "Examples/Role Management" link in the left sidebar or add /role to the URL. Here you can add/edit new roles. Deletion is not allowed in this section.

To add a new role, click the "Add role" button. To edit an existing role, click the dotted menu (available on every table row) and then click "Edit". In both cases, you will be directed to a form which allows you to modify the name and description of a role.

The policy which authorizes the user to access the role management option is implemented in App\Policies\RolePolicy.php.

You can find this functionality in App\Http\RoleController.php.

Also, validation rules were added so you will know exactly what to input in the form fields (see App\Http\Requests\RoleRequest). Note that these validation rules also apply for the role edit option.

                                        
public function rules()
{
    return [
        'name' => [
            'required', 'min:3', Rule::unique((new Role)->getTable())->ignore($this->route()->role->id ?? null)
        ],
        'description' => [
            'nullable', 'min:5'
        ]
    ];
}
                                        
                                    

User Management

The theme comes with an out of the box user management option. To access this option ,click the "Examples/User Management" link in the left sidebar or add /user to the URL.

The first thing you will see is a list of existing users. You can add new ones by clicking the "Add user" button (above the table on the right). On the Add user page, you will find a form which allows you to fill out the user`s name, email, role and password. All pages are generated using blade templates:

                                        
<div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
    <label class="form-control-label" for="input-name">
        <i class="w3-xxlarge fa fa-user"></i>{{ __('Name') }}
    </label>
    <input type="text" name="name" id="input-name" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="{{ __('Name') }}" value="{{ old('name') }}" required autofocus>

    @include('alerts.feedback', ['field' => 'name'])
</div>
                                        
                                    

Validation rules were added to prevent errors in the form fields (see App\Http\Requests\UserRequest). Note that these validation rules also apply for the user edit option.

                                        
public function rules()
{
    return [
        'name' => [
            'required', 'min:3'
        ],
        'email' => [
            'required', 'email', Rule::unique((new User)->getTable())->ignore($this->route()->user->id ?? null)
        ],
        'role_id' => [
            'required', 'exists:'.(new Role)->getTable().',id'
        ],
        'password' => [
            $this->route()->user ? 'nullable' : 'required', 'confirmed', 'min:6'
        ]
    ];
}

/**
* Get the validation attributes that apply to the request.
*
* @return array
*/
public function attributes()
{
    return [
        'role_id' => 'role',
    ];
}
                                        
                                    

The policy which authorizes the user to access the user management pages is implemented in App\Policies\UserPolicy.php.

Once you add more users, the list will grow and for every user you will have edit and delete options (access these options by clicking the three dotted menu that appears at the end of every row).

All the sample code for the user management can be found in App\Http\Controllers\UserController. See store method example bellow:

                                        
public function store(UserRequest $request, User $model)
{
    $model->create($request->merge([
        'picture' => $request->photo ? $request->photo->store('profile', 'public') : null,
        'password' => Hash::make($request->get('password'))
    ])->all());

    return redirect()->route('user.index')->withStatus(__('User successfully created.'));
}
                                        
                                    

Tag Management

The Pro theme also comes with a tag management option. To access this example, click the "Examples/Tag Management" link in the left sidebar or add /tag to the URL.

In this section you can add and edit tags, but you can only delete them if they are not attached to any items. You can add new ones by clicking the "Add tag" button (above the table on the right). You will then be directed to a form which allows you to add new tags.

Although you can add in the form only the name and color of a tag, you can write your own migrations to extend this functionality.

                                        
public function destroy(Tag $tag)
{
    if (!$tag->items->isEmpty()) {
        return redirect()->route('tag.index')->withErrors(__('This tag has items attached and can\'t be deleted.'));
    }

    $tag->delete();

    return redirect()->route('tag.index')->withStatus(__('Tag successfully deleted.'));
}
                                        
                                    

The policy which authorizes the user to access tags management pages is implemented in App\Policies\TagPolicy.php.

Category Management

Out of the box you will have an example of category management (for the cases in which you are developing a blog or a shop). To access this example, click the "Examples/Category Management" link in the left sidebar or add /category to the URL. You can add and edit categories here, but you can only delete them if they are not attached to any items.

                                        
@if ($category->items->isEmpty() && auth()->user()->can('delete', $category))
<form class="d-inline-block" action="{{ route('category.destroy', $category->id) }}" method="POST">
    @method('delete')
    @csrf
    <a class="btn btn-link btn-danger " onclick="confirm('{{ __('Are you sure you want to delete this category?') }}') ? this.parentElement.submit() : ''">
    <i class="fa fa-times"> </i> </a></form>
@endif
                                        
                                    

The policy which authorizes the user on categories management pages is implemented in App\Policies\CategoryPolicy.php.

Item Management

Item management is the most advanced example included in the Pro theme, because every item has a picture, belongs to a category and has multiple tags. To access this example click the "Examples/Item Management" link in the left sidebar or add /item to the URL.

Here you can manage the items. A list of items will appear once you start adding them (to access the add page click "Add item"). On the add page, besides the Name and Description fields (which are present in most of the CRUD examples) you can see a category dropdown, which contains the categories you added, a file input and a tag multi select. If you did not add any categories or tags, please go to the corresponding sections (category management, tag management) and add some.

The code for saving a new item is a bit different than before (see snippet bellow):

                                        
public function store(ItemRequest $request, Item $model)
{
    $item = $model->create($request->merge([
        'picture' => $request->photo->store('pictures', 'public'),
        'show_on_homepage' => $request->show_on_homepage ? 1 : 0,
        'options' => $request->options ? $request->options : null,
        'date' => $request->date ? Carbon::parse($request->date)->format('Y-m-d') : null
    ])->all());

    $item->tags()->sync($request->get('tags'));

    return redirect()->route('item.index')->withStatus(__('Item successfully created.'));
}
                                        
                                    

Notice how the picture and tags are easily saved in the database and on the disk.

Similar to all the examples included in the theme, this one also has validation rules in place. Note that the picture is mandatory only on the item creation. On the edit page, if no new picture is added, the old picture will not be modified.

                                        
public function rules()
{
    return [
        'name' => [
            'required', 'min:3', Rule::unique((new Item)->getTable())->ignore($this->route()->item->id ?? null)
        ],
        'category_id' => [
            'required', 'exists:'.(new Category)->getTable().',id'
        ],
        'excerpt' => [
            'required', 'min:3'
        ],
        'description' => [
            'required',"min:3"
        ],
        'photo' => [
            $this->route()->item ? 'nullable' : 'required', 'image'
        ],
        'tags' => [
            'required'
        ],
        'tags.*' => [
            'exists:'.(new Tag)->getTable().',id'
        ],
        'status' => [
            'required',
            'in:published,draft,archive'
        ],
        'date' => [
            'required',
            'date_format:d-m-Y'
        ]
    ];
}
                                            
                                        

In the item management we have an observer (`app\Observers\ItemObserver`) example. This observer handles the deletion of the picture from the disk when the item is deleted or when the picture is changed via the edit form. The observer also removes the association between the item and the tags.

                                            
public function deleting(Item  $item)
{
    File::delete(storage_path("/app/public/{$item->picture}"));
    
    $item->tags()->detach();
}
                                        
                                    

The policy which authorizes the user on item management pages is implemented in App\Policies\ItemPolicy.php.

Buttons Live Demo

Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:

Default Primary Info Success Warning Danger Neutral

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

Sizes

Buttons come in all needed sizes:

Large Normal Small

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-sm">Extra Small</button>

Styles

We added extra classes that can help you better customise the look. You can use regular buttons, filled buttons, rounded corners buttons or plain link buttons. Let's see some examples:

Default Outline Round Link

<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-fill">Filled</button>
<button class="btn btn-primary btn-round">Round</button>
<button class="btn btn-primary btn-simple">Simple</button>

Button groups, toolbars, and disabled state all work like they are supposed to.

Social Buttons

An extra category of buttons that are necessary for any project is the social buttons. We have added classes that provide the default color for every social network.
To use them, you have to add to your button the general class 'btn-social' and the specific network, for example 'btn-twitter'. All styles described above can be applied to social buttons, ranging from filled to round to simple.
We used the Font Awesome social icons that you can find here.
Here is the example for all the social buttons with the filled style:

<button class="btn btn-social btn-fill btn-twitter">
    <i class="fa fa-twitter"></i>
</button>
<button class="btn btn-social btn-fill btn-facebook">
    <i class="fa fa-facebook"> </i>
</button>
<button class="btn btn-social btn-fill btn-google">
    <i class="fa fa-google-plus"> </i>
</button>
<button class="btn btn-social btn-fill btn-linkedin">
    <i class="fa fa-linkedin"></i>
</button>
<button class="btn btn-social btn-fill btn-pinterest">
    <i class="fa fa-pinterest"></i>
</button>
<button class="btn btn-social btn-fill btn-youtube">
    <i class="fa fa-youtube-play"> </i>
</button>
<button class="btn btn-social btn-fill btn-tumblr">
    <i class="fa fa-tumblr"> </i>
</button>
<button class="btn btn-social btn-fill btn-github">
    <i class="fa fa-github"></i>
</button>
<button class="btn btn-social btn-fill btn-behance">
    <i class="fa fa-behance"></i>
</button>
<button class="btn btn-social btn-fill btn-dribbble">
    <i class="fa fa-dribbble"></i>
</button>
<button class="btn btn-social btn-fill btn-reddit">
    <i class="fa fa-reddit"></i>
</button>
<button class="btn btn-social btn-fill btn-stumbleupon">
    <i class="fa fa-stumbleupon"></i>
</button>

Checkboxes Live Demo

To use the custom checkboxes, just use the code below.

<div class="form-check">
	<label class="form-check-label">
	<input class="form-check-input" type="checkbox" value="">
	<span class="form-check-sign"></span>
		Unchecked
	</label>
</div>
<div class="form-check">
	<label class="form-check-label">
	<input class="form-check-input" type="checkbox" value="" checked>
	<span class="form-check-sign"></span>
		Checked
	</label>
</div>
<div class="form-check disabled">
	<label class="form-check-label">
	<input class="form-check-input" type="checkbox" value="" disabled>
	<span class="form-check-sign"></span>
		Disabled Unchecked
	</label>
</div>
<div class="form-check disabled">
	<label class="form-check-label">
	<input class="form-check-input" type="checkbox" value="" disabled checked>
	<span class="form-check-sign"></span>
		Disabled Checked
	</label>
</div>

Radio Buttons Live Demo

To use the custom radio buttons, just use the code below.

<div class="form-check form-check-radio">
    <label class="form-check-label">
	  <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadios1" value="option1">
         <span class="form-check-sign"></span>
	 	<label for="radio1">
		 	Radio is off
	</label>
</div>

<div class="form-check form-check-radio">
    <label class="form-check-label">
	  <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadios1" value="option1">
         <span class="form-check-sign"></span>
	 	<label for="radio1">
		 	Radio is on
	</label>
</div>

<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
	  <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadios1" value="option1">
         <span class="form-check-sign"></span>
	 	<label for="radio1">
		 	Radio disabled is off
	</label>
</div>

<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
	  <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadios1" value="option1">
         <span class="form-check-sign"></span>
	 	<label for="radio1">
		 	Radio disabled is on
	</label>
</div>

Switches Live Demo

<input type="checkbox" checked="" data-toggle="switch" data-on-color="info" data-off-color="info"/>
<span class="toggle"></span>

<input type="checkbox" data-toggle="switch" data-on-color="info" data-off-color="info"  data-on-text="" data-off-text="">
<span class="toggle"></span>

<input type="checkbox" checked="" data-toggle="switch" data-on-color="info" data-off-color="info"  data-on-text="" data-off-text="">
<span class="toggle"></span>

Dropdown Live Demo

We are very proud to present the dropdown, we added a subtle animation for this classic widget.
Here are an examples and the code:

<div class="dropdown">

  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Inputs Live Demo

We restyled the Bootstrap input to give it a more flat, minimal look. You can use the classic look, different colors and states or input groups.

<div class="form-group">
    <input type="text" value="" placeholder="Input" class="form-control" />
</div>

<div class="form-group has-success">
    <input type="text" value="Success" class="form-control" />
</div>

<div class="form-group has-error has-feedback">
    <input type="text" value="Error" class="form-control" />
    <span class="fa fa-times form-control-feedback"></span>
</div>

<div class="input-group">
    <input type="text" value="Group Addon" class="form-control">
    <span class="input-group-addon"><i class="fa fa-group"></i></span>
</div>

Customizable Select Live Demo

We added new style classes for the dropdown; to use them you have to add the class "dropdown-{color}" with the color you want. There are 2 ways to use them: as normal select, in which case you need to specify the style as "form-control", or as button, for which you have to specify the style as "btn-{type}". You can also have multiple select by using the "multiple" attribute on the select tag. Like we added in the coded example.

<!-- simple select -->
<select name="cities" class="selectpicker" data-title="Single Select" data-style="btn-default btn-block" data-menu-style="dropdown-blue">
    <option value="id">Bahasa Indonesia</option>
    <option value="ms">Bahasa Melayu</option>
...
</select>

<!-- multiple select -->
<select multiple data-title="Multiple Select" name="currency" class="selectpicker" data-style="btn-info btn-fill btn-block" data-menu-style="dropdown-blue">
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
...
</select>

<!-- Bootstrap Select Picker -->
if($(".selectpicker").length != 0){
    $(".selectpicker").selectpicker();
}

Tags Live Demo

If you want to use tags, we now offer you 3 possibilities: simple tags, colored tags that you can use by adding the necessary color class and filled tags, resulted by using the "tag-fill" class.

Regular:<input type="text" data-role="tagsinput" value="Minimal, Light, New, Friends"/>

Filled: <input type="text" data-role="tagsinput" value="Design & UI, Inspiration, Business, Lifestyle"/>

Textarea Live Demo

We added custom style for the textarea, so it looks similar to all other inputs.

<textarea id="textarea" placeholder="Here can be your nice text" rows="5"></textarea>

Navbar

We restyled the classic Bootstrap Navbar:

<nav class="navbar navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand" href="#pablo"> Dasboard </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"  aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-bar burger-lines"></span>
            <span class="navbar-toggler-bar burger-lines"></span>
            <span class="navbar-toggler-bar burger-lines"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-end">
            <ul class="nav navbar-nav mr-auto">
                <form class="navbar-form navbar-left navbar-search-form" role="search">
                    <div class="input-group">
                        <i class="nc-icon nc-zoom-split"></i>
                        <input type="text" value="" class="form-control" placeholder="Search...">
                    </div>
                </form>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#pablo">
                        <i class="fa fa-line-chart d-none d-md-none d-lg-block"></i>
                        <i class="nc-icon nc-planet d-md-block d-lg-none"></i>
                        <span class="stats">Stats</span>
                    </a>
                </li>
                <li class="dropdown nav-item">
                    <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                        <i class="fa fa-gavel d-none d-md-none d-lg-block"></i>
                        <i class="nc-icon nc-planet d-md-block d-lg-none"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <a class="dropdown-item" href="#">Create New Post</a>
                        <a class="dropdown-item" href="#">Manage Something</a>
                        <a class="dropdown-item" href="#">Do Nothing</a>
                        <a class="dropdown-item" href="#">Submit to live</a>
                        <li class="divider"></li>
                        <a class="dropdown-item" href="#">Another action</a>
                    </ul>
                </li>
                <li class="dropdown nav-item">
                    <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
                        <i class="fa fa-bell-o d-none d-md-none d-lg-block"></i>
                        <i class="nc-icon nc-bell-55 d-md-block d-lg-none"></i>
                        <span class="notification">5</span>
                        <span class="d-lg-none">Notification</span>
                    </a>
                    <ul class="dropdown-menu">
                        <a class="dropdown-item" href="#">Notification 1</a>
                        <a class="dropdown-item" href="#">Notification 2</a>
                        <a class="dropdown-item" href="#">Notification 3</a>
                        <a class="dropdown-item" href="#">Notification 4</a>
                        <a class="dropdown-item" href="#">Notification 5</a>
                    </ul>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="https://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-list-ul d-none d-md-none d-lg-block"></i>
                        <i class="nc-icon nc-bullet-list-67 d-md-block d-lg-none"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">
                            <i class="nc-icon nc-email-85"></i> Messages
                        </a>
                        <a class="dropdown-item" href="#">
                            <i class="nc-icon nc-umbrella-13"></i> Help Center
                        </a>
                        <a class="dropdown-item" href="#">
                            <i class="nc-icon nc-settings-90"></i> Settings
                        </a>
                        <div class="divider"></div>
                        <a class="dropdown-item" href="#">
                            <i class="nc-icon nc-lock-circle-open"></i> Lock Screen
                        </a>
                        <a href="#" class="dropdown-item text-danger">
                            <i class="nc-icon nc-button-power"></i>
                            Log out
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Fixed Navbar: If you want to have a "Fixed Navbar" on Desktop and Mobile please add the class "navbar-fixed" on the tag "nav" and move the entire "nav" structure outside of the div with class "main-panel". Check the example implementation for more details:

    <div class="sidebar" data-color="orange" data-image="../assets/img/full-screen-image-3.jpg">
        ....
    </div>
    <nav class="navbar navbar-default navbar-fixed">
        <div class="container-fluid">
            ....
        </div>
    </nav>

    <div class="main-panel">
        <-- .navbar used to be here, but was moved outside of this div -->
            ....
    </div>

<ul class="pagination pagination-blue">

  <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>

  <li class="page-item"><a class="page-link" href="#">1</a></li>

  <li class="page-item"><a class="page-link" href="#">2</a></li>

  <li class="page-item active"><a class="page-link" href="#">3</a></li>

  <li class="page-item"><a class="page-link" href="#">4</a></li>

  <li class="page-item"><a class="page-link" href="#">5</a></li>

  <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>

</ul>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

<!-- Markup -->
<div id="sliderRegular" class="slider slider-info"></div>

<div id="sliderDouble" class="slider slider-success"></div>

<!-- Javascript -->
	var slider = document.getElementById('sliderRegular');

			noUiSlider.create(slider, {
				start: 40,
				connect: [true,false],
				range: {
					min: 0,
					max: 100
				}
			});

			var slider2 = document.getElementById('sliderDouble');

			noUiSlider.create(slider2, {
				start: [ 20, 60 ],
				connect: true,
				range: {
					min:  0,
					max:  100
				}
			});

    <ul role="tablist" class="nav nav-tabs">
        <li role="presentation" class="nav-item show active">
            <a class="nav-link" id="info-tab" href="#agency" data-toggle="tab">Info</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="account-tab" href="#company" data-toggle="tab">Account</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="style-tab" href="#style" data-toggle="tab">Style</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="settings-tab" href="#settings" data-toggle="tab">Settings</a>
        </li>
    </ul>

    <div class="tab-content">
        <div id="agency" class="tab-pane fade show active" role="tabpanel" aria-labelledby="info-tab">
            Agency...
        </div>
        <div id="company" class="tab-pane fade" role="tabpanel" aria-labelledby="account-tab">
            We...
        </div>
        <div id="style" class="tab-pane fade" role="tabpanel" aria-labelledby="style-tab">
            Explore...
        </div>
        <div id="settings" class="tab-pane fade" role="tabpanel" aria-labelledby="settings-tab">
            E...
        </div>
    </div>
    // with icons
    <ul role="tablist" class="nav nav-tabs">
        <li role="presentation" class="nav-item show active">
            <a class="nav-link" id="info-tab" href="#icon-info" data-toggle="tab"><i class="fa fa-info"></i> Info</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="account-tab"  href="#icon-account" data-toggle="tab"><i class="fa fa-user"></i> Account</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="style-tab" href="#icon-style" data-toggle="tab"><i class="fa fa-cube"></i> Style</a>
        </li>
    </ul>

    <div class="tab-content">
        <div id="icon-info" class="tab-pane fade show active" role="tabpanel" aria-labelledby="info-tab">
            Agency...
        </div>
        <div id="icon-account" class="tab-pane fade" role="tabpanel" aria-labelledby="account-tab">
            We are...
        </div>
        <div id="icon-style" class="tab-pane fade" role="tabpanel" aria-labelledby="style-tab">
           Explore...
        </div>
    </div>

For something that looks more modular, you can use the page subcategories. Here is an example:

<div class="nav-container">
    <ul class="nav nav-icons justify-content-center" role="tablist">
        <li class="nav-item show active">
            <a class="nav-link" id="description-tab" href="#description-logo" role="tab" data-toggle="tab">
                <i class="fa fa-info-circle"></i><br>
                Description
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="location-tab" href="#map-logo" role="tab" data-toggle="tab">
                <i class="fa fa-map-marker"></i><br>
                Location
            </a>
          </li>
        <li class="nav-item">
            <a class="nav-link" id="legal-info-tab" href="#legal-logo" role="tab" data-toggle="tab">
                <i class="fa fa-legal"></i><br>
                Legal Info
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="help-tab" href="#help-logo" role="tab" data-toggle="tab">
                <i class="fa fa-life-ring"></i><br>
                Help Center
            </a>
        </li>
    </ul>
</div>

<div class="tab-content">
    <div class="tab-pane fade show active" id="description-logo" aria-labelledby="info-tab">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Description about product</h4>
                <p class="card-category">More information here</p>
            </div>
            <div class="card-body">
                <p>Larger, yet dramatically thinner. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new Retina HD display.</p>
                <p>The first thing you notice when you hold the phone is how great it feels in your hand. There are no distinct edges. No gaps. Just a smooth, seamless bond of metal and glass that feels like one continuous surface.</p>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="map-logo" aria-labelledby="info-tab">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Location of product</h4>
                <p class="category">Here is some text</p>
            </div>
            <div class="card-body">
                <p>Another Text. The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.</p>
                <p>Larger, yet dramatically thinner.It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="legal-logo" aria-labelledby="info-tab">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Legal items</h4>
                <p class="category">More information here</p>
            </div>
            <div class="card-body">
                <p>The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.</p>
                <p>Larger, yet dramatically thinner.It’s one continuous form where hardware and software function in perfect unison, creating a new generation of phone that’s better by any measure.</p>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="help-logo" aria-labelledby="info-tab">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Help center</h4>
                <p class="category">More information here</p>
            </div>
            <div class="card-body">
                <p>From the seamless transition of glass and metal to the streamlined profile, every detail was carefully considered to enhance your experience. So while its display is larger, the phone feels just right.</p>
                <p>Another Text. The first thing you notice when you hold the phone is how great it feels in your hand. The cover glass curves down around the sides to meet the anodized aluminum enclosure in a remarkable, simplified design.</p>
            </div>
        </div>
    </div>
</div>

Tables v1.8.1 Live Demo

All Boostrap classes for tables are supported and improved. Besides the simple and striped tables, we added tables that have actions and table with switches. We have also created the Big Boy table, that can be used for content management systems or in the checkout process of an ecommerce. It offers extended functionality, like adding pictures, descriptions and actions.
You can see coded examples below:

Simple Table with Actions

<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Name</th>
            <th>Job Position</th>
            <th>Since</th>
            <th class="text-right">Salary</th>
            <th class="text-right">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">1</td>
            <td>Andrew Mike</td>
            <td>Develop</td>
            <td>2013</td>
            <td class="text-right">&euro; 99,225</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">2</td>
            <td>John Doe</td>
            <td>Design</td>
            <td>2012</td>
            <td class="text-right">&euro; 89,241</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">3</td>
            <td>Alex Mike</td>
            <td>Design</td>
            <td>2010</td>
            <td class="text-right">&euro; 92,144</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">4</td>
            <td>Mike Monday</td>
            <td>Marketing</td>
            <td>2013</td>
            <td class="text-right">&euro; 49,990</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">5</td>
            <td>Paul Dickens</td>
            <td>Communication</td>
            <td>2014</td>
            <td class="text-right">&euro; 69,201</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>
</div>

Collapsible Groups Live Demo

The Light Bootstrap Dashboard PRO has new classes for collapsable groups which offer a nice sneak peak into the content of the body of the group.
If you want to stick with the old classes, they remain compatible. If you want to see the new ones, you will have to add data-toggle="collapse-hover" instead of "collapse".

Here is an example of both the groups. The first two are done using the preview on hover and the third one is classical.

<div class="accordions" id="accordion">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a data-target="#collapseOne" href="#" data-toggle="collapse">
                    Collapse item 1
                    <b class="caret"></b>
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="card-collapse collapse">
            <div class="card-body">
                Anim pariatur cliche ...
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a data-target="#collapseTwo" href="#" data-toggle="collapse">
                    Collapse item 2
                    <b class="caret"></b>
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="card-collapse collapse">
            <div class="card-body">
                Anim pariatur ....
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a data-target="#collapseThree" href="#" data-toggle="collapse">
                    Collapse item 3
                    <b class="caret"></b>
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="card-collapse collapse">
            <div class="card-body">
                Anim pariatur ...
            </div>
        </div>
    </div>
</div>

<!-- button to trigger the action -->
<button class="btn btn-default" onclick="showNotification('top','right')">Top Right Notification</button>

<!-- javascript -->
function showNotification(from, align){
	color = Math.floor((Math.random() * 4) + 1);

	$.notify({
    	icon: "pe-7s-gift",
    	message: "Welcome to <b>Light Bootstrap Dashboard</b> - a beautiful freebie for every web developer."

    },{
        type: type[color],
        timer: 4000,
        placement: {
            from: from,
            align: align
        }
    });
}

<div class="sidebar" data-color="orange" data-image="../../assets/img/full-screen-image-3.jpg">
    <!--

        Tip 1: you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple"
        Tip 2: you can also add an image using data-image tag

    -->

    <div class="logo">
        <a href="https://www.creative-tim.com" class="simple-text logo-mini">
            Ct
        </a>

		<a href="https://www.creative-tim.com" class="simple-text logo-normal">
			Creative Tim
		</a>
    </div>

	<div class="sidebar-wrapper">
        <div class="user">
			<div class="info">
				<div class="photo">
                    <img src="../../assets/img/default-avatar.png" />
                </div>

				<a data-toggle="collapse" href="#collapseExample" class="collapsed">
					<span>
						Tania Andrew
                        <b class="caret"></b>
					</span>
                </a>

				<div class="collapse" id="collapseExample">
					<ul class="nav">
						<li>
							<a href="#pablo">
								<span class="sidebar-mini">MP</span>
								<span class="sidebar-normal">My Profile</span>
							</a>
						</li>

						<li>
							<a href="#pablo">
								<span class="sidebar-mini">EP</span>
								<span class="sidebar-normal">Edit Profile</span>
							</a>
						</li>

						<li>
							<a href="#pablo">
								<span class="sidebar-mini">S</span>
								<span class="sidebar-normal">Settings</span>
							</a>
						</li>
					</ul>
                </div>
			</div>
        </div>

		<ul class="nav">
			<li>
				<a href="../dashboard.html">
					<i class="pe-7s-graph"></i>
					<p>Dashboard</p>
				</a>
			</li>
			<li>
				<a data-toggle="collapse" href="#componentsExamples">
                    <i class="pe-7s-plugin"></i>
                    <p>Components
                       <b class="caret"></b>
                    </p>
                </a>
				<div class="collapse" id="componentsExamples">
					<ul class="nav">
						<li>
							<a href="../components/buttons.html">
								<span class="sidebar-mini">B</span>
								<span class="sidebar-normal">Buttons</span>
							</a>
						</li>
						<li>
							<a href="../components/grid.html">
								<span class="sidebar-mini">GS</span>
								<span class="sidebar-normal">Grid System</span>
							</a>
						</li>
						<li>
							<a href="../components/panels.html">
								<span class="sidebar-mini">P</span>
								<span class="sidebar-normal">Panels</span>
							</a>
						</li>
						<li>
							<a href="../components/sweet-alert.html">
								<span class="sidebar-mini">SA</span>
								<span class="sidebar-normal">Sweet Alert</span>
							</a>
						</li>
						<li>
							<a href="../components/notifications.html">
								<span class="sidebar-mini">N</span>
								<span class="sidebar-normal">Notifications</span>
							</a>
						</li>
						<li>
							<a href="../components/icons.html">
								<span class="sidebar-mini">I</span>
								<span class="sidebar-normal">Icons</span>
							</a>
						</li>
						<li>
							<a href="../components/typography.html">
								<span class="sidebar-mini">T</span>
								<span class="sidebar-normal">Typography</span>
							</a>
						</li>
					</ul>
				</div>
			</li>
			<li>
				<a data-toggle="collapse" href="#formsExamples">
                    <i class="pe-7s-note2"></i>
                    <p>Forms
                       <b class="caret"></b>
                    </p>
                </a>
				<div class="collapse in" id="formsExamples">
					<ul class="nav">
						<li>
							<a href="../forms/regular.html">
								<span class="sidebar-mini">Rf</span>
								<span class="sidebar-normal">Regular Forms</span>
							</a>
						</li>
						<li class="active">
							<a href="../forms/extended.html">
								<span class="sidebar-mini">Ef</span>
								<span class="sidebar-normal">Extended Forms</span>
							</a>
						</li>
						<li>
							<a href="../forms/validation.html">
								<span class="sidebar-mini">Vf</span>
								<span class="sidebar-normal">Validation Forms</span>
							</a>
						</li>
						<li>
							<a href="../forms/wizard.html">
								<span class="sidebar-mini">W</span>
								<span class="sidebar-normal">Wizard</span>
							</a>
						</li>
					</ul>
				</div>
			</li>
			<li>
				<a data-toggle="collapse" href="#tablesExamples">
                    <i class="pe-7s-news-paper"></i>
                    <p>Tables
                       <b class="caret"></b>
                    </p>
                </a>
				<div class="collapse" id="tablesExamples">
					<ul class="nav">
						<li>
							<a href="../tables/regular.html">
								<span class="sidebar-mini">RT</span>
								<span class="sidebar-normal">Regular Tables</span>
							</a>
						</li>
						<li>
							<a href="../tables/extended.html">
								<span class="sidebar-mini">ET</span>
								<span class="sidebar-normal">Extended Tables</span>
							</a>
						</li>
						<li>
							<a href="../tables/bootstrap-table.html">
								<span class="sidebar-mini">BT</span>
								<span class="sidebar-normal">Bootstrap Table</span>
							</a>
						</li>
						<li>
							<a href="../tables/datatables.net.html">
								<span class="sidebar-mini">DT</span>
								<span class="sidebar-normal">DataTables.net</span>
							</a>
						</li>
					</ul>
				</div>
			</li>
			<li>
				<a data-toggle="collapse" href="#mapsExamples">
                    <i class="pe-7s-map-marker"></i>
                    <p>Maps
                       <b class="caret"></b>
                    </p>
                </a>
				<div class="collapse" id="mapsExamples">
					<ul class="nav">
						<li>
							<a href="../maps/google.html">
								<span class="sidebar-mini">GM</span>
								<span class="sidebar-normal">Google Maps</span>
							</a>
						</li>
						<li>
							<a href="../maps/vector.html">
								<span class="sidebar-mini">VM</span>
								<span class="sidebar-normal">Vector maps</span>
							</a>
						</li>
						<li>
							<a href="../maps/fullscreen.html">
								<span class="sidebar-mini">FSM</span>
								<span class="sidebar-normal">Full Screen Map</span>
							</a>
						</li>
					</ul>
				</div>
			</li>
			<li>
                <a href="../charts.html">
                    <i class="pe-7s-graph1"></i>
                    <p>Charts</p>
                </a>
            </li>

            <li>
                <a href="../calendar.html">
                    <i class="pe-7s-date"></i>
                    <p>Calendar</p>
                </a>
            </li>
			<li>
				<a data-toggle="collapse" href="#pagesExamples">
                    <i class="pe-7s-gift"></i>
                    <p>Pages
                       <b class="caret"></b>
                    </p>
                </a>
				<div class="collapse" id="pagesExamples">
					<ul class="nav">
						<li>
							<a href="../pages/user.html">
								<span class="sidebar-mini">UP</span>
								<span class="sidebar-normal">User Page</span>
							</a>
						</li>
						<li>
							<a href="../pages/login.html">
								<span class="sidebar-mini">LP</span>
								<span class="sidebar-normal">Login Page</span>
							</a>
						</li>
						<li>
							<a href="../pages/register.html">
								<span class="sidebar-mini">RP</span>
								<span class="sidebar-normal">Register Page</span>
							</a>
						</li>
						<li>
							<a href="../pages/lock.html">
								<span class="sidebar-mini">LSP</span>
								<span class="sidebar-normal">Lock Screen Page</span>
							</a>
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</div>

<!-- the code for the display of the table -->

<div class="toolbar">
    <!--   Here you can write extra buttons/actions for the toolbar  -->
</div>

<table id="bootstrap-table" class="table">
    <thead>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" class="text-center">ID</th>
    	<th data-field="name" data-sortable="true">Name</th>
    	<th data-field="salary" data-sortable="true">Salary</th>
    	<th data-field="country" data-sortable="true">Country</th>
    	<th data-field="city">City</th>
    	<th data-field="actions" class="td-actions text-right" data-events="operateEvents" data-formatter="operateFormatter">Actions</th>
    </thead>
    <tbody>
        <tr>
            <td></td>
        	<td>1</td>
        	<td>Dakota Rice</td>
        	<td>$36,738</td>
        	<td>Niger</td>
        	<td>Oud-Turnhout</td>
        	<td></td>
        </tr>
        <tr>
            <td></td>
        	<td>2</td>
        	<td>Minerva Hooper</td>
        	<td>$23,789</td>
        	<td>Curaçao</td>
        	<td>Sinaai-Waas</td>
        	<td></td>
        </tr>
    </tbody>
</table>

<!-- the javascript for the datatables -->
<script type="text/javascript">
    var $table = $('#bootstrap-table');

    $().ready(function(){
        $table.bootstrapTable({
            toolbar: ".toolbar",
            clickToSelect: true,
            showRefresh: true,
            search: true,
            showToggle: true,
            showColumns: true,
            pagination: true,
            searchAlign: 'left',
            pageSize: 8,
            clickToSelect: false,
            pageList: [8,10,25,50,100],

            formatShowingRows: function(pageFrom, pageTo, totalRows){
                //do nothing here, we don't want to show the text "showing x of y from..."
            },
            formatRecordsPerPage: function(pageNumber){
                return pageNumber + " rows visible";
            },
            icons: {
                refresh: 'fa fa-refresh',
                toggle: 'fa fa-th-list',
                columns: 'fa fa-columns',
                detailOpen: 'fa fa-plus-circle',
                detailClose: 'fa fa-minus-circle'
            }
        });

        //activate the tooltips after the data table is initialized
        $('[rel="tooltip"]').tooltip();

        $(window).resize(function () {
            $table.bootstrapTable('resetView');
        });

        window.operateEvents = {
            'click .view': function (e, value, row, index) {
                info = JSON.stringify(row);

                swal('You click view icon, row: ', info);
                console.log(info);
            },
            'click .edit': function (e, value, row, index) {
                info = JSON.stringify(row);

                swal('You click edit icon, row: ', info);
                console.log(info);
            },
            'click .remove': function (e, value, row, index) {
                console.log(row);
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                });
            }
        };
    });

    function operateFormatter(value, row, index) {
        return [
            '<a rel="tooltip" title="View" class="btn btn-link btn-info btn-icon table-action view" href="javascript:void(0)">',
                '<i class="fa fa-image"></i>',
            '</a>',
            '<a rel="tooltip" title="Edit" class="btn btn-link btn-warning btn-icon table-action edit" href="javascript:void(0)">',
                '<i class="fa fa-edit"></i>',
            '</a>',
            '<a rel="tooltip" title="Remove" class="btn btn-link btn-danger btn-icon table-action remove" href="javascript:void(0)">',
                '<i class="fa fa-remove"></i>',
            '</a>'
        ].join('');
    }


</script>

<button class="btn btn-default btn-fill" onclick='swal("Good job!", "You clicked the button!", "success")'>Try me!</button>
<!-- for more actions that you can use onclick, please check out demo.js -->

<!-- input with datetimepicker -->
<div class="form-group">
	<input id="datetimepicker" type="text" class="form-control datetimepicker" placeholder="Datetime Picker Here">
</div>

<!-- javascript for init -->
$('.datetimepicker').datetimepicker({
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    }
});

<!-- graphic area in html -->

<h4> <br><small>24 Hours Performance</small></h4>
<div id="chartPerformance" class="ct-chart "></div>

<!-- javascript -->

var dataPerformance = {
  labels: ['9pm', '2am', '8am', '2pm', '8pm'],
  series: [
    [1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13]
  ]
};

var optionsPerformance = {
  showPoint: false,
  lineSmooth: true,
  axisX: {
    showGrid: false,
    showLabel: true
  },
  axisY: {
    offset: 40,
  },
  low: 0,
  high: 20
};

Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance);

<!-- graphic area in html -->

<h4></small> <br><small>NASDAQ: AAPL</small></h4>
<div id="chartStock" class="ct-chart "></div>

<!-- javascript -->
var dataStock = {
  labels: ['2009', '2010', '2011', '2012', '2013', '2014'],
  series: [
    [22.20, 28.16, 34.90, 42.28, 47.26, 48.89, 51.93, 55.32, 59.21, 62.21, 75.50, 80.23, 60.32, 55.03, 62.21, 78.83, 82.12, 89.21, 102.50, 107.23]
  ]
};

var optionsStock = {
  lineSmooth: false,
  axisY: {
    offset: 40,
    labelInterpolationFnc: function(value) {
        return '$' + value;
      }
  },
  low: 10,
  high: 110,
   classNames: {
      point: 'ct-point ct-green',
      line: 'ct-line ct-green'
  }
};
var $chart = $('#chartStock');

Chartist.Line('#chartStock', dataStock, optionsStock);

<!-- graphic area in html -->

<h4><small>Users Behavior</small></h4>
<div id="chartSales" class="ct-chart "></div>
<h6>Legend</h6>
<i class="fa fa-circle text-info"></i> Visited Site<br>
<i class="fa fa-circle text-danger"></i> Register<br>
<i class="fa fa-circle text-warning"></i> Login 2nd time
<!-- javascript -->
var dataSales = {
  labels: ['2009', '2010', '2011', '2012', '2013', '2014'],
  series: [
    [287, 385, 490, 492, 554, 586, 698, 695, 752, 788, 846, 944],
    [67, 152, 143, 240, 287, 335, 435, 437, 539, 542, 544, 647],
    [23, 113, 67, 108, 190, 239, 307, 308, 439, 410, 410, 509]
  ]
};

var optionsSales = {
  lineSmooth: false,
  axisY: {
    offset: 40
  },
  low: 0,
  high: 1000
};

Chartist.Line('#chartSales', dataSales, optionsSales);

<!-- graphic area in html -->

<h4><small>Public Preferences</small></h4>
<div class="row margin-top">
 <div class="col-md-10 col-md-offset-1">
     <div id="chartPreferences" class="ct-chart "></div>
 </div>
</div>
<div class="row">
 <div class="col-md-10 col-md-offset-1">
     <h6>Legend</h6>
     <i class="fa fa-circle text-info"></i> Apple
     <i class="fa fa-circle text-success"></i> Samsung
     <i class="fa fa-circle text-warning"></i> BlackBerry
     <i class="fa fa-circle text-danger"></i> Windows Phone
 </div>
</div>

<!-- javascript -->
Chartist.Pie('#chartPreferences', {
  labels: ['46%','28%','15%','11%'],
  series: [46, 28, 15, 11]
});

<!-- graphic area in html -->

<h4><small>Views</small></h4>
<div id="chartViews" class="ct-chart "></div>

<!-- javascript -->
var dataViews = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
  ]
};


var optionsViews = {
  seriesBarDistance: 10,
  classNames: {
    bar: 'ct-bar ct-azure'
  },
  axisX: {
    showGrid: false
  }
};

var responsiveOptionsViews = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews);

<!-- graphic area in html -->

<h4>Activity <br><small>Multiple Bars Chart</small></h4>
<div id="chartActivity" class="ct-chart "></div>
<h6>Legend</h6>
<span class="label label-info">Views</span>
<span class="label label-success">Reads</span>

<!-- javascript -->
var data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
    [412, 243, 280, 580, 453, 353, 300, 364, 368, 410, 636, 695]
  ]
};

var options = {
  seriesBarDistance: 10,
   axisX: {
        showGrid: false
    }
};

var responsiveOptions = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

Chartist.Bar('#chartActivity', data, options, responsiveOptions);

<!-- card for the map -->
<div class="card">
    <div class="header">
        <p class="category">Regular Map</p>
    </div>
    <div class="content">
        <div id="regularMap" class="map"></div>
    </div>
</div>

<!-- javascript for init -->
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
var mapOptions = {
    zoom: 8,
    center: myLatlng,
    scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
}

var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Regular Map!"
});

marker.setMap(map);

});

<!-- card for the map -->
<div class="card card-plain">
    <div class="content">
        <div id="worldMap" class="map map-big"></div>
    </div>
</div>

<!-- javascript for init -->
 var mapData = {
        "AU": 760,
        "BR": 550,
        "CA": 120,
        "DE": 1300,
        "FR": 540,
        "GB": 690,
        "GE": 200,
        "IN": 200,
        "RO": 600,
        "RU": 300,
        "US": 2920,
    };

    $('#worldMap').vectorMap({
        map: 'world_mill_en',
        backgroundColor: "transparent",
        regionStyle: {
            initial: {
                fill: '#e4e4e4',
                "fill-opacity": 0.9,
                stroke: 'none',
                "stroke-width": 0,
                "stroke-opacity": 0
            }
        },

        series: {
            regions: [{
                values: mapData,
                scale: ["#AAAAAA","#444444"],
                normalizeFunction: 'polynomial'
            }]
        },
    });

});

<!-- html for login -->
<div class="card">
    <form id="loginFormValidation" action="" method="" novalidate="">
        <div class="header text-center">Login Form</div>
        <div class="content">

            <div class="form-group">
                <label class="control-label">Email Address <star>*</star></label>
                <input class="form-control"
                       name="email"
                       type="text"
                       email="true"
                       required="true"
                />
            </div>

            <div class="form-group">
                <label class="control-label">Password <star>*</star></label>
                <input class="form-control"
                       name="password"
                       id="registerPassword"
                       type="password"
                       required="true"
                />
            </div>

            <div class="category"><star>*</star> Required fields</div>
        </div>

        <div class="footer text-center">
            <button type="submit" class="btn btn-info btn-fill btn-wd">Register</button>
        </div>
    </form>
</div>

<!-- javascript for validation -->
$('#loginFormValidation').validate();