Im using bootstrap on my website and I saw something cool on other website.
They have like a 20% transparent circle that makes white shadow on fully dark background.
Here is the image of it: https://imgur.com/a/TZp3Txr

Im also asking how can I use bootstrap to make my jumbotron not that high because currently is almost on the navbar. I need it set padding-top like to 15% but using Bootstrap only.
Sorry if I’m asking stupid questions but I’m learning the Bootstrap.

Here is my code:

<div class="container">
    <div class="d-flex flex-wrap align-items-center justify-content-between py-5">
        <div class="d-flex align-items-center col-md-3 mb-2 mb-md-0 nav-brand">
            <p>Something will be here!</p>    
        </div>
        <ul class="nav col-12 col-md-auto mb-2 mb-md-0 d-flex align-items-center ms-md-3">
            <li class="px-2">
                <a href="#" class="nav-link px-2">Test 1</a>
            </li>
            <li class="px-2">
                <a href="#" class="nav-link px-2">Test 2</a>
            </li>
            <li class="px-2">
                <a href="#" class="nav-link px-2">Test 3</a>
            </li>
            <li class="px-2">
                <a href="#" class="nav-link px-2">Test 4</a>
            </li>
        </ul>
        <div class="col-md-3 text-end nav-btn">
            <a href="#" class="nav-link px-2">Test 5</a>
        </div>
    </div>
    <!-- need to change padding-top: 15% to use bootstrap only for it -->
    <div class="row align-items-start" style="padding-top: 15% !important;">
        <div class="col-md-6">
            <div class="col d-flex flex-column align-items-start">
                <h1>Test 6!</h1>
            </div>
            <p>
                Hello world
            </p>
        </div>
    </div>
</div>

I tried reading docs about it testing examples but failed so that’s why im asking.
Thanks.