blue chat widget

This bootstrap snippet called "blue chat widget" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: chat,user

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<div class="col-md-6 bootstrap snippet">
            <div class="widget-container scrollable chat">
              <div class="heading">
                <i class="fa fa-comments"></i>Chat Widget<i class="fa fa-smile pull-right"></i>
              </div>
              <div class="widget-content padded">
                <ul>
                  <li>
                    <img width="30" height="30" src="http://andrewreifman.com/se7en/images/avatar-male.jpg">
                    <div class="bubble">
                      <a class="user-name" href="#">John Smith</a>
                      <p class="message">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
                      </p>
                      <p class="time">
                        <strong>Today </strong>3:53 pm
                      </p>
                    </div>
                  </li>
                  <li class="current-user">
                    <img width="30" height="30" src="http://andrewreifman.com/se7en/images/avatar-female.jpg">
                    <div class="bubble">
                      <a class="user-name" href="#">Jane Smith</a>
                      <p class="message">
                        Donec odio. Quisque volutpat mattis eros.
                      </p>
                      <p class="time">
                        <strong>Today </strong>3:53 pm
                      </p>
                    </div>
                  </li>
                  <li>
                    <img width="30" height="30" src="http://andrewreifman.com/se7en/images/avatar-male.jpg">
                    <div class="bubble">
                      <a class="user-name" href="#">John Smith</a>
                      <p class="message">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
                      </p>
                      <p class="time">
                        <strong>Today </strong>3:53 pm
                      </p>
                    </div>
                  </li>
                  <li>
                    <img width="30" height="30" src="http://andrewreifman.com/se7en/images/avatar-male.jpg">
                    <div class="bubble">
                      <a class="user-name" href="#">John Smith</a>
                      <p class="message">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
                      </p>
                      <p class="time">
                        <strong>Today </strong>3:53 pm
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="post-message">
                <input class="form-control" placeholder="Write your message here…" type="text"><input class="btn btn-primary" type="submit" value="Post">
              </div>
            </div>
          </div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview



body{margin-top:20px;}

.widget-container {
  min-height: 320px;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
  .widget-container.fluid-height {
    height: auto;
    min-height: 0; }
  .widget-container.small {
    min-height: 120px;
    height: 200px; }
  .widget-container.gallery {
    min-height: 400px; }
  .widget-container .heading {
    background: rgba(255, 255, 255, 0.94);
    height: 50px;
    padding: 15px 15px;
    color: #007aff;
    font-size: 15px;
    width: 100%;
    font-weight: 400;
    margin: 0; }
    .widget-container .heading [class^="fa"], .widget-container .heading [class*="fa"] {
      margin-right: 10px;
      font-size: 14px; }
      .widget-container .heading [class^="fa"].pull-right, .widget-container .heading [class*="fa"].pull-right {
        margin-right: 0px;
        margin-left: 15px;
        opacity: 0.35;
        font-size: 1.1em; }
      .widget-container .heading [class^="fa"]:hover, .widget-container .heading [class*="fa"]:hover {
        cursor: pointer;
        opacity: 1; }
  .widget-container .tabs {
    background: whitesmoke;
    border-bottom: 1px solid #dddddd; }
  .widget-container .widget-content {
    width: 100%; }
  .widget-container.scrollable {
    position: relative;
    height: 400px;
    padding-top: 50px; }
    .widget-container.scrollable.chat-home {
      height: 427px; }
    .widget-container.scrollable .heading {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10; }
    .widget-container.scrollable .shadow {
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); }
    .widget-container.scrollable .widget-content {
      height: 100%;
      position: relative;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; }

.padded {
  padding: 15px; }


.chat {
  padding-bottom: 52px; }
  .chat .widget-content {
    padding-right: 20px;
    background-color: white; }
    .chat .widget-content .scrollbar-path-vertical {
      bottom: 56px !important; }
    .chat .widget-content ul {
      list-style: none;
      padding: 0; }
      .chat .widget-content ul li {
        margin-bottom: 14px;
        padding-left: 40px;
        padding-right: 80px;
        position: relative; }
        .chat .widget-content ul li:last-child {
          margin-bottom: 0; }
        .chat .widget-content ul li img {
          position: absolute;
          bottom: -2px;
          left: 0;
          border-radius: 50%; }
        .chat .widget-content ul li .bubble {
          padding: 12px 15px;
          background: #e5e5ea;
          border-radius: 15px;
          position: relative; }
          .chat .widget-content ul li .bubble:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: -5px;
            background: url("http://andrewreifman.com/se7en/images/chat-left.png") left top no-repeat;
            width: 13px;
            height: 13px;
            display: block; }
            @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
              .chat .widget-content ul li .bubble:after {
                background-image: url("http://andrewreifman.com/se7en/images/chat-left@2x.png");
                background-size: 13px 13px; } }
          .chat .widget-content ul li .bubble .user-name {
            font-size: 1.1em;
            margin-bottom: 8px;
            display: inline-block; }
          .chat .widget-content ul li .bubble p.message {
            font-size: 0.95em;
            margin-bottom: 12px;
            color: #333333; }
          .chat .widget-content ul li .bubble .time {
            font-size: 0.8em;
            color: #888888;
            margin-bottom: 0; }
        .chat .widget-content ul li.current-user {
          padding-right: 40px;
          padding-left: 80px; }
          .chat .widget-content ul li.current-user img {
            right: 0;
            left: auto; }
          .chat .widget-content ul li.current-user .bubble {
            background: #178efe; }
            .chat .widget-content ul li.current-user .bubble:after {
              background: url("http://andrewreifman.com/se7en/images/chat-right.png") left top no-repeat;
              left: auto;
              right: -6px; }
              @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
                .chat .widget-content ul li.current-user .bubble:after {
                  background-image: url("http://andrewreifman.com/se7en/images/chat-right@2x.png");
                  background-size: 13px 13px; } }
          .chat .widget-content ul li.current-user p, .chat .widget-content ul li.current-user a {
            color: white !important; }
          .chat .widget-content ul li.current-user .time {
            opacity: 0.75; }
  .chat .post-message {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 52px;
    padding: 8px 60px 8px 8px;
    background: #f2f2f2;
    border-top: 1px solid #cccccc; }
    .chat .post-message input[type="text"] {
      width: 100%;
      height: 100%; }
    .chat .post-message input[type="submit"] {
      position: absolute;
      top: 12px;
      right: 10px;
      margin: 0;
      border: 0;
      background: transparent;
      color: #007aff;
      font-weight: 600;
      font-size: 14px; }

.widget-container.chat-page {
  height: 700px;
  padding: 0 0 102px 222px;
  position: relative;
  background-color: #f2f2f2; }
  .widget-container.chat-page .contact-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 222px;
    height: 100%;
    border-right: 1px solid #dddddd;
    padding-top: 50px; }
    .widget-container.chat-page .contact-list .heading {
      background-color: transparent;
      color: #777777;
      border-bottom: 1px solid #d6d6d6;
      font-size: 16px;
      padding-top: 12px;
      padding-bottom: 14px;
      background-color: #f2f2f2;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; }
      .widget-container.chat-page .contact-list .heading i {
        margin-top: 4px;
        font-size: 1em; }
    .widget-container.chat-page .contact-list ul {
      list-style: none;
      padding-left: 15px;
      margin: 0;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%; }
      .widget-container.chat-page .contact-list ul li {
        border-bottom: 1px solid #d6d6d6;
        margin: 0; }
        .widget-container.chat-page .contact-list ul li a {
          display: block;
          position: relative;
          left: -15px;
          width: 220px;
          padding-left: 15px;
          padding: 8px 0 8px 15px;
          color: #888888; }
          .widget-container.chat-page .contact-list ul li a:hover {
            background-color: #e6e6e6;
            color: #666666; }
        .widget-container.chat-page .contact-list ul li img {
          border-radius: 50%;
          margin-right: 10px; }
        .widget-container.chat-page .contact-list ul li i {
          font-size: 12px;
          float: right;
          margin: 9px 20px 0 0; }
  .widget-container.chat-page > .heading {
    position: relative !important; }
  .widget-container.chat-page .post-message {
    position: relative; }
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 10th 2016, 23:33

Views: 439