paginate city

app/assets/stylesheets/custom.scss

@@ -93,3 +93,13 @@ footer {
 .flash-message {
   padding-top: 15px;
 }
+
+/* grid */
+
+.col-show {
+  border: 1px solid black;
+  border-radius: 3px;
+  text-align: center;
+  margin: 10px;
+  padding: 10px;
+}

app/controllers/cities_controller.rb

 class CitiesController < ApplicationController
   def index
-    @cities = City.all
+    @cities = City.page(params[:page]).per(Settings.col.page.per)
   end
 end

app/controllers/jobs_controller.rb

 class JobsController < ApplicationController
   def index
-    @jobs = Job.all
+    @jobs = Job.page(params[:page]).per(Settings.table.page.per)
   end
 end

app/controllers/static_pages_controller.rb

 class StaticPagesController < ApplicationController
   def index
-    @cities = City.all
+    @cities = City.page(params[:page]).per(Settings.col.page.per)
     @industries  = Industry.all
-    @jobs = Job.page(params[:page]).per(Settings.jobs.page.per)
+    @jobs = Job.page(params[:page]).per(Settings.table.page.per)
   end
 end

app/views/cities/_city.html.erb

-<li class="list-group-item"><%= city.name %></li>
+<div class="col-show"><%= city.name %></div>

app/views/cities/index.html.erb

 <div class="text-center">
   <div class="container jumbotron">
     <h1>City List</h1>
-    <div class="=row">
-      <a href="#vietnam" class="col-sm-6">
-        <div class="tag"> Vietnam</div>
-      </a>
-      <a href="#interational" class="col-sm-6">
-        <div class="tag">International</div>
-      </a>
+    <div class="row">
+      <div class="col-sm">
+        <a href="#vietnam">
+          <div class="tag">Vietnam</div>
+        </a>
+      </div>
+      <div class="col-sm">
+        <a href="#interational">
+          <div class="tag">International</div>
+        </a>
+      </div>
     </div>
   </div>
 </div><br>
 
-<%= render partial: "cities/city", collection: @cities %>
+<div class="container-fluid">
+  <div class="tag text-center" id="vietnam">Vietnam</div><br>
+  <div class="container">
+    <div class="row row-cols-5">
+      <%= render partial: "cities/city", collection: @cities %>
+    </div>
+  </div>
+  <%= paginate @cities %>
+</div><br>
+
+<div class="container-fluid">
+  <div class="tag text-center" id="interational">International</div><br>
+</div><br>

app/views/jobs/index.html.erb

-<%= render partial: "jobs/job", collection: @jobs %>
+<table class="table">
+  <tbody>
+    <ul class="table">
+      <%= render partial: "jobs/job", collection: @jobs %>
+    </ul>
+  </tbody>
+</table>
+
+<%= paginate @jobs %>

app/views/static_pages/index.html.erb

@@ -23,9 +23,12 @@
   <div class="top_cities">
     <h3>Top cities</h3>
 
-    <ul class="list-group list-group-horizontal">
-      <%= render partial: "cities/city", collection: @cities %>
-    </ul>
+    <div class="container">
+      <div class="row row-cols-5">
+        <%= render partial: "cities/city", collection: @cities %>
+      </div>
+    </div>
+    <%= paginate @cities %>
   </div>
 
   <div class="top_industries">

config/settings.yml

-jobs:
+table:
   page:
     per: 5
+
+col:
+  page:
+    per: 12