CODEWITHSUNDEEP
csstwitter-bootstrap-3
gypaetus
gypaetus

Reputation: 7349

How to get rounded corners in twitter-bootstrap3's container-fluid

I would like to join together two rows that have different colors inside a container-fluid and use rounded-corners for the whole container. I have tried to change the value of the border-radius parameter to 10px but this does not work. Is there a way to update the container-fluid class to have rounded corners?

<div class="container-fluid" style="border-radius: 10px">
    <div class="row bg-warning h4">
        ...
    </div>
    <div class="row bg-info">
        ...
    </div>
</div>

Upvotes: 1

Views: 2775

Answers (1)

Suganth G
Suganth G

Reputation: 5156

Try this:

Remove the h4 class for joining the container

CSS:

        .top {
            border-top-left-radius:50px;
            border-top-right-radius:50px;
        }
        .bottom {
            border-bottom-left-radius:50px;
            border-bottom-right-radius:50px;
        }

.bg-warning{
    background-color:red;    
}
.bg-info{
    background-color:yellow; 
    }

HTML:

 <div style="height:100px" class="row top bg-warning">

</div>
<div style="height:100px"  class="row bottom bg-info">
    ...
</div>

DEMO

Upvotes: 3

Related Questions