user avatar
Document
Last update: 11-Feb-2021
Get started Bootstrap
Introduction

Hey !! This is a document for our template POSTMAN:THE CHAT APP. We appreciate your interest in our template and Thank you !! for purchase. We have designed and built an Awesome UI:UX chat app which will make your customer chat even more with simplicity. Lets me share in more details.:

We have built on bootstrap so it will be easy to use if you are familiar with it. And if not then also our document will make it simple for you. We have incorporated an easy to use built in tool and document with all required details included.

Since this theme is based on Bootstrap, and includes nearly everything Bootstrap itself does, you’ll want to give the official project documentation a once over before continuing. There’s also the kitchen sink—a one-page view of all Bootstrap’s components restyled by this theme.

For everything else, including compiling and using this Bootstrap theme, read through the docs below.

Thanks, and enjoy!

What’s included

Below you will find all the file and required documentation of our Postman Chat Theme. We have included all directories and files, common resources and compiled and minified files as some raw file which will be required for your future use.

  • PostMan /
    • dist /
      • assets /
        • css /
        • images /
        • vendor /
      • index.html
    • doc /
      • index.html
    • fonts /
    • js /
      • calendar.js
      • index.js
      • template.js
    • scss /
      • base /
      • bootstrap /
      • font /
      • mixins /
      • plugin /
      • style.scss
    • Gruntfile.js
    • .gitignore
    • package.json
    • package-lock.json
    • README.md
File Reference
doc/index.html Online documentation
index.html Landing page
_variables.scss All variables
_core.scss Create scss variables color code
Gruntfile.js Compile scss to css and create js bundles
Getting started

At the top level of your bootstrap theme you’ll find a directory for each major Bootstrap version that’s supported (currently both v3 and v4). Within each directory you have all the relevant files for that version.

To view your Bootstrap Theme documentation, simply find the docs directory and open index.html in your favorite browser.

$ open index.html

Gulpfiles.js

If you’re after more customization we’ve also included a custom Gulp file, which can be used to quickly re-compile a theme’s CSS and JS. You’ll need to install both Node and Gulp before using our included “gulpfile.js”.

Once node is installed, run the following npm command to install Gulp.

  • $ npm install gulp -g or
  • To install Glup into your project devDependencies.
  • $ npm install --save-dev gulp
  • When you’re done, make sure you’ve installed the rest of the theme’s dependencies:
  • $ npm install

Gulp Sass: Run Gulp sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `scss/style.scss` and output a plain-css file to `/assets/css/filename.css`.

Now, modify your source files and run “gulp” to generate new local “dist/” files automatically. Be aware that this replaces existing “dist/” files, so proceed with caution.

Gruntfile.js

If you’re after more customization we’ve also included a custom Grunt file, which can be used to quickly re-compile a theme’s CSS and JS. You’ll need to install both Node and Grunt before using our included “gruntfile.js”.

Once node is installed, run the following npm command to install Grunt.

  • $ npm install -g grunt-cli or
  • To install Grunt into your project devDependencies.
  • $ npm install grunt --save-dev
  • When you’re done, make sure you’ve installed the rest of the theme’s dependencies:
  • $ npm install

Grunt Sass: Run grunt sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `scss/style.scss` and output a plain-css file to `/assets/css/filename.css`.

Now, modify your source files and run “gulp” to generate new local “dist/” files automatically. Be aware that this replaces existing “dist/” files, so proceed with caution.

Theme source code

The “scss/”, “js/”, and “fonts/” directories contain the source code for our CSS, JS, and icon fonts (respectively). Within the “scss/” and “js/” directories you’ll find two subdirectories:

  • bootstrap/”, which contains the most recently released version of Bootstrap (v4.0.0).
  • “dist/” folder includes everything above, built into single CSS and JS files that can easily be integrated into your project.

The “docs/” folder includes the source code for our documentation, as well as a handful of live examples.

The remaining files not specifically mentioned above provide support for packages, license information, and development.

Gulp/Grunt Files

Leverage the included source files and “gulpfile.js” or “gruntfile.js” to customize your Bootstrap Theme for your exact needs. Change variables, exclude components, and more.

  • “scss/base/” folder has custom files, Edit it to build your own custom build, simply modify your local custom files or edit the includes listed here. Note: some themes also rely on a shared style.scss file, which you can find imported.
  • “variables.scss” is home to your theme’s variables. Note that your theme’s variables file depends on and overrides an existing Bootstrap variable file (found in /scss/base/_variables.scss).
Main Content

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Responsive Bootstrap 4 and web Application ui kit.">

<title>:: PostMan :: Chat Application</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<!-- Material Design Iconic Font -->
<link rel="stylesheet" href="../fonts/material-icon/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css">

<!-- MAIN CSS -->
<link rel="stylesheet" href="assets/css/style.min.css">

<body>

<div id="layout" class="theme-cyan">

    <!-- Navbar -->
    <div class="navigation navbar justify-content-center py-xl-4 py-md-3 py-0 px-3">
    </div>
    <!-- End Navbar -->

    <!-- Sidebar -->
    <div class="sidebar border-end py-xl-4 py-3 px-xl-4 px-3">        
    </div>
    <!-- End Sidebar -->

    <!-- Rightbar icon menu -->
    <div class="rightbar d-none d-md-block">
    </div>
    <!-- End Rightbar icon menu -->

    <!-- Main Body: Content -->
    <div class="main px-xl-5 px-lg-4 px-3">

        <!-- Chat: Body -->
        <div class="chat-body">

            <!-- Chat: Header -->
            <div class="chat-header border-bottom py-xl-4 py-md-3 py-2">
            </div>

            <!-- Chat: Search -->
            <div class="collapse" id="chat-search-div">
            </div>

            <!-- Chat: Content-->
            <div class="chat-content">
            </div>

            <!-- Chat: Footer -->
            <div class="chat-footer border-top py-xl-4 py-lg-2 py-2">
            </div>

        </div>
        <!-- End chat body -->

        <!-- Chat: user details -->
        <div class="user-detail-sidebar py-xl-4 py-3 px-xl-4 px-3">
        </div>

        <!-- Chat: add new user to create a group chat -->
        <div class="addnew-user-sidebar py-xl-4 py-3 px-xl-4 px-3">
        </div>
        
    </div>
    <!-- Main Body: Content -->

</div>

<!-- Main jQuery js Bootstrap core js file -->
<script src="assets/vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin js file -->
<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<!-- Project core file -->
<script src="../js/template.js"></script>
</body>
</html>
Project Components

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button class="btn btn-dark" type="button">Dark</button>

<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>


<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
Social Button

<button type="button" class="btn btn-outline-google">Signup with Google</button>
<button type="button" class="btn btn-outline-facebook">Signup with Facebook</button>

Widgets


<ul class="chat-list">
    <li class="online">
        <div class="hover_action">
            <button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
            <button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
            <button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
        </div>
        <a href="#" class="card">
            <div class="card-body">
                <div class="media">
                    <div class="avatar me-3">
                        <span class="status rounded-circle"></span>
                        <img class="avatar rounded-circle" src="assets/images/xs/avatar5.jpg" alt="avatar">
                    </div>
                    <div class="media-body overflow-hidden">
                        <div class="d-flex align-items-center mb-1">
                            <h6 class="text-truncate mb-0 me-auto">Jason Porter</h6>
                            <p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
                        </div>
                        <div class="text-truncate">It is a long established fact that a reader w...</div>
                    </div>
                </div>
            </div>
        </a>
    </li>
</ul>
                            

<ul class="chat-list">
    <li>
        <div class="hover_action">
            <button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
            <button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
            <button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
        </div>
        <a href="group-chat.html" class="card">
            <div class="card-body">
                <div class="media">
                    <div class="avatar me-3">
                        <span class="status rounded-circle"></span>
                        <div class="avatar rounded-circle no-image timber">
                            <span>UD</span>
                        </div>
                    </div>
                    <div class="media-body overflow-hidden">
                        <div class="d-flex align-items-center mb-1">
                            <h6 class="text-truncate mb-0 me-auto">UI-Design Group</h6>
                            <p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
                        </div>
                        <div class="text-truncate">
                            <i class="zmdi zmdi-file-text me-1"></i> It is a long established fact that a reader w...
                            <div class="avatar-list avatar-list-stacked mt-1">
                                <img class="avatar xs rounded" src="assets/images/xs/avatar5.jpg" data-toggle="tooltip" data-placement="top" title="" data-original-title="Sean">
                                <img class="avatar xs rounded" src="assets/images/xs/avatar6.jpg" data-toggle="tooltip" data-placement="top" title="" data-original-title="Martin">
                                <img class="avatar xs rounded" src="assets/images/xs/avatar1.jpg" data-toggle="tooltip" data-placement="top" title="" data-original-title="Terry">
                                <img class="avatar xs rounded" src="assets/images/xs/avatar4.jpg" data-toggle="tooltip" data-placement="top" title="" data-original-title="Michelle">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </li>
</ul>
Calendar

<!-- calendar Plugin css file -->
<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css">

<div class="body mt-4">
    <div id="mini-calendar"></div>
</div>

<!-- calendar Plugin js file -->
<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<!-- calendar page js file -->
<script>
    // mini calendar js 
    $('#mini-calendar').datepicker({
        todayHighlight: true,
        beforeShowDay: function(date){
            if (date.getMonth() == (new Date()).getMonth())
                switch (date.getDate()){
                case 4:
                    return {
                    tooltip: 'Example tooltip',
                    classes: 'active'
                    };
                case 8:
                    return false;
                case 12:
                    return "green";
            }
        }
    });
</script>
My Notes
  • It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 

<ul class="list-unstyled">
    <li class="card border-0 mb-2">
        <span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</span>
        <button class="btn btn-sm btn-link"><i class="zmdi zmdi-delete text-danger"></i></button>
    </li>
</ul>
My Notes

<ul class="list-unstyled todo-list-items">
    <li>
        <label class="c_checkbox">
            <input type="checkbox">
            <span class="checkmark"></span>
            <span class="ms-2">Update new code on github</span>
        </label>
        <button class="btn btn-sm btn-link" type="submit"><i class="zmdi zmdi-delete"></i></button>
    </li>
    <li>
        <label class="c_checkbox">
            <input type="checkbox">
            <span class="checkmark"></span>
            <span class="ms-2">Meeting with design team and updates</span>
        </label>
        <button class="btn btn-sm btn-link" type="submit"><i class="zmdi zmdi-delete"></i></button>
    </li>
    <li>
        <label class="c_checkbox">
            <input type="checkbox">
            <span class="checkmark"></span>
            <span class="ms-2">Send project zip file to developer</span>
        </label>
        <button class="btn btn-sm btn-link" type="submit"><i class="zmdi zmdi-delete"></i></button>
    </li>
    <li>
        <label class="c_checkbox">
            <input type="checkbox">
            <span class="checkmark"></span>
            <span class="ms-2">Create new design psd for onepage</span>
        </label>
        <button class="btn btn-sm btn-link" type="submit"><i class="zmdi zmdi-delete"></i></button>
    </li>
</ul>
User Card
avatar
Michelle Green
[email protected]

+14 123 456 789 - New york (USA)


<div class="card border-0 text-center pt-3 mb-4">
    <div class="card-body">
        <div class="card-user-avatar">
            <img src="assets/images/user.png" alt="avatar">
            <button type="button" class="btn btn-secondary btn-sm"><i class="zmdi zmdi-edit"></i></button>
        </div>
        <div class="card-user-detail mt-4">
            <h4>Michelle Green</h4>
            <span class="text-muted">[email protected]</span>
            <p>+14 123 456 789 - New york (USA)</p>
            <div class="social">
                <a class="icon p-2" href="#" data-toggle="tooltip" title="" data-original-title="Facebook"><i class="zmdi zmdi-facebook-box"></i></a>
                <a class="icon p-2" href="#" data-toggle="tooltip" title="" data-original-title="Github"><i class="zmdi zmdi-github-box"></i></a>
                <a class="icon p-2" href="#" data-toggle="tooltip" title="" data-original-title="Linkedin"><i class="zmdi zmdi-linkedin-box"></i></a>
                <a class="icon p-2" href="#" data-toggle="tooltip" title="" data-original-title="Instagram"><i class="zmdi zmdi-instagram"></i></a>
            </div>
        </div>
    </div>
</div>
Sign in

Sign in

Make it simple, but significant

Reset password
Sign in

Don't have an account yet Sign up.


<div class="authentication">

    <div class="container d-flex flex-column">
        
        <div class="row align-items-center justify-content-center no-gutters min-vh-100">

            <div class="col-12 col-md-7 col-lg-5 col-xl-4 py-8 py-md-11">

                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <!-- Heading -->
                        <h3 class="text-center">Sign in</h3>

                        <!-- Text -->
                        <p class="text-center mb-6">Make it simple, but significant</p>

                        <!-- Form -->
                        <form class="mb-4 mt-5">
                            <!-- Email -->
                            <div class="input-group mb-2">
                                <input type="email" class="form-control form-control-lg border-end-0" placeholder="Enter your email">
                                <div class="input-group-append">
                                    <span class="input-group-text border-start-0"><i class="zmdi zmdi-email"></i></span>
                                </div>
                            </div>

                            <!-- Password -->
                            <div class="input-group mb-4">
                                <input type="password" class="form-control form-control-lg border-end-0" placeholder="Enter your password">
                                <div class="input-group-append">
                                    <span class="input-group-text border-start-0"><i class="zmdi zmdi-lock"></i></span>
                                </div>
                            </div>

                            <div class="form-group d-flex justify-content-between">
                                <label class="c_checkbox">
                                    <input type="checkbox">
                                    <span class="ms-2 todo_name">Remember me</span>
                                    <span class="checkmark"></span>
                                </label>
                                <a class="link" href="password-reset.html">Reset password</a>
                            </div>

                            <!-- Submit -->
                            <div class="text-center mt-5">
                                <a href="index.html" class="btn btn-lg btn-primary" title="">Sign in</a>
                            </div>
                        </form>

                        <!-- Text -->
                        <p class="text-center mb-0">Don't have an account yet <a class="link" href="signup.html">Sign up</a>.</p>
                    </div>
                </div>
                
            </div>

            <div class="signin-img d-none d-lg-block">
                <img src="assets/images/signin-img-cyan.svg" alt="Sign In Image"> 
            </div>

        </div> <!-- / .row -->

    </div>

</div>
Chat Body
  • avatar
    Jason, 7:19 PM
    Hello,
    How are you?
    Edit Share Delete
  • avatar
    Jason, 7:19 PM
    Hello, please find attachment, let me know if any changes.
    Design file.pdf
    2.7 mb
    Edit Share Delete
  • Sunday
  • 7:19 PM
    Edit Share Delete
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • avatar
    Jason, 7:19 PM
    Okay, All the Lorem Ipsum generators on the Internet
    Edit Share Delete
  • 7:19 PM
    Edit Share Delete
    Hello, David
    Edit Share Delete
    We have send some project shot, please review
  • avatar
    Jason, 7:19 PM
    Okay,
    Edit Share Delete
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
    Edit Share Delete
    Design file.psd
    22.5 mb
    Project detail.doc
    2.8 mb
    Edit Share Delete
  • Today
  • 7:19 PM
    Edit Share Delete
    If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
    Edit Share Delete
    Animation logo.aep
    47.2 mb
  • avatar 

<ul class="list-unstyled py-4">

    <!-- Message: Left -->
    <li class="d-flex message">

        <!-- Avatar -->
        <div class="mr-lg-3 me-2">
            <img class="avatar sm rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
        </div>
        <!-- End Avatar -->

        <div class="message-body">
            <span class="date-time text-muted">Jason, 7:19 PM</span>

            <div class="message-row d-flex align-items-center">

                <!-- Message: content -->
                <div class="message-content p-3">
                    Hello, <br> How are you?
                </div>

                <!-- Message: dropdown -->
                <div class="dropdown">
                    <a class="text-muted ms-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="zmdi zmdi-more-vert"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Edit</a>
                        <a class="dropdown-item" href="#">Share</a>
                        <a class="dropdown-item" href="#">Delete</a>
                    </div>
                </div>
                <!-- End Message: dropdown -->

            </div>
        </div>

    </li>

    <!-- Message: Divider -->
    <li class="d-flex message divider mt-xl-5 mt-md-3 mb-xl-5 mb-md-3">
        <small class="text-muted">Sunday</small>
    </li>
    <!-- End message divider -->

    <!-- Message: Right-->
    <li class="d-flex message right">

        <div class="message-body">
            <span class="date-time text-muted">7:19 PM <i class="zmdi zmdi-check-all text-primary"></i></span>

            <div class="message-row d-flex align-items-center justify-content-end">

                <!-- Message: dropdown -->
                <div class="dropdown">
                    <a class="text-muted me-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="zmdi zmdi-more-vert"></i>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Edit</a>
                        <a class="dropdown-item" href="#">Share</a>
                        <a class="dropdown-item" href="#">Delete</a>
                    </div>
                </div>
                <!-- End Message: dropdown -->

                <!-- Message: content -->
                <div class="message-content border p-3">
                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                </div>

            </div>
        </div>

    </li>

    <!-- Message: Left Typing -->
    <li class="d-flex message">

        <!-- Avatar -->
        <div class="mr-lg-3 me-2">
            <img class="avatar sm rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
        </div>
        <!-- End Avatar -->

        <div class="message-body">

            <div class="message-row d-flex align-items-center">

                <!-- Message: content -->
                <div class="message-content p-3">
                    <div class="wave">
                        <span class="dot"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </div>
                </div>

            </div>

        </div>

    </li>

</ul>
Customer Support

You can request for support via email or GetBootstrap item comments.

We will assist you any problem you encounter while building your Chat App via this template

We use request help form in comments and email to manage customer support. Soon, as we grow, we will invest and find the best customer support system we can use to serve you better. For the meantime, submit a help request to the link given for any issues and concerns that you have. Don't worry, we will respond to you as quickly as we can. Thank you.

© 2020. POSTMAN : Chat App Documentation v1.0.0. All Rights Reserved.

Created by: PuffinTheme

Change Log
Version 1.0.1 11 Feb 2021 -- Update bootstrap v 5.0.0.beta2
Version 1.0.0 07 Sept 2020 -- Initial Release