Bootstrap 4 HTML - remove rounded corners from parallax jumbotron

Question

I've got a great looking parallax going for a home page, but I would like to remove the rounded corners from the images.

Here is my html for one section:

<div class="jumbotron paral paralsec1">
            <h1 class="display-3">Connect</h1>
            <p class="lead">with musicians in your area.</p>
            <p class="lead"><a class="btn btn-info btn-lg btn-md" href="/public/register_member/" role="button">REGISTER AS MEMBER</a></p>
        </div>

And the CSS:

.paral {
min-height: 800px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}

Does anyone know how to remove the rounded corner with a minimal of changes to my code?

Answer 1

You can use the rounded-0 class to remove the border-radius, check the docs

In your case, that would be like this:

<div class="jumbotron paral paralsec1 rounded-0">
  <h1 class="display-3">Connect</h1>
  <p class="lead">with musicians in your area.</p>
  <p class="lead"><a class="btn btn-info btn-lg btn-md" href="/public/register_member/" role="button">REGISTER AS MEMBER</a></p>
</div>