Bootstrap template

2026-05-26 rails html

Bootstrapのサンプルではscriptタグをbodyタグの末尾に書くようになっていることが多いのですが、ここがrailsのturboと相性が悪く、ドロップダウンメニューの動作不良などの原因となっていました。headに移動してdefer属性をつけてあげるのが、どうやら良さそうです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous" defer></script>
  </head>
  <body>
    <div class="container my-5">
      <h1>Hello, Bootstrap!</h1>
    </div>
  </body>
</html>