title: Bootstrap 4 - How can I fit the column like size of content?
body: <p>I do have this situation:
  [![enter image description here][1]][1]</p>
  
  <p><strong>What I would like to have is:</strong></p>
  
  <ul>
  <li><p><strong>Number 1:</strong> Fit column width to the content / in that case to the imgage.</p></li>
  <li><p><strong>Number 2:</strong> Fit the column width to the text "Title of Content"</p></li>
  <li><p><strong>Number 3:</strong> Fit width of this column like 'the rest of width til end'. So be flexible.</p></li>
  </ul>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>  &lt;div class="container-fluid"&gt;
      &lt;div class="jumbotron"&gt;
        &lt;div class="row"&gt;        
          &lt;div class="col-xl-3 .mx-auto text-center"&gt;
            &lt;div class="row"&gt;              
                &lt;div class="col-xl-1  bg-dark"&gt;
                   &lt;img src="img/01_number_in_circular.svg" alt="Step 1"&gt;
                &lt;/div&gt;
                &lt;div class="col-xl-11 bg-success"&gt;
                    &lt;h2&gt;Title of Content&lt;/h2&gt;
                    &lt;p&gt;Description Text in short form.&lt;/p&gt;
                &lt;/div&gt;              
            &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-xl-9 bg-info"&gt;
              Column 3            
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I also have tried with <code>col-xl-*</code>, but it doesn't work. </p>
  
  <p>Is there a class that I can apply for doing that?
  I hope, you can help me. Thank you in advance.</p>