title: How to make right/left icons/text lists in Bootstrap?
body: <p>I'm converting an old site to a responsive site using Bootstrap, I want to find a general solution which converts all old layout format which uses tables to show icons on the left and text on the right.</p>
  
  <p>So I need it to show texts regardless of the length next to icons in a list like this:</p>
  
  <p><a href="https://i.stack.imgur.com/pnBlT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pnBlT.png" alt="enter image description here"></a></p>
  
  <p>But if the width gets too small, then it should show like this:</p>
  
  <p><a href="https://i.stack.imgur.com/kWcOe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWcOe.png" alt="enter image description here"></a></p>
  
  <p>The icon can either be a graphic, a Font Awesome character, or a word, and should always stay the same width. </p>
  
  <p>But the right text width should be able to vary in length and wrap but stay left aligned to the right of the icon.</p>
  
  <p>So far, I have this:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-1"&gt;ICON&lt;/div&gt;
    &lt;div class="col-xs-11"&gt;This is the longer text.&lt;/div&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;div class="col-xs-1"&gt;ICON&lt;/div&gt;
    &lt;div class="col-xs-11"&gt;This is another the longer text.&lt;/div&gt;
    &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But on width "lg" it breaks up:</p>
  
  <p><a href="https://i.stack.imgur.com/sr6MD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sr6MD.png" alt="enter image description here"></a></p>
  
  <p>And on width "xs" it wraps under:</p>
  
  <p><a href="https://i.stack.imgur.com/eAXL0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eAXL0.png" alt="enter image description here"></a></p>
  
  <p>How can I make it so that:</p>
  
  <ul>
  <li>icon column has a constant width</li>
  <li>text column stays to the right of the icon column but wraps its text according to width but keeps its left margin for the addition lines</li>
  <li>text column always stays left aligned to icon column</li>
  </ul>