第一個差異

使用CSS，我們需要在不同的斷點下設置不同的max-width，如下所示:

@media (max-width: 576px) {
    .container {
        max-width: 100%;
    }
}
@media (min-width: 577px) and (max-width: 992px) {
    .container {
        max-width: 90%;
    }
}
@media (min-width: 993px) {
    .container {
        max-width: 1200px; 
    }
}

而在Bootstrap，只需要在要創建響應式容器的HTML元素上添加container類名(class)即可，如下所示：
<div class="container">響應式容器</div>

第二個差異

在水平排列（使用display: flex）時，使用CSS需要使用flex屬性（包括flex-grow、flex-shrink、flex-basis）來設置元素的寬度，如下所示：

/* CSS RWD：在不同斷點下設置水平排列元素的寬度 */
@media (max-width: 767px) {
    .flex-item {
        flex: 0 0 100%; /* 100% width at this breakpoint */
    }
}

@media (min-width: 768px) {
    .flex-item {
        flex: 0 0 50%; /* 50% width at this breakpoint */
    }
}

而在bootstrap我們只需要使用網格系統，也就是使用container、row、col類名並配合斷點，如下:

<!-- 在螢幕大於等於768px時，flex-item各佔一列的50%，在螢幕小於等於767px時，flex-item各佔一列的100% -->
<div class="container">
    <div class="row">
        <div class="col-12 col-md-6">flex-item1</div>
        <div class="col-12 col-md-6">flex-item2</div>
    </div>
</div>

動動腦

思考一下如果我們現在有一段程式碼如下，要怎麼將CSS的部分轉為Bootstrap呢?
HTML:

<div>
    <div>
        <div class="flex-item">Element 1</div>
        <div class="flex-item">Element 2</div>
        <div class="flex-item">Element 3</div>
        <div class="flex-item">Element 4</div>
    </div>
</div>

CSS:

@media (max-width: 575px) {
    .your-element {
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .your-element {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .your-element {
        width: 25%;
    }
}

想好了，再往下看下去解答喔！
．
．
．
．
．
．
．
．
．
．
．

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-6 col-md-3">Element 1</div>
        <div class="col-12 col-sm-6 col-md-3">Element 2</div>
        <div class="col-12 col-sm-6 col-md-3">Element 3</div>
        <div class="col-12 col-sm-6 col-md-3">Element 4</div>
    </div>
</div>

只需要寫在HTML的class裡喔！不用寫任何CSS，是不是很簡單直觀又方便呢！＝＞

• 結論

　　　講了這麼多你可能會疑惑，所以我是要使用CSS還是Bootatrap來做網頁的樣式?實際上，這取決於個人習慣和網頁開發的需求。我個人習慣使用Bootstrap提供的排版class、網格系統以及間距（margin和padding）。然後，根據情況，我會添加其他的CSS class 來進行樣式的調整。對於外觀的其他樣式，我通常使用自己編寫的CSS，因為很多時候，設計稿上需要的樣式或顏色未必能在Bootstrap的class中找到。然而，有一點需要注意，當你在添加自定義樣式時，請確保你所取的class名不要與Bootstrap的class名相衝突（如果你有引入bootstrap的話，否則，這可能會導致你的程式碼變得混亂、很難維護！