Best way to have text in one line using bootstrap

Question

I have faced a styling problem. What is the best way to have my text lines in a single line? Screenshot of the problem:

My code is rather simple:

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

Answer 1

Using CSS' overflow, your element needs to have somewhat fixed boundries. Since you're writing some plain text and your browser is wrapping that automatically into a new line and your elements boundries are getting exceeded. In order to disable that you'd have to use white-space: nowrap; first. After that you are able to go ahead with overflow by doing overflow: auto;.

Since you need that on all of your li elements, so you don't have to manually check if something is weird or not, you'd do so:

li {
  overflow: auto;
  white-space: nowrap;
}

Your text shouldn't overflow anymore and you can now scroll inside of your element to show off the missing content. Demo