1. ホーム
  2. html

[解決済み] bootstrap 4 を使ってフォームを中央に配置する方法

2022-03-07 09:57:42

質問

bootstrapを学んだばかりで、bootstrap4を使ってフォームを中央に配置しようとしましたが、何度も失敗しているようです。コンテナ、マージンオート、グリッドなどを入れてみましたが、やはり失敗してしまいます。

最後にbootstrap gridを使用したコードを紹介します。

<form class="col-lg-6 offset-lg-3">
    <div class="row">
        <input type="text" placeholder="Example input">
        <span class="input-group-btn">
            <button class="btn btn-primary">Download</button>
        </span>
    </div>
</form>

そして、以下はそのリンクです。 https://jsfiddle.net/artjia/emsw7t93/

解決方法は?

<ブロッククオート

中古 justify-content-center

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
 <form class="col-lg-6 offset-lg-3 ">
   <div class="row justify-content-center">
     <input type="text" placeholder="Example input">
     <span class="input-group-btn">
       <button class="btn btn-primary">Download</button>
     </span>
   </div>
 </form>