Flask使用中におけるBootstrap Gridsystemの利用について

実現したいこと

Flaskを使用し、webアプリケーションの作成を行なっています。

前提

要素の共通化を行いbase.htmlの下にcreate.htmlのファイルを表示させています。その際に、create.html内でGridsystemを使用しましたが、反映されません。

発生している問題・エラーメッセージ

html
1{%  extends "bootstrap/base.html" %}
2{% block title %}最終ページ{% endblock %}
3
4{% block content %}
5<div class="container text-right">
6    <div class="row">
7      <div class="col">
8        Column
9      </div>
10      <div class="col">
11        Column
12      </div>
13      <div class="col">
14        Column
15      </div>
16    </div>
17</div>
18
19{% endblock %}

イメージ説明

Columnというテキストを横に並べたいです

試したこと

containerクラス内でtext-right, text-leftを使用し、create.html内にBootstrapが適用されていることは確認できました。
上記の

html
1<div class="container text-right">
2   |
3</div>

はBootsrap公式サイトから引用しています。

補足情報（FW/ツールのバージョンなど）

visual studio codeを使用しています。

行動規範の内容に同意します

回答1件

ベストアンサー

flask-bootstrapの話でしょうか？

また、もしかしてですが、pip install flask-bootstrapでインストールしましたか？

もし上記の通りだとしたら回答は簡単です。

flask-bootstrapのドキュメントによると、CDNのリンクを作成するとあります。
実際に作成されたHTMLを見てみると、以下でが追加されていることがわかります。

html
1<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

ご覧の通り、これはBootstrap 3のリンクです。

もう分かったと思いますが、質問文にある書き方は、現在bootstrpで検索すると出てくる書き方で、bootstrap5のものです。(4でもそうだったような気がしますが、今回の話題とは関係ないので割愛)

というわけで、bootstrap 3で横に並べたいのであれば、例えば以下の様に書く必要があります。(colってクラスは無かったはず。)

html
1{% extends "bootstrap/base.html" %}
2{% block title %}This is an example page{% endblock %}
3
4{% block navbar %}
5<div class="navbar navbar-fixed-top">
6  <!-- ... -->
7</div>
8{% endblock %}
9
10{% block content %}
11<div class="container">
12    <div class="row">
13      <div class="col-md-4">
14        Column
15      </div>
16      <div class="col-md-4">
17        Column
18      </div>
19      <div class="col-md-4">
20        Column
21      </div>
22    </div>
23</div>
24{% endblock %}