「Bootstrap4入門」クラスcontainer-fluidとクラスcol-sm-3のサンプル

構文
<div class="row">
<div class="col-sm-3″ style="xxx">
some code
サンプルコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="container-fluid">
<h1>This is a test!</h1>
<p>ABC 1111</p>
<p>DEF 22222</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
</div>
</div>
<div class="container-fluid"> <h1>This is a test!</h1> <p>ABC 1111</p> <p>DEF 22222</p> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div> <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div> </div> </div>
<div class="container-fluid">
  <h1>This is a test!</h1>
  <p>ABC 1111</p>
  <p>DEF 22222</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
  </div>
</div>

 

Bootstrap3

Posted by arkgame