title: How to make only 1 word move with type writer javascript?
body: <p>I tried to make the "initial text" centered, while only the secondary text should be dynamic and moving with the type writer effect.. I don't want to align the text to the left with <code>text-left</code>, but rather keep it all in the center and only have the type words move dynamically.</p>
  
  <p>I tried to add <code>ml-5</code> but it doesn't have any effect.</p>
  
  <p>I'm using bootstrap and I want this to be also mobile friendly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// ES6 Class
  class TypeWriter {
    constructor(txtElement, words, wait = 3000) {
      this.txtElement = txtElement;
      this.words = words;
      this.txt = '';
      this.wordIndex = 0;
      this.wait = parseInt(wait, 10);
      this.type();
      this.isDeleting = false;
    }
  
    type() {
      // Current index of word
      const current = this.wordIndex % this.words.length;
      // Get full text of current word
      const fullTxt = this.words[current];
  
      // Check if deleting
      if(this.isDeleting) {
        // Remove char
        this.txt = fullTxt.substring(0, this.txt.length - 1);
      } else {
        // Add char
        this.txt = fullTxt.substring(0, this.txt.length + 1);
      }
  
      // Insert txt into element
      this.txtElement.innerHTML = `&lt;span class="txt"&gt;${this.txt}&lt;/span&gt;`;
  
      // Initial Type Speed
      let typeSpeed = 300;
  
      if(this.isDeleting) {
        typeSpeed /= 2;
      }
  
      // If word is complete
      if(!this.isDeleting &amp;&amp; this.txt === fullTxt) {
        // Make pause at end
        typeSpeed = this.wait;
        // Set delete to true
        this.isDeleting = true;
      } else if(this.isDeleting &amp;&amp; this.txt === '') {
        this.isDeleting = false;
        // Move to next word
        this.wordIndex++;
        // Pause before start typing
        typeSpeed = 500;
      }
  
      setTimeout(() =&gt; this.type(), typeSpeed);
    }
  }
  
  
  // Init On DOM Load
  document.addEventListener('DOMContentLoaded', init);
  
  // Init App
  function init() {
    const txtElement = document.querySelector('.txt-type');
    const words = JSON.parse(txtElement.getAttribute('data-words'));
    const wait = txtElement.getAttribute('data-wait');
    // Init TypeWriter
    new TypeWriter(txtElement, words, wait);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');
  
  body {
    font-family: 'Raleway', sans-serif;
    height: 100vh;
    background: #333 url('https://image.ibb.co/n5A2HU/showcase.jpg') no-repeat center center / cover;
    color: #ccc;
    overflow:hidden;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 3rem;
  }
  
  h1, h2 {
    font-weight: 200;
    margin: 0.4rem;
  }
  
  h1 {
    font-size: 3.5rem;
  }
  
  h2 {
    font-size: 2rem;
    color: #aaa;
  }
  
  /* Cursor */
  .txt-type &gt; .txt {
    border-right: 0.2rem solid #777;
  }
  .align-self-baseline {
      align-self: baseline!important
  }
  @media(min-width: 1200px) {
    h1 {
      font-size: 5rem;
    }
  }
  
  @media(max-width: 800px) {
    .container {
      padding: 0 1rem;
    }
  
    h1 {
      font-size: 3rem;
    }
  }
  
  @media(max-width: 500px) {
    h1 {
      font-size: 2.5rem;
    }
  
    h2 {
      font-size: 1.5rem;
    }
  }
  
  .text-center {
      text-align: center!important
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;title&gt;Welcome To My Site&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class="container"&gt;
      &lt;h3 class="text-center"&gt;Initial text,
        &lt;span class="txt-type" data-wait="1000" data-words='["Secondary text"]'&gt;&lt;/span&gt;
      &lt;/h3&gt;
    &lt;/div&gt;
    
    &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>