title: How to make the width to fit the text, and not be the full width with Bootstrap
body: <p>Here I have a title which I put into a row so it will take specific height. It is working, but the problem is that my <code>h1</code> is taking the whole row. I mean that I want the width of my text to be only as wide as the text is and not to be the same width with the parent row. Do you know any way how I can do this?</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-html lang-html prettyprint-override"><code>    
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Survey Creato&lt;/title&gt;
      &lt;link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous"
      /&gt;
      &lt;link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
      /&gt;
    &lt;/head&gt;
  
    &lt;body style="background-color: rgb(0, 0, 0)"&gt;
      &lt;div style="height: 120px"&gt;
        &lt;div class="w-100 h-50" style="background-color: rgb(255, 255, 255)"&gt;
        &lt;/div&gt;
        &lt;div
          class="w-100 h-50 d-inline-block"
          style="background-color: rgb(134, 188, 37)"
        &gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="d-flex justify-content-center mt-5"&gt;
        &lt;div
          id="survey"
          class="container justify-content-center"
          style="height: 600px; width: 1000px; background-color: white"
        &gt;
          &lt;div class="row"&gt;
            &lt;h1
              class="display-4 mt-3 text-secondary text-center border"
              contenteditable="true"
            &gt;
              Survey Name
            &lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>