diff --git a/docs/Readme_for_developers.html b/docs/Readme_for_developers.html
index 09f748d..47dd0fc 100644
--- a/docs/Readme_for_developers.html
+++ b/docs/Readme_for_developers.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -105,6 +105,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="how-to-build-gtk4-tutorial">How to build Gtk4-Tutorial</h1>
 <h2 id="quick-start-guide">Quick start guide</h2>
 <ol type="1">
@@ -547,7 +549,7 @@ tutorial.</p>
 <h2 id="generate-html-files">Generate html files</h2>
 <p>Src.md files can be translated to html files. You need pandoc to do
 this. Most linux distribution has pandoc package. Refer to your
-distribution document to install it.</p>
+distribution document to install.</p>
 <p>Type <code>rake html</code> to generate html files.</p>
 <pre><code>$ rake html</code></pre>
 <p>First, it generates pandoc’s markdown files under <code>docs</code>
@@ -607,6 +609,8 @@ file.</p>
 <code>rake clobber</code> or <code>rake cleanlatex</code></p>
 <pre><code>$ rake clobber</code></pre>
 <p>This removes all the latex source files and a pdf file.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/image/color.png b/docs/image/color.png
deleted file mode 100644
index f0c4294..0000000
Binary files a/docs/image/color.png and /dev/null differ
diff --git a/docs/index.html b/docs/index.html
index b75cf8b..c7febe5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -102,6 +102,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtk-4-tutorial-for-beginners">GTK 4 Tutorial for beginners</h1>
 <h4 id="contents-of-this-repository">Contents of this Repository</h4>
 <p>This tutorial illustrates how to write C programs with the GTK 4
@@ -202,6 +204,8 @@ destruction</a></li>
 </ol>
 <p>This website uses <a
 href="https://getbootstrap.jp/">Bootstrap</a>.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec1.html b/docs/sec1.html
index 2d97d42..cc0ac3e 100644
--- a/docs/sec1.html
+++ b/docs/sec1.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -108,6 +108,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="prerequisite-and-license">Prerequisite and License</h1>
 <h2 id="prerequisite">Prerequisite</h2>
 <h3 id="gtk-4-on-a-linux-os">GTK 4 on a Linux OS</h3>
@@ -133,7 +135,7 @@ file.</p>
 <p>You need:</p>
 <ul>
 <li>Linux.</li>
-<li>Ruby programming language. There are two ways to install it. One is
+<li>Ruby programming language. There are two ways to install. One is
 installing the distribution’s package. The other is using rbenv and
 ruby-build. If you want to use the latest version of ruby, use
 rbenv.</li>
@@ -146,7 +148,7 @@ such as converters, generators and controllers. All of them make up the
 ‘GTK4-tutorial’ package. This package is simply called ‘GTK4-tutorial’
 in the following description.</p>
 <p>GTK4-tutorial is free; you can redistribute it and/or modify it under
-terms of the following licenses.</p>
+the terms of the following licenses.</p>
 <ul>
 <li>The license of documents in GTK4-tutorial is the GNU Free
 Documentation License as published by the Free Software Foundation;
@@ -173,6 +175,8 @@ Public License</a></li>
 covered all the contents of the GTK4-tutorial. But GFDL1.3 is more
 appropriate for documents so the license was changed. The license above
 is the only effective license since 15/April/2023.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec10.html b/docs/sec10.html
index 24b302d..5511be9 100644
--- a/docs/sec10.html
+++ b/docs/sec10.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="build-system">Build system</h1>
 <h2 id="managing-big-source-files">Managing big source files</h2>
 <p>We’ve compiled a small editor so far. The program is also small and
@@ -362,6 +364,8 @@ directory <code>_build</code>.</p>
 <code>tfe.c</code> and the other is <code>tfetextview.c</code>.</p>
 <p>For further information, see <a href="https://mesonbuild.com/">The
 Meson Build system</a>.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec11.html b/docs/sec11.html
index 2739f67..932e0ef 100644
--- a/docs/sec11.html
+++ b/docs/sec11.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="instance-initialization-and-destruction">Instance Initialization
 and destruction</h1>
 <p>A new version of the text file editor (<code>tfe</code>) will be made
@@ -622,6 +624,8 @@ the reference to the other instances in the GtkTextViewPrivate in the
 TfeTextView instance. After that, <code>dh3</code> calls
 <code>dh2</code>, and <code>dh2</code> calls <code>dh1</code>. Finally
 all the references are released.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec12.html b/docs/sec12.html
index 995280d..c7c0faf 100644
--- a/docs/sec12.html
+++ b/docs/sec12.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="signals">Signals</h1>
 <h2 id="signals-1">Signals</h2>
 <p>Each object is encapsulated in Gtk programming. And it is not
@@ -295,6 +297,8 @@ fourth argument.</li>
 <li>The signal “open-response” has one parameter. The fourth argument is
 the parameter.</li>
 </ul>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec13.html b/docs/sec13.html
index ad01607..174d6ca 100644
--- a/docs/sec13.html
+++ b/docs/sec13.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="tfetextview-class">TfeTextView class</h1>
 <p>The TfeTextView class will be finally completed in this section. The
 remaining topic is functions. TfeTextView functions, which are
@@ -716,6 +718,8 @@ document of TfeTextView</a>. The markdown file is under the directory
 <code>src/tfetextview</code>.</p>
 <p>You can find all the TfeTextView source codes under src/tfetextview
 directories.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec14.html b/docs/sec14.html
index 8de4a24..2ea6472 100644
--- a/docs/sec14.html
+++ b/docs/sec14.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="functions-in-gtknotebook">Functions in GtkNotebook</h1>
 <p>GtkNotebook is a very important object in the text file editor
 <code>tfe</code>. It connects the application and TfeTextView objects. A
@@ -450,6 +452,8 @@ object <code>file</code>.</li>
 filename and set the label of the GtkNotebookPage with
 <code>label</code>.</li>
 </ul>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec15.html b/docs/sec15.html
index d5a7861..23697cc 100644
--- a/docs/sec15.html
+++ b/docs/sec15.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="tfe-main-program">Tfe main program</h1>
 <p>The file <code>tfeapplication.c</code> is a main program of Tfe. It
 includes all the code other than <code>tfetextview.c</code> and
@@ -425,6 +427,8 @@ that, unzip the archive file.</li>
 <p>If you use git, run the terminal and type the following.</p>
 <pre><code>$ git clone https://github.com/ToshioCP/Gtk4-tutorial.git</code></pre>
 <p>The source files are under /src/tfe5 directory.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec16.html b/docs/sec16.html
index 0c1ec7e..3e7e752 100644
--- a/docs/sec16.html
+++ b/docs/sec16.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="how-to-build-tfe-text-file-editor">How to build tfe (text file
 editor)</h1>
 <h2 id="how-to-compile-and-execute-the-text-editor-tfe.">How to compile
@@ -159,6 +161,8 @@ lines, words and characters</h2>
    32    54   624 tfetextview/tfetextview.h
    61   100  2073 tfe5/tfe.ui
   613  1746 19127 total</code></pre>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec17.html b/docs/sec17.html
index 6e62d02..811860f 100644
--- a/docs/sec17.html
+++ b/docs/sec17.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="menus-and-actions">Menus and actions</h1>
 <h2 id="menus">Menus</h2>
 <p>Users often use menus to tell a command to the application. It is
@@ -428,6 +430,8 @@ notebook page.</p>
 If you double-click the icon twice or more, the application is run
 multiple times. Therefore, you need to think about your startup and
 activate (open) handler carefully.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec18.html b/docs/sec18.html
index 1786dcc..c852143 100644
--- a/docs/sec18.html
+++ b/docs/sec18.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="stateful-action">Stateful action</h1>
 <p>Some actions have states. The typical values of states are boolean or
 string. However, other types of states are possible if you want.</p>
@@ -523,6 +525,8 @@ the default display shared by the windows.</p>
 [1] 82113
 $ ./a.out # Run the second application
 $ </code></pre>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec19.html b/docs/sec19.html
index 38032b9..4322515 100644
--- a/docs/sec19.html
+++ b/docs/sec19.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="ui-file-for-menu-and-action-entries">Ui file for menu and action
 entries</h1>
 <h2 id="ui-file-for-menu">Ui file for menu</h2>
@@ -500,6 +502,8 @@ class="sourceCode xml"><code class="sourceCode xml"><span id="cb14-1"><a href="#
 <p>Action name and target are separated like this. Action attribute
 includes prefix and name only. You can’t write like
 <code>&lt;attribute name="action"&gt;app.color::red&lt;/attribute&gt;</code>.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec2.html b/docs/sec2.html
index 70fe0ac..fdb2064 100644
--- a/docs/sec2.html
+++ b/docs/sec2.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1
 id="preparation-gtk-4-installation-and-the-download-of-this-repository">Preparation
 (GTK 4 installation and the download of this repository)</h1>
@@ -126,7 +128,7 @@ distributions.</p>
 <h3 id="installation-from-the-distribution-packages">Installation from
 the distribution packages</h3>
 <p>The first way is the easiest way to install. I’ve installed GTK 4
-packages (version 4.10.1) on Ubuntu 23.04.</p>
+packages (version 4.12.2) on Ubuntu 23.10.</p>
 <pre><code>$ sudo apt install libgtk-4-dev</code></pre>
 <p>It is important to install the development files package
 (libgtk-4-dev). Otherwise, you can’t compile any GTK 4 based
@@ -149,39 +151,39 @@ support GTK 4.</p>
 <tbody>
 <tr class="odd">
 <td style="text-align: center;">Fedora</td>
-<td style="text-align: center;">38</td>
-<td style="text-align: center;">4.10.3-2.fc38</td>
-<td style="text-align: center;">GNOME 44</td>
+<td style="text-align: center;">39</td>
+<td style="text-align: center;">4.12.2-2.fc39</td>
+<td style="text-align: center;">GNOME 45</td>
 </tr>
 <tr class="even">
 <td style="text-align: center;">Ubuntu</td>
-<td style="text-align: center;">23.04</td>
-<td style="text-align: center;">4.10.1</td>
-<td style="text-align: center;">GNOME 44</td>
+<td style="text-align: center;">23.10</td>
+<td style="text-align: center;">4.12.2</td>
+<td style="text-align: center;">GNOME 45</td>
 </tr>
 <tr class="odd">
 <td style="text-align: center;">Debian</td>
-<td style="text-align: center;">bookworm(testing)</td>
-<td style="text-align: center;">4.8.3+ds-2</td>
-<td style="text-align: center;">GNOME 43.4-1</td>
+<td style="text-align: center;">trixie(testing)</td>
+<td style="text-align: center;">4.12.3+ds-3</td>
+<td style="text-align: center;">GNOME 44.5</td>
 </tr>
 <tr class="even">
 <td style="text-align: center;">Arch</td>
 <td style="text-align: center;">rolling release</td>
-<td style="text-align: center;">4.10.3-1</td>
-<td style="text-align: center;">GNOME 43.5-1</td>
+<td style="text-align: center;">4.12.4-1</td>
+<td style="text-align: center;">GNOME 45.2-1</td>
 </tr>
 <tr class="odd">
 <td style="text-align: center;">Gentoo</td>
 <td style="text-align: center;">rolling release</td>
-<td style="text-align: center;">4.10.3</td>
-<td style="text-align: center;">GNOME 44.1</td>
+<td style="text-align: center;">4.12.3</td>
+<td style="text-align: center;">GNOME 45.1</td>
 </tr>
 <tr class="even">
 <td style="text-align: center;">OpenSUSE</td>
 <td style="text-align: center;">Tumbleweed(rolling release)</td>
-<td style="text-align: center;">4.10.3</td>
-<td style="text-align: center;">GNOME 44.1</td>
+<td style="text-align: center;">4.12.4</td>
+<td style="text-align: center;">GNOME 45.2</td>
 </tr>
 </tbody>
 </table>
@@ -226,6 +228,8 @@ this repository.</li>
 first example of the tutorial is <code>pr1.c</code> and its pathname is
 <code>src/misc/pr1.c</code>. So you don’t need to type the example codes
 by yourself.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec20.html b/docs/sec20.html
index 9e9ad7a..2046363 100644
--- a/docs/sec20.html
+++ b/docs/sec20.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="composite-widgets-and-alert-dialog">Composite widgets and alert
 dialog</h1>
 <p>The source files are in the <a
@@ -638,6 +640,8 @@ $ meson setup _build
 $ ninja -C _build
 $ _build/ex_alert
 Accept #&lt;= if you clicked on the accept button</code></pre>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec21.html b/docs/sec21.html
index 6f92593..a36f6b5 100644
--- a/docs/sec21.html
+++ b/docs/sec21.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtkfontdialogbutton-and-gsettings">GtkFontDialogButton and
 Gsettings</h1>
 <h2 id="the-preference-dialog">The preference dialog</h2>
@@ -315,7 +317,7 @@ point.</li>
 </ul>
 <h2 id="gsettings">GSettings</h2>
 <p>We want to maintain the font data after the application quits. There
-are some ways to implement it.</p>
+are some ways to implement.</p>
 <ul>
 <li>Make a configuration file. For example, a text file
 “~/.config/tfe/font_desc.cfg” keeps font information.</li>
@@ -853,6 +855,8 @@ $ GSETTINGS_SCHEMA_DIR=_build _build/test_pref</code></pre>
 <p>A window appears and you can choose a font via GtkFontDialog. If you
 select a new font, the font string is output through the standard
 output.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec22.html b/docs/sec22.html
index 1f65f5b..972df05 100644
--- a/docs/sec22.html
+++ b/docs/sec22.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="tfewindow">TfeWindow</h1>
 <h2 id="the-tfe-window-and-xml-files">The Tfe window and XML files</h2>
 <p>The following is the window of Tfe.</p>
@@ -1074,6 +1076,8 @@ class="sourceCode numberSource C numberLines"><code class="sourceCode c"><span i
 <span id="cb23-333"><a href="#cb23-333"></a>tfe_window_new <span class="op">(</span>GtkApplication <span class="op">*</span>app<span class="op">)</span> <span class="op">{</span></span>
 <span id="cb23-334"><a href="#cb23-334"></a>  <span class="cf">return</span> GTK_WIDGET <span class="op">(</span>g_object_new <span class="op">(</span>TFE_TYPE_WINDOW<span class="op">,</span> <span class="st">&quot;application&quot;</span><span class="op">,</span> app<span class="op">,</span> NULL<span class="op">));</span></span>
 <span id="cb23-335"><a href="#cb23-335"></a><span class="op">}</span></span></code></pre></div>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec23.html b/docs/sec23.html
index 3118f78..dd09e13 100644
--- a/docs/sec23.html
+++ b/docs/sec23.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="pango-css-and-application">Pango, CSS and Application</h1>
 <h2 id="pangofontdescription">PangoFontDescription</h2>
 <p>PangoFontDescription is a C structure for a font. You can get font
@@ -642,6 +644,8 @@ href="https://discourse.gnome.org/t/menu-button-gives-error-messages-with-latest
 in the GNOME Discourse. The comment says that GTK 4.10 has a bug and it
 is fixed in the version 4.10.5. I haven’t check 4.10.5 yet, where the
 UBUNTU GTK4 is still 4.10.4.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec24.html b/docs/sec24.html
index 1e27e49..6c5374c 100644
--- a/docs/sec24.html
+++ b/docs/sec24.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtkdrawingarea-and-cairo">GtkDrawingArea and Cairo</h1>
 <p>If you want to draw shapes or paint images dynamically on the screen,
 use the GtkDrawingArea widget.</p>
@@ -335,6 +337,8 @@ is invoked each time the window is resized.</p>
 <img src="image/da1.png" alt="Square in the window" />
 <figcaption aria-hidden="true">Square in the window</figcaption>
 </figure>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec25.html b/docs/sec25.html
index ded2431..aeeea1d 100644
--- a/docs/sec25.html
+++ b/docs/sec25.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="periodic-events">Periodic Events</h1>
 <p>This chapter was written by Paul Schulz <a
 href="mailto:paul@mawsonlakes.org"
@@ -497,6 +499,8 @@ class="sourceCode numberSource xml numberLines"><code class="sourceCode xml"><sp
 <div class="sourceCode" id="cb7"><pre
 class="sourceCode numberSource numberLines"><code class="sourceCode"><span id="cb7-1"><a href="#cb7-1"></a>glib-compile-resources $1.gresource.xml --target=$1.gresource.c --generate-source</span>
 <span id="cb7-2"><a href="#cb7-2"></a>gcc `pkg-config --cflags gtk4` $1.gresource.c $1.c `pkg-config --libs gtk4` -lm</span></code></pre></div>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec26.html b/docs/sec26.html
index 36a923c..da60fc6 100644
--- a/docs/sec26.html
+++ b/docs/sec26.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="custom-drawing">Custom drawing</h1>
 <p>Custom drawing is to draw shapes dynamically. This section shows an
 example of custom drawing. You can draw rectangles by dragging the
@@ -459,6 +461,8 @@ $ _build/rect</code></pre>
 <img src="image/rect.png" alt="The screen of rect program" />
 <figcaption aria-hidden="true">The screen of rect program</figcaption>
 </figure>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec27.html b/docs/sec27.html
index 364ef34..26e8891 100644
--- a/docs/sec27.html
+++ b/docs/sec27.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="tiny-turtle-graphics-interpreter">Tiny turtle graphics
 interpreter</h1>
 <p>A program <code>turtle</code> is an example with the combination of
@@ -2583,6 +2585,8 @@ Pike (1984)</li>
 </ul>
 <p>Lately, lots of source codes are in the internet. Maybe reading
 source codes is the most useful for programmers.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec28.html b/docs/sec28.html
index db29068..ea1a453 100644
--- a/docs/sec28.html
+++ b/docs/sec28.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="drag-and-drop">Drag and drop</h1>
 <h2 id="whats-drag-and-drop">What’s drag and drop?</h2>
 <p>Drag and drop is also written as “Drag-and-Drop”, or “DND” in short.
@@ -379,6 +381,8 @@ $ _build/dnd</code></pre>
 <p>The source files are under the directory <code>src/dnd</code> of the
 <a href="https://github.com/ToshioCP/Gtk4-tutorial">repository</a>.
 Download it and see the directory.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec29.html b/docs/sec29.html
index 1b5e97f..6a46a56 100644
--- a/docs/sec29.html
+++ b/docs/sec29.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtklistview">GtkListView</h1>
 <p>GTK 4 has added new list objects GtkListView, GtkGridView and
 GtkColumnView. The new feature is described in <a
@@ -640,6 +642,8 @@ $ ./a.out</code></pre>
 <img src="image/list3.png" alt="screenshot list3" />
 <figcaption aria-hidden="true">screenshot list3</figcaption>
 </figure>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec3.html b/docs/sec3.html
index 602a6d7..ccf1624 100644
--- a/docs/sec3.html
+++ b/docs/sec3.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtkapplication-and-gtkapplicationwindow">GtkApplication and
 GtkApplicationWindow</h1>
 <h2 id="gtkapplication">GtkApplication</h2>
@@ -444,6 +446,8 @@ with the title “pr4”.</p>
 <img src="image/screenshot_pr4.png" alt="Screenshot of the window" />
 <figcaption aria-hidden="true">Screenshot of the window</figcaption>
 </figure>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec30.html b/docs/sec30.html
index 734391d..053c643 100644
--- a/docs/sec30.html
+++ b/docs/sec30.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtkgridview-and-activate-signal">GtkGridView and activate
 signal</h1>
 <p>GtkGridView is similar to GtkListView. It displays a GListModel as a
@@ -638,6 +640,8 @@ inserted to “bytes” property as it is.</p>
 a bit complicated especially for the beginners. If you feel some
 difficulty, it is better for you to separate the ui file.</p>
 <p>A directory src/list5 includes the ui file above.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec31.html b/docs/sec31.html
index d4564e3..47548c7 100644
--- a/docs/sec31.html
+++ b/docs/sec31.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtkexpression">GtkExpression</h1>
 <p>GtkExpression is a fundamental type. It is not a descendant of
 GObject. GtkExpression provides a way to describe references to values.
@@ -908,6 +910,8 @@ class="sourceCode numberSource numberLines"><code class="sourceCode"><span id="c
 <span id="cb22-18"><a href="#cb22-18"></a>executable(&#39;exp_bind&#39;, &#39;exp_bind.c&#39;, resources, dependencies: gtkdep, export_dynamic: true, install: false)</span>
 <span id="cb22-19"><a href="#cb22-19"></a>executable(&#39;exp_watch&#39;, &#39;exp_watch.c&#39;, dependencies: gtkdep, export_dynamic: true, install: false)</span>
 <span id="cb22-20"><a href="#cb22-20"></a>executable(&#39;exp_test&#39;, &#39;exp_test.c&#39;, resources, dependencies: gtkdep, export_dynamic: true, install: false)</span></code></pre></div>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec32.html b/docs/sec32.html
index 42f6898..9c63d95 100644
--- a/docs/sec32.html
+++ b/docs/sec32.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtkcolumnview">GtkColumnView</h1>
 <h2 id="gtkcolumnview-1">GtkColumnView</h2>
 <p>GtkColumnView is like GtkListView, but it has multiple columns. Each
@@ -398,7 +400,7 @@ an argument (<code>this</code> object). But you need to be careful that
 it can be NULL while the list item is being recycled. So,
 <code>G_IS_FILE_INFO (info)</code> is always necessary in callback
 functions. The function retrieves a filename from <code>info</code>. The
-string is owned by <code>info</code> so it is necessary to duplicate it.
+string is owned by <code>info</code> so it is necessary to duplicate.
 And it returns the copied string.</p>
 <p>GtkNumericSorter compares numbers. It is used in the line 106 to 112
 and line 142 to 148. The lines from 106 to 112 is:</p>
@@ -556,6 +558,8 @@ lists are sorted by the newly selected column.</p>
 <p>GtkColumnView is very useful and it can manage very big GListModel.
 It is possible to use it for file list, application list, database
 frontend and so on.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec33.html b/docs/sec33.html
index aad14ea..742abf3 100644
--- a/docs/sec33.html
+++ b/docs/sec33.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -108,6 +108,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtksignallistitemfactory">GtkSignalListItemFactory</h1>
 <h2
 id="gtksignallistitemfactory-and-gtkbulderlistitemfactory">GtkSignalListItemFactory
@@ -457,6 +459,8 @@ class="sourceCode numberSource C numberLines"><code class="sourceCode c"><span i
 <span id="cb10-4"><a href="#cb10-4"></a></span>
 <span id="cb10-5"><a href="#cb10-5"></a>  gtk_window_set_focus <span class="op">(</span>GTK_WINDOW <span class="op">(</span>win<span class="op">),</span> NULL<span class="op">);</span></span>
 <span id="cb10-6"><a href="#cb10-6"></a><span class="op">}</span></span></code></pre></div>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec4.html b/docs/sec4.html
index 1850d07..db171bc 100644
--- a/docs/sec4.html
+++ b/docs/sec4.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="widgets-1">Widgets (1)</h1>
 <h2 id="gtklabel-gtkbutton-and-gtkbox">GtkLabel, GtkButton and
 GtkBox</h2>
@@ -461,6 +463,8 @@ the GTK 4 API reference.</p>
 <p>The handler corresponding to <code>btn1</code> toggles its label. The
 handler corresponding to <code>btn2</code> destroys the top-level window
 and the application quits.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec5.html b/docs/sec5.html
index d7907bf..681a164 100644
--- a/docs/sec5.html
+++ b/docs/sec5.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="widgets-2">Widgets (2)</h1>
 <h2 id="gtktextview-gtktextbuffer-and-gtkscrolledwindow">GtkTextView,
 GtkTextBuffer and GtkScrolledWindow</h2>
@@ -278,6 +280,8 @@ class="sourceCode numberSource C numberLines"><code class="sourceCode c"><span i
 <p>Compile and run it.</p>
 <p>Now, the window doesn’t extend even if you type a lot of characters,
 it just scrolls.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec6.html b/docs/sec6.html
index 7287b1d..5fb9c6d 100644
--- a/docs/sec6.html
+++ b/docs/sec6.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="strings-and-memory-management">Strings and memory
 management</h1>
 <p>GtkTextView and GtkTextBuffer have functions that have string
@@ -304,6 +306,8 @@ function.</p>
 <span id="cb12-10"><a href="#cb12-10" aria-hidden="true" tabindex="-1"></a>  GtkLabel<span class="op">*</span> self<span class="op">,</span></span>
 <span id="cb12-11"><a href="#cb12-11" aria-hidden="true" tabindex="-1"></a>  <span class="dt">const</span> <span class="dt">char</span><span class="op">*</span> str</span>
 <span id="cb12-12"><a href="#cb12-12" aria-hidden="true" tabindex="-1"></a><span class="op">)</span></span></code></pre></div>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec7.html b/docs/sec7.html
index 68da965..720400e 100644
--- a/docs/sec7.html
+++ b/docs/sec7.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="widgets-3">Widgets (3)</h1>
 <h2 id="open-signal">Open signal</h2>
 <h3 id="g_application_handles_open-flag">G_APPLICATION_HANDLES_OPEN
@@ -461,6 +463,8 @@ function <code>g_clear_error (&amp;err)</code> works like
 <li>53-56: If at least one page exists, the window is shown. Otherwise,
 the window is destroyed and the application quits.</li>
 </ul>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec8.html b/docs/sec8.html
index d50db38..8a30817 100644
--- a/docs/sec8.html
+++ b/docs/sec8.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="defining-a-final-class">Defining a final class</h1>
 <h2 id="a-very-simple-editor">A very simple editor</h2>
 <p>We made a very simple file viewer in the previous section. Now we go
@@ -498,6 +500,8 @@ modified.</p>
 <p>Now we got a very simple editor. It’s not smart. We need more
 features like open, save, saveas, change font and so on. We will add
 them in the next section and after.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/sec9.html b/docs/sec9.html
index 86cdb7c..0db4c5f 100644
--- a/docs/sec9.html
+++ b/docs/sec9.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -111,6 +111,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="gtkbuilder-and-ui-file">GtkBuilder and UI file</h1>
 <h2 id="new-open-and-save-button">New, Open and Save button</h2>
 <p>We made very simple editor in the previous section. It reads files at
@@ -582,6 +584,8 @@ $ ./a.out tfe2.c</code></pre>
 beginning of this page.</p>
 <p>Generally, resource is the best way for C language. If you use other
 languages like Ruby, string is better than resource.</p>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/tfetextview_doc.html b/docs/tfetextview_doc.html
index 071ad15..bdf9e3a 100644
--- a/docs/tfetextview_doc.html
+++ b/docs/tfetextview_doc.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -105,6 +105,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="tfetextview-api-reference">TfeTextView API reference</h1>
 <h2 id="description">Description</h2>
 <p>TfeTextView is a child object of GtkTextView. If its contents comes
@@ -238,6 +240,8 @@ signal informs the status of file I/O operation.</p>
 <li>TFE_OPEN_RESPONSE_ERROR: An error happened during the opening or
 reading process.</li>
 </ul>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/docs/turtle_doc.html b/docs/turtle_doc.html
index 0c42589..aef3e67 100644
--- a/docs/turtle_doc.html
+++ b/docs/turtle_doc.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>GTK 4 tutorial</title>
     <style>
       code{white-space: pre-wrap;}
@@ -105,6 +105,8 @@
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 <h1 id="turtle-manual">Turtle manual</h1>
 <p>Turtle is a simple interpreter for turtle graphics.</p>
 <h2 id="prerequisite-and-compiling">Prerequisite and compiling</h2>
@@ -506,6 +508,8 @@ expression:
 | ID
 | NUM    /* NUM is a number */
 ;</code></pre>
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/gfm/Readme_for_developers.md b/gfm/Readme_for_developers.md
index 8f336ad..dfa619b 100644
--- a/gfm/Readme_for_developers.md
+++ b/gfm/Readme_for_developers.md
@@ -444,7 +444,7 @@ The repository not only stores source files but also shows the whole tutorial.
 Src.md files can be translated to html files.
 You need pandoc to do this.
 Most linux distribution has pandoc package.
-Refer to your distribution document to install it.
+Refer to your distribution document to install.
 
 Type `rake html` to generate html files.
 
diff --git a/gfm/sec1.md b/gfm/sec1.md
index 3bd72db..ee9016e 100644
--- a/gfm/sec1.md
+++ b/gfm/sec1.md
@@ -29,7 +29,7 @@ You need:
 
 - Linux.
 - Ruby programming language.
-There are two ways to install it.
+There are two ways to install.
 One is installing the distribution's package.
 The other is using rbenv and ruby-build.
 If you want to use the latest version of ruby, use rbenv.
@@ -43,7 +43,7 @@ GTK4-tutorial repository contains tutorial documents and programs such as conver
 All of them make up the 'GTK4-tutorial' package.
 This package is simply called 'GTK4-tutorial' in the following description.
 
-GTK4-tutorial is free; you can redistribute it and/or modify it under terms of the following licenses.
+GTK4-tutorial is free; you can redistribute it and/or modify it under the terms of the following licenses.
 
 - The license of documents in GTK4-tutorial is the GNU Free Documentation License as published by the Free Software Foundation; either version 1.3 of the License or, at your opinion, any later version.
 The documents are Markdown, HTML and image files.
diff --git a/gfm/sec2.md b/gfm/sec2.md
index 2f7adbe..542f989 100644
--- a/gfm/sec2.md
+++ b/gfm/sec2.md
@@ -14,7 +14,7 @@ There are two ways to install GTK 4.
 ### Installation from the distribution packages
 
 The first way is the easiest way to install.
-I've installed GTK 4 packages (version 4.10.1) on Ubuntu 23.04.
+I've installed GTK 4 packages (version 4.12.2) on Ubuntu 23.10.
 
 ~~~
 $ sudo apt install libgtk-4-dev
@@ -29,12 +29,12 @@ The following table shows the distributions which support GTK 4.
 
 |Distribution|          version          |    GTK 4    |   GNOME    |
 |:----------:|:-------------------------:|:-----------:|:----------:|
-|   Fedora   |            38             |4.10.3-2.fc38|  GNOME 44  |
-|   Ubuntu   |           23.04           |   4.10.1    |  GNOME 44  |
-|   Debian   |     bookworm(testing)     | 4.8.3+ds-2  |GNOME 43.4-1|
-|    Arch    |      rolling release      |  4.10.3-1   |GNOME 43.5-1|
-|   Gentoo   |      rolling release      |   4.10.3    | GNOME 44.1 |
-|  OpenSUSE  |Tumbleweed(rolling release)|   4.10.3    | GNOME 44.1 |
+|   Fedora   |            39             |4.12.2-2.fc39|  GNOME 45  |
+|   Ubuntu   |           23.10           |   4.12.2    |  GNOME 45  |
+|   Debian   |      trixie(testing)      | 4.12.3+ds-3 | GNOME 44.5 |
+|    Arch    |      rolling release      |  4.12.4-1   |GNOME 45.2-1|
+|   Gentoo   |      rolling release      |   4.12.3    | GNOME 45.1 |
+|  OpenSUSE  |Tumbleweed(rolling release)|   4.12.4    | GNOME 45.2 |
 
 ### Installation from the source file
 
diff --git a/gfm/sec21.md b/gfm/sec21.md
index f562e0e..de7ac20 100644
--- a/gfm/sec21.md
+++ b/gfm/sec21.md
@@ -179,7 +179,7 @@ Otherwise the unit is point.
 ## GSettings
 
 We want to maintain the font data after the application quits.
-There are some ways to implement it.
+There are some ways to implement.
 
 - Make a configuration file.
 For example, a text file "~/.config/tfe/font_desc.cfg" keeps font information.
diff --git a/gfm/sec32.md b/gfm/sec32.md
index a71c746..9e76f4c 100644
--- a/gfm/sec32.md
+++ b/gfm/sec32.md
@@ -291,7 +291,7 @@ The function is given the item (GFileInfo) of the GtkSortListModel as an argumen
 But you need to be careful that it can be NULL while the list item is being recycled.
 So, `G_IS_FILE_INFO (info)` is always necessary in callback functions.
 The function retrieves a filename from `info`.
-The string is owned by `info` so it is necessary to duplicate it.
+The string is owned by `info` so it is necessary to duplicate.
 And it returns the copied string.
 
 GtkNumericSorter compares numbers.
diff --git a/lib/lib_mk_html_template.rb b/lib/lib_mk_html_template.rb
index c9a6ab9..506f206 100644
--- a/lib/lib_mk_html_template.rb
+++ b/lib/lib_mk_html_template.rb
@@ -8,7 +8,7 @@ def mk_html_template(home, sec_prev, sec_next)
     <meta charset="utf-8" />
     <meta name="generator" content="pandoc" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     <title>$title$</title>
     <style>
       code{white-space: pre-wrap;}
@@ -106,7 +106,11 @@ def mk_html_template(home, sec_prev, sec_next)
         </div>
       </div>
     </nav>
+      <div class="row justify-content-center">
+        <div class="col-xl-10 col-xxl-9">
 $body$
+        </div>
+      </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   </body>
diff --git a/src/sec2.src.md b/src/sec2.src.md
index 452c2e0..3160f37 100644
--- a/src/sec2.src.md
+++ b/src/sec2.src.md
@@ -12,7 +12,7 @@ There are two ways to install GTK 4.
 ### Installation from the distribution packages
 
 The first way is the easiest way to install.
-I've installed GTK 4 packages (version 4.10.1) on Ubuntu 23.04.
+I've installed GTK 4 packages (version 4.12.2) on Ubuntu 23.10.
 
 ~~~
 $ sudo apt install libgtk-4-dev
@@ -28,12 +28,12 @@ The following table shows the distributions which support GTK 4.
 @@@table
 |Distribution|version|GTK 4|GNOME|
 |:-:|:-:|:-:|:-:|
-|Fedora|38|4.10.3-2.fc38|GNOME 44|
-|Ubuntu|23.04|4.10.1|GNOME 44|
-|Debian|bookworm(testing)|4.8.3+ds-2|GNOME 43.4-1|
-|Arch|rolling release|4.10.3-1|GNOME 43.5-1|
-|Gentoo|rolling release|4.10.3|GNOME 44.1|
-|OpenSUSE|Tumbleweed(rolling release)|4.10.3|GNOME 44.1|
+|Fedora|39|4.12.2-2.fc39|GNOME 45|
+|Ubuntu|23.10|4.12.2|GNOME 45|
+|Debian|trixie(testing)|4.12.3+ds-3|GNOME 44.5|
+|Arch|rolling release|4.12.4-1|GNOME 45.2-1|
+|Gentoo|rolling release|4.12.3|GNOME 45.1|
+|OpenSUSE|Tumbleweed(rolling release)|4.12.4|GNOME 45.2|
 @@@
 
 ### Installation from the source file