Best way to have text in one line using bootstrap
<p>I have faced a styling problem. 
What is the best way to have my text lines in a single line? 
Screenshot of the problem:</p>

<p><a href="https://i.stack.imgur.com/xQqWU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xQqWU.png" alt="enter image description here"></a></p>

<p>My code is rather simple:</p>

<pre><code>&lt;section id="key-features" class="key-features"&gt;
        &lt;div class="container"&gt;
            &lt;h2&gt;Key Features&lt;/h2&gt;
            &lt;div class="col-md-4 col-sm-4 col-xs-12"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;img src="images/icons/1.png" alt="Atmospheric pressure test"/&gt;Atmospheric pressure test&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/icons/compass.png" alt="Altitude monitor"/&gt;Altitude monitor&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/icons/alc.png" alt="Temperature"/&gt;Temperature test&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/icons/hr.png" alt="Heart rate"/&gt;Heart rate monitor&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/icons/shoe.png" alt="Pedometer"/&gt;Pedometer&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4 col-sm-4 col-xs-12 pull-left"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;img src="images/icons/food.png" alt="Calorie"/&gt;Calorie&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/icons/location.png" alt="Distance"/&gt;Distance&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/icons/sleep.png" alt="Sleep monitor"/&gt;Sleep monitor&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/icons/bell.png" alt="Sedentary remind"/&gt;Sedentary remind&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/icons/drink.png" alt="Water drink remind"/&gt;Water drink remind&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4 col-sm-4 col-xs-12 pull-left"&gt;
                &lt;ul&gt;
                        &lt;li&gt;&lt;img src="images/icons/alarm.png" alt="test"/&gt;Alarm remind&lt;/li&gt;
                        &lt;li&gt;&lt;img src="images/icons/phone.png" alt="Call remind"/&gt;Call remind&lt;/li&gt;
                        &lt;li&gt;&lt;img src="images/icons/camera.png" alt="Photograph"/&gt;Photograph&lt;/li&gt;
                        &lt;li&gt;&lt;img src="images/icons/dna.png" alt="Share moments"/&gt;Share moments&lt;/li&gt;
                        &lt;li&gt;&lt;img src="images/icons/bt.png" alt="Anti-los"/&gt;Anti-lost&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
</code></pre>