「Bootstrap4入門」container-fluid でviewport全幅を利用する方法

構文
<div class ="container-fluid">

サンプルコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="container-fluid">
<h1>this is a sample bootstrap4!</h1>
<p>class="row" add class="col"</p>
<div class="row">
<div class="col" style="background-color:lavender;">.col</div>
<div class="col" style="background-color:orange;">.col</div>
<div class="col" style="background-color:lavender;">.col</div>
</div>
</div>
<div class="container-fluid"> <h1>this is a sample bootstrap4!</h1> <p>class="row" add class="col"</p> <div class="row"> <div class="col" style="background-color:lavender;">.col</div> <div class="col" style="background-color:orange;">.col</div> <div class="col" style="background-color:lavender;">.col</div> </div> </div>
<div class="container-fluid">
  <h1>this is a sample bootstrap4!</h1>
  <p>class="row" add  class="col"</p>
  <div class="row">
    <div class="col" style="background-color:lavender;">.col</div>
    <div class="col" style="background-color:orange;">.col</div>
    <div class="col" style="background-color:lavender;">.col</div>
  </div>
</div>

 

Bootstrap3

Posted by arkgame