Bootstrapのclass="btn"がうまく効きません

Question

現在、Bootstrapにてボタンを作成しております。
下記の様にボタンの背景を伸ばして表示したいのですが、スクショの様になってしまいます。
初歩的な質問かと思いますが、術を教えて頂けないでしょうか。

○実現したいこと→下記のスクショの様に、ボタンを配置した背景を伸ばしたい

○現状→下記の様になり、背景が伸びてくれない

下記にコードを記載させて頂きます

<button type="button" class="btn">
<p><%= link_to "追加" ,"#",class: "btn btn-primary" %></p>
 </button>

お手数おかけしますが、宜しくお願い致します。

Comments

[m.ts10806]

btnの中にbtnとはどういうつもりでそう組まれたのでしょうか。
</p>はあっても<p>はないのでそもそもHTMLとして正しくないです

[RThe]

ご教授ありがとうございます。
pタグ、忘れていますね。。。。修正いたしました。
btnにつきましては、サイトに記載されたのもがあったので、コピペしたものです。
Bootstrapの理解がないので、再度学習することとします。

Answer 1

グリッドを指定するといかがですか。
とりあえずの指定ですが以下のようにするとどうでしょう。

<div class="container-fluid"> <div class="row"> <div class="col-sm-12> <div class="p-3 mb-2 bg-secondary text-white"> <button type="button" class="btn"> <%= link_to "追加" ,"#",class: "btn btn-primary" %></p> </button> </div> </div> </div> </div>

Comments

[RThe]

ご丁寧にお答えいただき、ありがとうございます。
グリッドの指定ですね！！
一度、試してみることとします。