title: How to put pager of a listview in a new line in Yii2
body: <p>I have a theme, which I have integrated with yii2, when using pager of list view, I have the pager beside divs I add to the list view items, I need to put the pager in a new line alone.
  I used the following view:</p>
  
  <pre><code>    &lt;style&gt;
      #items {
  
      }
  &lt;/style&gt;
  &lt;?php
  
  use yii\web\View;
  use yii\widgets\LinkPager;
  use yii\widgets\ListView;
  
  //This is a php syntax to write register scripts
  $this-&gt;registerJs("m_active='bio'", View::POS_END);
  ?&gt;
  &lt;div class=" container"&gt;
  
  
      &lt;div class="app-alem-form"&gt;
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  &lt;div id="bio" class="section bg1"&gt;
      &lt;div class="head color2"&gt;
          &lt;div class="title"&gt;سيرة العلماء&lt;/div&gt; &lt;i class="icon fa fa-graduation-cap"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="container flex1"&gt;
          &lt;!--&lt;div class="container container-fluid row" id="items"&gt;--&gt;
          &lt;!--&lt;div class="row" id="items"&gt;--&gt;
  
          &lt;?=
          ListView::widget([
              'dataProvider' =&gt; $listDataProvider,
              'options' =&gt; [
                  'tag' =&gt; 'div',
                  'class' =&gt; 'list-wrapper',
                  'id' =&gt; 'list-wrapper',
              ],
              'layout' =&gt; '{items}{pager}{summary}',
              'layout' =&gt; "{summary}\n{items}\n{pager}",
              'itemView' =&gt; function ($model, $key, $index, $widget) {
          echo ("&lt;div class='item-holder')&gt;
              &lt;a href = '?r=alem%2Fget-olama&amp;id=" . $model-&gt;attributes['id'] . "'&gt;
                      &lt;div class='item'&gt;
                      &lt;div class='default cover' style='background:url(img/olama/" . $model['c_image'] . "); background-size:contain;'&gt;&lt;/div&gt;
                      &lt;div class='title'&gt;" . $model-&gt;attributes['c_name'] . "&lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;/a&gt;
                      &lt;/div&gt;");
      },
              'pager' =&gt; [
                  'firstPageLabel' =&gt; 'first',
                  'lastPageLabel' =&gt; 'last',
                  'nextPageLabel' =&gt; '&gt;&gt;',
                  'prevPageLabel' =&gt; '&lt;&lt;',
                  'maxButtonCount' =&gt; 3,
              ],
          ]);
          ?&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the portion of my style sheet that is related to this page is the following:</p>
  
  <pre><code>#main .bio .container .item-holder {
      padding:10px;
      width:calc(100% / 4);
      display:table;
      /*    display: inline;*/
  }
  #main .bio .container .item-holder .item {
      background:#fff;
      border:1px solid #aaa;
      padding:10px;
  }
  #main .bio .container .item-holder .item .cover {
      width:100%;
      height:200px;
      border:1px double #aaa;
  }
  #main .bio .container .item-holder .item .title {
      text-align:center;
  }
  /*Site Main End*/
  #bio .container {
      flex-direction:row-reverse;
      flex-wrap:wrap;
      align-items:flex-start;
      justify-content:flex-start;
  }
  #bio .container .item-holder {
      padding:10px;
      width:calc(100% / 4);
  }
  #bio .container .item-holder .item {
      background:#fff;
      padding:10px;
  }
  #bio .container .item-holder .item .cover {
      width:100%;
      height:200px;
      border:1px double #aaa;
  }
  #bio .container .item-holder .item .title {
      text-align:center;
  }
  @media (max-width: 900px) { 
      #bio .container .item-holder {
          padding:10px;
          width:calc(100% / 2);
      }
  }
  @media (max-width: 600px) { 
      #bio .container .item-holder {
          padding:10px;
          width:calc(100% / 1);
      }
  }
  </code></pre>
  
  <p>The full style sheet is in the following :</p>
  
  <pre><code>    @font-face {
      font-family: tahoma;
      src: url(../fonts/Tahoma.ttf);
  }
  @font-face {
      font-family: droudKufi;
      src: url(../fonts/DroidKufi-Regular.ttf);
  }
  /* Site Fonts End*/
  body {
      margin:0;
      overflow:auto;
      font-family:droudKufi, arial;
      background:#eee;
  }
  form {
      margin:0;
  }
  input, textarea, select {
      outline:none;
      font-family:inherit;
      transition:ease 0.3s all;
      width:100%;
      padding:3px 7px;
      border:1px solid #aaa;
      direction:rtl;
      border-radius:5px;
  }
  input:focus, textarea:focus, select:focus {
      border-color:#32aae1 !important;
      box-shadow: 0px 0px 7px rgba(81, 203, 238, 1);; 
  }
  textarea {
      resize:none;
  }
  button {
      outline:none;
      font-family:inherit;
      cursor:pointer;
      transition:ease 0.3s all;
      border:1px solid #aaa;
      padding: 5px 10px;
      border-radius: 10px;
      font-size: 16px;
  }
  div {
      box-sizing:border-box;
  }
  a {
      text-decoration:none;
  }
  a {
      color:inherit;
  }
  .container { margin-right: auto; margin-left: auto; padding-left: 20px; padding-right: 20px; }
  @media (min-width: 901px) {.container { width: 870px; }}
  @media (min-width: 992px) { .container { width: 980px; }}
  @media (min-width: 1200px) { .container { width: 1180px; }}
  .color1 {
      color:#296E9D;
  }
  .color2 {
      color:#ED2024;
  }
  .default {
      background-repeat:no-repeat !important;
      background-position:center !important;
      background-size:initial;
      background:url(../img/logo.png) #fff;
  }
  .shadow-box {
      position:fixed;
      width:100vw;
      height:100vh;
      max-width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:99999;
      top:0;
      left:0;
      display:none;
  }
  .shadow-box .container {
      z-index:99999;
  }
  
  .shadow-box .overlay {
      position:absolute;
      background:rgba(0,0,0,0.8);
      width:100%;
      height:100%;
      top:0;
      left:0;
  }
  .section {
      padding:40px 0;
      text-align:center;
      width:100%;
  }
  .section.bg1 {
      background:#fff;
  }
  .section.bg2 {
      background:#296E9D;
  }
  .section .container.flex1 {
      display:flex;
      align-items:center;
      justify-content:center;
  }
  .section .container.flex2 {
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column
  }
  .section .btn1, .section .btn2:hover {
      color:#296E9D;
      background:#fff;
  }
  .section .btn1, .section .btn2 {
      margin-top:20px;
  }
  
  .section .btn2, .section .btn1:hover {
      color:#fff;
      background:#296E9D;
  }
  .section .head {
      margin-bottom:30px;
      display:flex;
      align-items:center;
      justify-content:center;
  }
  .section .head.color1 {
      color:#fff;
  }
  .section .head.color2 {
      color:#296E9D;
  }
  .section .head .title {
      font-size:38px;
  }
  .section  .head .icon {
      font-size:40px;
      margin-left:20px;
  }
  .pagination-holder {
      display:flex;
      justify-content:center;
      align-items:center;
      margin-top:20px;
      width:100%;
  }
  .pagination-holder .item {
      height:40px !important;
      width:40px;
      display:flex;
      justify-content:center;
      align-items:center;
      margin:0 5px;
      border-radius:10px;
      cursor:pointer;
      color:#296E9D;
      background:#fff;
      transition:ease 0.3s all;
      border:1px solid #aaa;
  }
  .pagination-holder .item.active {
      color:#fff;
      background:#296E9D;
      text-shadow:0 0 10px #fff;
  }
  .pagination-holder .item:hover {
      color:#fff;
      background:#296E9D;
  }
  /*Site Header Start*/
  #site-header {
      width:100%;
      padding:10px 0;
      background:#fff;
      z-index:9999999;
      border-bottom:1px solid #ddd;
  }
  #site-header .menu-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
  }
  #site-header .menu-bar .logo {
      display:flex;
      align-items:center;
  }
  #site-header .menu-bar .logo img{
      height:40px;
      margin-right:10px;
  }
  #site-header .menu-bar .logo .text {
      font-size:22px;
      font-weight:bold;
  }
  #site-header .menu-bar .logo .text span {
  }
  
  #site-header .menu-bar .menu {
      display:flex;
      align-items:center;
      font-size:16px;
      flex-direction:row-reverse;
  }
  #site-header .menu-bar .menu .item {
      transition:ease 0.3s all;
      border-radius:10px;
      color:#296E9D;
      position:relative;
  }
  #site-header .menu-bar .menu .item a {
      padding:5px 10px;
      display:flex;
      align-items:center;
      flex-direction:row-reverse;
  }
  #site-header .menu-bar .menu .item .icon {
      font-size:10px;
      margin-right:10px;
  }
  #site-header .menu-bar .menu .item:hover {
      color:#ED2024;
  }
  #site-header .menu-bar .menu .item.active {
      color:#fff;
      background:#296E9D;
      text-shadow: 0 0 20px #fff; 
  }
  #site-header .menu-bar .menu .item:hover .sub-menu {
      display:block;
  }
  #site-header .menu-bar .menu .item .sub-menu {
      position:absolute;
      top:100%;
      right:0;
      width:200px;
      background:#fff;
      text-align:right;
      border:1px solid #ddd;
      display:none;
      transition:ease 0.3s all;
      z-index: 9;
  }
  #site-header .menu-bar .menu .item .sub-menu .item {
      border-radius:0;
      border:0;
      border-bottom:1px solid #ddd;
  }
  #site-header .menu-bar .mobile-menu {
      display:none;
      cursor:pointer;
      position:relative;
      text-align:right;
  }
  #site-header .menu-bar  .mobile-nav {
      display:none;
      position:absolute;
      top:63px;
      height:calc(100vh - 62px);
      width:300px;
      background:#fff;
      right:0;
      overflow-y:auto;
      border-left:1px solid #ddd;
  }
  #site-header .menu-bar  .mobile-nav .sub-menu {
      display:none;
      background:#f1f1f1;
  }
  #site-header .menu-bar .mobile-menu:hover {
      color:#296E9D;
  }
  #site-header .menu-bar .mobile-menu.active {
      color:#ED2024;
  }
  #site-header .menu-bar .mobile-nav .item {
      padding:10px;
      transition:ease 0.3s all;
      border-bottom:1px solid #ddd;
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-direction:row-reverse;
      color:#296E9D;
      cursor:pointer;
  }
  #site-header .menu-bar .mobile-nav .item:hover {
      color:#ED2024;
  }
  #site-header .menu-bar .mobile-nav .item.active {
      color:#fff;
      background:#296E9D;
      text-shadow: 0 0 20px #fff; 
  }
  @media (max-width: 900px) {
      #site-header .menu-bar .menu {
          display:none;
      }
      #site-header .menu-bar .mobile-menu {
          display:block;
      }
      #site-header {
          position:fixed;
          top:0;
          left:0;
      }
      .header-space {
          margin-top:62px;
      }
  }
  
  /*Site Header End*/
  
  /*Site Main Start*/
  
  #main .top-carousel {
      width:100%;
      height:425px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
  }
  #main .top-carousel .slider1 {
      padding:0 100px;
  }
  #main .top-carousel .slider1 .item img {
      width:100%;
      height:200px;
  }
  #main .top-carousel .slider1 .item .text {
      text-align:center;
      height:59px;
      overflow:hidden;
      font-size:14px;
      background:#fff;
      border:1px solid #ddd;
      padding:0 5px;
  }
  #main .slider1 .owl-prev, .slider1 .owl-next {
      top:50%;
      transform:translateY(-64%);
      position:absolute;
      background:transparent !important;
      transition:all ease 0.3s;
  }
  #main .slider1 .owl-prev {
      left:0;
      margin-left:10px;
  }
  #main .slider1 .owl-next { 
      right:0;
      margin-right:10px;
  }
  #main .slider1 .owl-prev:after, .slider1 .owl-next:after {
      font-family: "FontAwesome";
      font-size: 148px;
      color:#D3D3D3;
      font-weight:bold;
      cursor:pointer;
  }
  
  #main .slider1 .owl-prev:after {
      content: '\f104';
  }
  #main .slider1 .owl-next:after {
      content: '\f105';
  }
  #main .qanda .carousel {
      max-width:100%;
  }
  @media (max-width: 900px) { 
      #main .top-carousel .slider1 {
          padding:0 70px;
      }
  }
  #main .qanda .slider2 .item {
      text-align:center;
      font-size:16px;
      margin-bottom:10px;
      direction:rtl;
  }
  #main .qanda .slider2 .item .title {
      font-weight:bold;
      color:#fff;
      margin-bottom:20px;
  }
  #main .qanda .slider2 .item .desc {
      color:#aaa;
  }
  #main .qanda button {
      margin-top:40px !important;
  }
  
  #main .shadow-box .container .form-holder {
      background:#fff;
      border:2px solid #296E9D;
      border-radius:8px;
      padding:20px;
  }
  #main .shadow-box .form-holder .title {
      text-align:right;
      margin-bottom:10px;
      direction:rtl;
  }
  #main .shadow-box .form-holder form input, .shadow-box .form-holder form textarea {
      margin-bottom:5px;
  }
  #main .shadow-box .form-holder form textarea {
      height:90px;
  }
  #main .shadow-box .form-holder form .btn {
      color:#296E9D;
      background:#fff;
  }
  #main .shadow-box .form-holder form .btn:hover {
      background:#296E9D;
      color:#fff;
  }
  #main .books .container {
      flex-wrap:wrap;
  }
  #main .books .item-holder {
      padding:10px;
      width:calc(100% / 2);
  }
  #main .books .item {
      height:233px;
      display:flex;
      flex-direction:row-reverse;
      border:1px solid #aaa;
      float:right;
  }
  #main .books .item .cover {
      height:100%;
      width:200px;
      flex-shrink:0;
      float:right;
  }
  #main .books .item .info {
      padding:10px;
      display:flex;
      flex-align:center;
      justify-content:center;
      flex-direction:column;
      text-align:center;
      direction:rtl;
  }
  #main .books .item .info .title {
      font-size:20px;
      font-weight:bold;
  }
  @media (max-width: 900px) { 
      #main .books .item-holder {
          width:calc(100% / 1);
      }
  }
  
  #main .bio .container .item-holder {
      padding:10px;
      width:calc(100% / 4);
      display:table;
      /*    display: inline;*/
  }
  #main .bio .container .item-holder .item {
      background:#fff;
      border:1px solid #aaa;
      padding:10px;
  }
  #main .bio .container .item-holder .item .cover {
      width:100%;
      height:200px;
      border:1px double #aaa;
  }
  #main .bio .container .item-holder .item .title {
      text-align:center;
  }
  /*Site Main End*/
  
  /*Site About Start*/
  
  #about {
  
  }
  #about .container .img {
      height:200px;
      width:200px;
      float:left;
      margin-right:10px;
  }
  #about .container .text {
      text-align:right;
      color:#000;
      direction:rtl;
  }
  /*Site About End*/
  
  /*Site Mag Start*/
  #mag .container {
      flex-wrap:wrap;
  }
  #mag .item-holder {
      padding:10px;
      width:calc(100% / 2);
  }
  #mag .item {
      height:233px;
      display:flex;
      flex-direction:row-reverse;
      border:1px solid #aaa;
  }
  #mag .item .cover {
      height:100%;
      width:200px;
      flex-shrink:0;
  }
  #mag .item .info {
      padding:10px;
      display:flex;
      flex-align:center;
      justify-content:center;
      flex-direction:column;
      text-align:center;
      direction:rtl;
  }
  #mag .item .info .title {
      font-size:20px;
      font-weight:bold;
  }
  
  
  @media (max-width: 900px) {
      #mag .item-holder {
          width:calc(100% / 1);
      }
  }
  /*Site Mag End*/
  
  /*Site Library Start*/
  #library .container {
      flex-wrap:wrap;
  }
  #library .item-holder {
      padding:10px;
      width:calc(100% / 2);
  }
  
  #library .item {
      height:233px;
      display:flex;
      flex-direction:row-reverse;
      border:1px solid #aaa;
  }
  #library .item .cover {
      height:100%;
      width:200px;
      flex-shrink:0;
  }
  
  #library .item .info {
      padding:10px;
      display:flex;
      flex-align:center;
      justify-content:center;
      flex-direction:column;
      text-align:center;
      direction:rtl;
  }
  #library .item .info .title {
      font-size:20px;
      font-weight:bold;
  }
  
  @media (max-width: 900px) {
      #library .item-holder {
          width:calc(100% / 1);
      }
  }
  /*Site Library End*/
  
  
  /*Site Bio Start*/
  #bio .container {
      flex-direction:row-reverse;
      flex-wrap:wrap;
      align-items:flex-start;
      justify-content:flex-start;
  }
  #bio .container .item-holder {
      padding:10px;
      width:calc(100% / 4);
  }
  #bio .container .item-holder .item {
      background:#fff;
      padding:10px;
  }
  #bio .container .item-holder .item .cover {
      width:100%;
      height:200px;
      border:1px double #aaa;
  }
  #bio .container .item-holder .item .title {
      text-align:center;
  }
  @media (max-width: 900px) { 
      #bio .container .item-holder {
          padding:10px;
          width:calc(100% / 2);
      }
  }
  @media (max-width: 600px) { 
      #bio .container .item-holder {
          padding:10px;
          width:calc(100% / 1);
      }
  }
  /*Site Bio End*/
  
  /*Site Activities Start*/
  #activities .container {
      flex-direction:row-reverse;
      align-items:flex-start;
      justify-content:flex-start;
      flex-wrap:wrap;
  }
  #activities .container .item-holder {
      width:calc(100% / 2);
      font-size:18px;
      padding:10px;
  }
  #activities .container .item-holder .item {
      text-align:right;
      padding:10px;
  }
  #activities .container .item-holder .item .title {
      font-weight:bold;
      max-height:68px;
      overflow:hidden;
      margin-bottom:5px;
  }
  #activities .container .item-holder .item .desc {
      max-height:100px;
      overflow:hidden;
  }
  #activities .container .item .img {
      width:100%;
      height:250px;
  }
  @media (max-width: 900px) { 
      #activities .container .item-holder {
          width:calc(100% / 1);
      }
  }
  /*Site Activities End*/
  
  /*Site Question Start*/
  #question .container .text {
      text-align:right;
      margin-bottom:10px;
      direction:rtl;
  }
  #question .form-holder {
      text-align:left;
  }
  #question .form-holder .row {
      display:flex;
      flex-direction:row-reverse;
  }
  #question .form-holder .row .item {
      width:calc(100% / 2);
      margin-bottom:10px;
  }
  #question .form-holder .row .item:nth-of-type(1) {
      padding-left:5px;
  }
  #question .form-holder .row .item:nth-of-type(2) {
      padding-right:5px;
  }
  #question .form-holder textarea {
      width:100%;
      height:150px;
      margin-bottom:10px;
  }
  #question .form-holder .btn {
      color:#296E9D;
      background:#fff;
  }
  #question .form-holder .btn:hover {
      color:#fff;
      background:#296E9D;
  }
  /*Site Question End*/
  
  /*Site Rulings Start*/
  #rulings .container .item-holder {
      width:100%; 
      margin-bottom:10px;
  }
  #rulings .container .item-holder .item {
      border:1px solid #aaa;
      text-align:right;
      padding:10px;
      direction:rtl;
  
  }
  #rulings .container .item-holder .item .title {
      font-weight:bold;
      margin-bottom:5px;
  }
  /*Site Rulings End*/
  
  /*Site Footer Start*/
  #site-footer {
      padding:10px 0;
      background:#fff;
      border-top:1px solid #ddd;
  }
  #site-footer .container {
      display:flex;
      align-items:center;
  }
  #site-footer .container &gt; div {
      width:calc(100% / 2);
  }
  #site-footer .text {
      color:#296E9D;
      font-size:14px;
      text-align:left;
  }
  #site-footer .social {
      display:flex;
      align-items:center;
      justify-content:flex-end;
  }
  #site-footer .social .icon {
      color:#296E9D;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      cursor:pointer;
      margin-left:20px;
      transition:ease 0.3s all;
  }
  #site-footer .social .icon:hover {
      color:#ED2024;
  }
  
  
  
  /*Site Footer End*/
  </code></pre>