How to make right/left icons/text lists in Bootstrap?
<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>