JSFiddle - React, Tailwind, and code Playground

by tagliala

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<h4>Bootstrap default</h4>
<div class="div-sm">
    <ul class="list-inline">
        <li><span class="glyphicon glyphicon-tag"></span> First Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Second Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Third Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Fourth Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Fifth Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Sixth Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Seventh Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Eighth Tag</li>
    </ul>
</div>
<hr>
<h4>Proposed fix</h4>
<div class="div-sm">
    <ul class="list-inline-fix">
        <li><span class="glyphicon glyphicon-tag"></span> First Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Second Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Third Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Fourth Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Fifth Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Sixth Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Seventh Tag</li>
        <li><span class="glyphicon glyphicon-tag"></span> Eighth Tag</li>
    </ul>
</div>

CSS

body {
    padding: 20px;
}

.div-sm {
    background-color: #eee;
    width: 320px;
}

.list-inline-fix {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}
.list-inline-fix > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}