I want my main to overlap my jumbotron in Bootstrap

Question

I'm trying to make my main container slightly overlap on top of my jumbotron, I have tried messing with "my,mb,py,pb" but it doesn't cause an overlap

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Jumbotron H text</h1>
    <p>Text</p>
  </div>
</div>

    <main role="main" class="container">
      <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
        
        <div class="lh-100">
          <h6 class="mb-0 text-white lh-100">
            <?php
                if(isset($_SESSION) && isset($_SESSION['login'])){ ?>
                Welcome <?php echo $username; ?>
                </h6>
          <small>Since <?php echo $created; ?></small>
                <?php }else{ ?>
                Please <a href="login.php">Sign in</a> or <a href="register.php">Register</a>
                <?php } ?>
     </div>
      </div>

I want the jumbotron to be the full horizontal width and the content to be about halfway over the jumbotron on top, I just tried the position absolute on the jumbotron like someone suggested however it just caused the jumbotron to be squished

Answer 1

If you want that <main role="main" class="top-5 container"> overlaps <div class="jumbotron jumbotron-fluid"> slightly you could add a negative margin-top to main.

main.negative-margin {
  margin-top: -3rem;
}

/* the style form <!-- Custom styles for this template -->  */
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

body {
  padding-top: 56px;
}

@media (max-width: 767.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 56px; /* Height of navbar */
    bottom: 0;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    background-color: var(--gray-dark);
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  .offcanvas-collapse.open {
    -webkit-transform: translateX(-1rem);
    transform: translateX(-1rem); /* Account for horizontal padding on navbar */
  }
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-underline .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: var(--secondary);
}

.nav-underline .nav-link:hover {
  color: var(--blue);
}

.nav-underline .active {
  font-weight: 500;
  color: var(--gray-dark);
}

.text-white-50 { color: rgba(255, 255, 255, .5); }

.bg-purple { background-color: var(--purple); }

.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">


<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Jumbotron H text</h1>
    <p>Text</p>
  </div>
</div>

<main role="main" class="top-5 container negative-margin">
  <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">

    <div class="lh-100">
      <h6 class="mb-0 text-white lh-100">
          Welcome
      </h6>
      <small>Since </small> Please <a href="login.php">Sign in</a> or <a href="register.php">Register</a>
    </div>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-12">
        <div class="card card-chart">
          <div class="card-header ">
            <div class="row">
              <div class="col-sm-6 text-left">
                <h2 class="card-title">Servers</h2>
              </div>
              <div class="col-sm-6">
                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                  <label class="btn btn-sm btn-primary btn-simple active" id="0">
                        <input type="radio" name="options" checked>
                        <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Votes</span>
                        <span class="d-block d-sm-none">
                          <i class="tim-icons icon-single-02"></i>
                        </span>
                      </label>
                  <label class="btn btn-sm btn-primary btn-simple" id="1">
                        <input type="radio" class="d-none d-sm-none" name="options">
                        <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">PVP</span>
                        <span class="d-block d-sm-none">
                          <i class="tim-icons icon-gift-2"></i>
                        </span>
                      </label>
                  <label class="btn btn-sm btn-primary btn-simple" id="2">
                        <input type="radio" class="d-none" name="options">
                        <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">PVE</span>
                        <span class="d-block d-sm-none">
                          <i class="tim-icons icon-tap-02"></i>
                        </span>
                      </label>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="container">
              <div class="container">
                <div id="servers">
                </div>
              </div>
            </div>
          </div>
        </div>