pagerが働かない（Bootstrap 4 & Rails 5）

Question

###前提・実現したいこと
Rail5でレイアウトにBootstrap 4を使いたい。が、ページャーがうまくいかない。
対策にご協力ください。

###発生している問題・エラーメッセージ

レイアウトが正しく表現されません。このような状態です。スクリーンショットです。show.html.erbにbootstrapのサンプルを追加してみました。

・previous
・next
の部分がダメです。その上のNavbarとグループボタンはそこそこレイアウトできているようです。（若干違うようですが）

###該当のソースコード
以下を参考に設定しました。
Rails5アプリにBootstrap4を導入
Bootstrap 4 Tutorial 43 - Pager
参考のコード

(application.jsの内容)
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets

(application.scssの内容)
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */
@import "bootstrap";

(show.html.erbの内容）
<p id="notice"><%= notice %></p>

<p>
<strong>Name:</strong>
<%= @user.name %>
</p>

<p>
<strong>Age:</strong>
<%= @user.age %>
</p>

<p>
<strong>Sex:</strong>
<%= @user.sex %>
</p>

<%= link_to 'Edit', edit_user_path(@user) %> |
<%= link_to 'Back', users_path %>

<%# ここまでは、デフォルトの内容です。以下に、参考コードを追加しました。 %>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="btn-group" role="group">
  <button type="button" class="btn btn-default">左</button>
  <button type="button" class="btn btn-default">中央</button>
  <button type="button" class="btn btn-default">右</button>
</div>

<br />
<br />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <br />

      <nav>
        <ul class="pager">
          <li><a href="#">Previous</a></li>
          <li><a href="#">Next</a></li>
        </ul>
      </nav>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <br />

      <nav>
        <ul class="pager">
          <li class="pager-prev"><a href="#">Previous</a></li>
          <li class="pager-next"><a href="#">Next</a></li>
        </ul>
      </nav>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
      <br />

      <nav>
        <ul class="pager">
          <li class="pager-prev disabled"><a href="#">Previous</a></li>
          <li class="pager-next"><a href="#">Next</a></li>
        </ul>
      </nav>
    </div>
  </div>

</div>

<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

###試したこと

上記の参考コードindex.htmlを丸ごと、application.html.erbと入れ替えてみても、レイアウトされませんでした。
他のclassが使えている様子なので、<ul class="pager">がどこかでコンフリクトしているのかもしれません。

###補足情報(言語/FW/ツール等のバージョンなど)
Rails 5.0.5
Bootstrap 4.0.0.beta
gem bootstrap (4.0.0.beta)
gem jquery-rails (4.3.1)

検証用に作ったRails Appは次の手順です。
rails new demo
rails g scaffold user name:string age:integer sex:boolean
rails db:migrate

Answer 1

bootstrap4を導入されたと思いますが、
bootstrap3で書いていませんか？
3と４ではかなりclass名などが違います。
4alpha6と4betaでも違います。
paginationの部分を以下にするとどうでしょうか？
参考
v4alpha6の場合
v4alphaのpagination

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Comments

[NCC1701]

なんとclass="pager"は削除されたようです。
is class pager gone? bootstrap 4 とgoogleに尋ねたところ以下のページが見つかりました。
https://v4-alpha.getbootstrap.com/migration/
「Dropped the pager component as it was essentially slightly customized buttons.」
ボタンでなんとかしろということのようです。
（ページの両サイドに振り分けられるのが、以下のように簡単にできたので残念ですが。）
<ul class="pager">
<li class="pager-prev"><a href="#">Previous</a></li>
<li class="pager-next"><a href="#">Next</a></li>
</ul>