「Bootstrap4入門」等幅グリッドを使うサンプル

構文
<div class="row">
<div class="col">xxx</div>
</div>
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="container-fluid">
<h1>Welcome study in arkgmae!</h1>
<p>画面を3個のカラムに等分、classの.rowと.colを利用</p>
<div class="row">
<div class="col" style="background-color:lavender;">A001</div>
<div class="col" style="background-color:orange;">B002</div>
<div class="col" style="background-color:lavender;">C003</div>
</div>
</div>
<div class="container-fluid"> <h1>Welcome study in arkgmae!</h1> <p>画面を3個のカラムに等分、classの.rowと.colを利用</p> <div class="row"> <div class="col" style="background-color:lavender;">A001</div> <div class="col" style="background-color:orange;">B002</div> <div class="col" style="background-color:lavender;">C003</div> </div> </div>
<div class="container-fluid">
  <h1>Welcome study in arkgmae!</h1>
  <p>画面を3個のカラムに等分、classの.rowと.colを利用</p>
  <div class="row">
    <div class="col" style="background-color:lavender;">A001</div>
    <div class="col" style="background-color:orange;">B002</div>
    <div class="col" style="background-color:lavender;">C003</div>
  </div>
</div>

 

Bootstrap4

Posted by arkgame