JSFiddle - React, Tailwind, and code Playground

by joeycakes

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">

  <h1 class="page-header">List items <small>.show</small> </h1>
  
  <ul class="list-inline">
    <li class="hide show">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
  
  <ul class="pagination">
    <li class="hide show"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
  
  <h2>Fixed</h2>
  
  <div class="fix">
  
    <ul class="list-inline">
      <li class="hide show">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>

    <ul class="pagination">
      <li class="hide show"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
    
  </div>
  
</div>

CSS

.fix > .list-inline > li.show {
  display: inline!important;
}

.fix > .pagination > li.show {
  display: inline!important;
}