Bootstrap 4 - container class and rounded corners?

Question

How can I have achieve a div which has a container class from Bootstrap but also has rounded corners?

<div class="container rounded">
  <div class="row">
     <div class="col">Approver:</div>
  </div>
</div>

When I use the above code, my corners still appear to be square however Bootstrap 4 documentation states that the "rounded" class should take care of rounded corners?

Answer 1

As per the documentation, The rounded class in bootstrap does the following:

.rounded {
    border-radius:.25rem!important
}

You should be able to use it on a container.

However, keep in mind that unless the background color is of a different color than the container (or unless it has a differently colored border), it won't be visible.

Here's a snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container rounded">
  This rounded container has no background color.
</div>

<hr />

<div class="container rounded bg-dark">
  This rounded container has a background color.
</div>

<hr />

<div class="container rounded" style="border:1px solid black">
  This rounded container has no background color, but it has a black border.
</div>