[How To] Einfaches Chat Fenster mit Bootstrap 4

[Ritzga]

Ein Chat mit Bootstrap 4 ? Kein Problem @DerGothic!

Vorschau

HTML:

<ul class="container list-unstyled chat">
    <li class="own">
        <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
        <div>
            <span>Doggo</span>
            <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.
            I am bekom fat long woofer snoot puggo, smol long woofer.</p>
            <span>09:11 09.08.2020</span>
        </div>
    </li>
    <li class="own">
        <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
        <div>
            <span>Doggo</span>
            <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.</p>
            <span>10:35 09.08.2020</span>
        </div>
    </li>
    <li>
        <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
        <div>
            <span>Borker</span>
            <p>I am bekom fat long woofer snoot puggo, smol long woofer.</p>
            <span>11:21 09.08.2020</span>
        </div>
    </li>
    <li>
        <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
        <div>
            <span>Borker</span>
            <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.
            I am bekom fat long woofer snoot puggo, smol long woofer.</p>
            <span>11:23 09.08.2020</span>
        </div>
    </li>
    <li class="own">
        <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
        <div>
            <span>Doggo</span>
            <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.</p>
            <span>12:04 09.08.2020</span>
        </div>
    </li>
    <li>
        <img src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="...">
        <div>
            <span>Borker</span>
            <p>Long woofer borkf long woofer wow very biscit ruff, long bois fat boi length boy.
            I am bekom fat long woofer snoot puggo, smol long woofer.</p>
            <span>12:31 09.08.2020</span>
        </div>
    </li>
</ul>

CSS:

.chat p {
  margin-bottom: 0;
}
.chat img {
  height: 4rem;
  width: 4rem;
  margin-right: 1rem;
}
.chat li {
  display: -ms-flexbox !important;
  display: flex !important;
  margin-bottom: 2rem;
  position: relative;
  text-align: left;
  width: 50%;
  margin-left: 0;
}
.chat li:not(.own) span:first-of-type {
  font-size: 1.2rem;
  font-weight: bolder;
}
.chat li:not(.own) span:first-of-type:after {
  content: "\a";
  white-space: pre;
}
.chat li span:last-of-type {
  position: absolute;
  bottom: -1rem;
  right: 0;
  font-size: 0.6rem;
}
.chat li:not(.own):after {
  content: "";
  position: absolute;
  margin-top: -0.4rem;
  margin-left: -5px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #82ccdd;
  transform: rotate(45deg);
  left: 4.5rem;
  top: 2rem;
}
.chat li div {
  border-radius: 5%;
  background-color: #82ccdd;
  padding: 0.2rem 0.6rem 0.2rem 0.2rem;
  min-width: 86%;
}
.chat .own {
  margin-left: 50%;
}
.chat .own span:first-of-type {
  display: none;
}
.chat .own:after {
  content: "";
  position: absolute;
  margin-top: -6px;
  margin-left: -5px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #82ccdd;
  transform: rotate(-45deg);
  right: -15px;
  top: 10px;
}
.chat .own img {
  display: none;
}

Die Funktionsweise, ist simpel. Es wird eine unsortierte List hierfür verwendet. Das IMG-Tag ist der Avatar des Benutzers. Der erste SPAN-Tag ist der Username und der zweite SPAN-Tag ist das Datum.

Falls ihr Fragen, oder Verbesserungen habt, dann schreibt es mir!

Livecode
Find live version here!