Html 向引导行添加按列显示不同颜色的通用背景框

我现在正在学习bootstrap，并试图制作一个简单的网站。我创建了一个包含3列（大小：3,6,3）的行，每个列都有自己的文本元素。我希望第一列和最后一列的颜色是红色，中间是灰色。我在css中使用了背景色来实现这一点，但我看到颜色仅包围了文本元素。有没有办法快速添加不同颜色但高度相同的条？这可能有助于更好地理解这个问题。我可以创建一个带条的新引导行并将其添加到它们后面，但我想知道是否有更简单的解决方案。html和css如下所示

<div class="aboutbar">
    <div class="container">
        <div class="row">

            <div class="leftbar">
                <div class="col-xs-3">
                    <h3> 231 </h3>
                    <p>Enthusiasts</p>
                </div>
            </div>

            <div class="middlebar">
                <div class="col-xs-6">
                    <h3><a href="#"> Kanye West</a></h3>
                    <p> Kanye Omari West is an American hip hop recording artist, record producer, rapper, fashion designer, and entrepreneur.West is one of the best-selling artists of all time, having sold more than 32 million albums and 100 million digital downloads worldwide.
                </div>
            </div>

            <div class="rightbar">
                <div class="col-xs-3">
                    <ul style="list-style:none;">
                        <li class="emphasis"> Follow </li>
                        <li> Events </li>
                        <li> Blog </li>
                    </ul>

---

提前谢谢

为列设置相同的高度是一个非常常见的问题。 我使用一个jquery插件，它强制行的所有列具有相同的高度

---

谢谢你，塞萨尔！谢谢你的帮助！不客气，如果你已经解决了问题，请接受答案。

    .leftbar .col-xs-3 {
    background-color:red;
    color:white;
}

.middlebar .col-xs-6 {
    background-color:grey;
    color:white;
}

.rightbar .col-xs-3 {
    background-color:red;
    color:white;
}