在不同的裝置上面，由於螢幕大小的不同，會使得我們的文字面版顯得擁擠。因此，我們會希望在左右兩邊適當的留白，如此才能讓文字更集中，且適當的換行。在引用Bootstrap之前我們勢必要使用media query 去針對各種裝置大小調整相對應留白。好在引用了Bootstrap，我們只需要在外層class加上container就可以簡單做到這一點。這裡的container又可以細分以下兩種:

Container:留白不一致
Container-fruid:留白一致

這裡我使用比較常用的留白不一致來做示範:

在HTML中新增:

        <div class="container">
                <div class="row">
						⋮
                </div>
        </div>

接著我們就可以變動畫面的大小看看文字及排版的變化!

Container厲害的地方不只可以快速地設定成我們要的版型，而且更可以在同一個標籤中新增不同 class ，設定成不同版面大小有不同的變化，在表(1)中，我們可以看到各式Size對應到的class，我們接著在範例中新增，

    <div class="col-md-3 col-sm-6 col-6">
        ⋮
    </div>
    <div class="col-md-3 col-sm-6 col-6">
        ⋮
    </div>

此行意思為，md版面切為3佔據grid，sm版面切為6佔據grid，extral-small版面切為6佔據grid，接著移動我們的畫面，就可以看到變化囉。
接著我們試著將圖片放入嘗試與先前使用CSS的Card一樣，
HTML:

   <div class="row">
        <div class="col-md-4">
             <img class="w-100" src="./富士山.jpg" alt="富士山">
         </div>
         <div width="w-100" class="col-md-8">
               <h3>富士山</h3>
                 <p>
					⋮
                 </p>
          </div>
</div>

這裡要注意幾個部分:
1.我們先分成兩個大區塊，一個區塊是img標籤，另一個區塊是h3標籤、p標籤。
2.接著我們設定版型為中型裝置且寬度圖片佔有4Grid，文字的部分佔有8Grid。
3.一旦設定完成會發現我們的圖片與文字仍然會跑版，最後就是要使用class=”w-100”去設定使得寬度依照版面大小調整100%。
4.
大功告成!

今天的內容可以參考我的範例 GitHub 我的第一個網站-7