How to create separation between columns Bootstrap like block?

Question

I create a row contain 4 columns.

I want to the separation between columns and when user hover in columns, it changes background.

Look like this:

Current my demo looks like:

I hover in one column, it auto show color in another column.

Here my code to do this:

#cate-web-section {
    background: #007ece;
}

.feature-cate {
    font-size: 4rem;
    margin: 0 0 2rem 0;
    text-align: center;
    color: #fff;
}

.feature-cate p {
    margin: 0 0 1rem 0;
    font-size: 2rem;
}

.feature-cate a {
    font-size: 1.7rem;
     color: #fff;
}

.feature-cate:hover {
    background: rgba(255, 255, 255, 0.1);
}

.feature-cate i {
    font-size: 7rem;
    margin: 0 0 2rem 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cate-web-section" class="mid-level-padding">
    <div class="container-fluid">
        <div class="row feature-cate">
            <h4>Thiết Kế Website Đa Lĩnh Vực</h4>
        </div>
        <div class="row feature-cate">
            <div class="col-sm-3">
                <div class="section-cate">
                    <i class="fa fa-building-o" aria-hidden="true"></i><p>Bất Động Sản</p><a href="http://">Xem chi tiết</a>
                </div>
            </div>
            <div class="col-sm-3"><i class="fa fa-newspaper-o" aria-hidden="true"></i><p>Tin Tức</p></div>
            <div class="col-sm-3"><i class="fa fa-bolt" aria-hidden="true"></i><p>Sản Phẩm/Dịch Vụ</p></div>
            <div class="col-sm-3"><i class="fa fa-shopping-cart" aria-hidden="true"></i><p>Bán Hàng Online</p></div>
        </div>
    </div>
</div>

Try changing .feature-cate:hover to .feature-cate .col-sm-3:hover — itodd
– itodd, Commented Sep 20, 2017 at 22:02

P.S. · Accepted Answer · 2017-09-20 22:05:48Z

@itodd already answered your question in comments, here is just a demonstration:

#cate-web-section {
    background: #007ece;
}

.feature-cate {
    font-size: 4rem;
    margin: 0 0 2rem 0;
    text-align: center;
    color: #fff;
}

.feature-cate p {
    margin: 0 0 1rem 0;
    font-size: 2rem;
}

.feature-cate a {
    font-size: 1.7rem;
     color: #fff;
}

.feature-cate > .col-sm-3:hover {
    background: rgba(255, 255, 255, 0.1);
}

.feature-cate i {
    font-size: 7rem;
    margin: 0 0 2rem 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cate-web-section" class="mid-level-padding">
    <div class="container-fluid">
        <div class="row feature-cate">
            <h4>Thiết Kế Website Đa Lĩnh Vực</h4>
        </div>
        <div class="row feature-cate">
            <div class="col-sm-3">
                <div class="section-cate">
                    <i class="fa fa-building-o" aria-hidden="true"></i><p>Bất Động Sản</p><a href="http://">Xem chi tiết</a>
                </div>
            </div>
            <div class="col-sm-3"><i class="fa fa-newspaper-o" aria-hidden="true"></i><p>Tin Tức</p></div>
            <div class="col-sm-3"><i class="fa fa-bolt" aria-hidden="true"></i><p>Sản Phẩm/Dịch Vụ</p></div>
            <div class="col-sm-3"><i class="fa fa-shopping-cart" aria-hidden="true"></i><p>Bán Hàng Online</p></div>
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

How to create separation between columns Bootstrap like block?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related