Dictionary index and show styling

app/views/application/_alphabetical_links.html.erb

@@ -0,0 +1,11 @@
+<hr>
+<div class="text-center mx-1 dictionary-index-links">
+  «
+  <% unless defined?(letter) %>
+    <%= sanitize alphabetical_links, tags: ["a", "div", "p"] %>
+  <% else %>
+    <%= sanitize alphabetical_links(letter), tags: ["a", "div", "p"] %>
+  <% end %>
+  »
+</div>
+<hr>

app/views/dictionary/index.html.erb

@@ -1,6 +1,11 @@
-<%= sanitize alphabetical_links, tags: ["a"] %>
+<h1 class="text-center">Index</h1>
+<%= render "alphabetical_links" %>
 
-<p><%= @parts_of_speech.count %> parts of speech entries in database</p>
-<p><%= @words.count %> word entries in database</p>
+<div class="p-4">
+  <p><%= @parts_of_speech.count %> parts of speech entries in database</p>
+  <p><%= @words.count %> word entries in database</p>
+</div>
 
-<%= render "partsofspeech", parts_of_speech: @parts_of_speech %>
+<div class="p-4">
+  <%= render "partsofspeech", parts_of_speech: @parts_of_speech %>
+</div>

app/views/dictionary/show.html.erb

@@ -1,9 +1,11 @@
 <div>
-  <h1><%= @letter.to_s %></h1>
+  <h1 class="text-center"><b><%= @letter.to_s %></b></h1>
 </div>
 
+<%= render "alphabetical_links", letter: @letter %>
+
 <% @words.each do |word| %>
-  <div>
+  <div class="dictionary-entry p-4">
     <h2><%= word.word %></h2>
     <%= render "definitions", word: word %>
   </div>