I want my main to overlap my jumbotron in Bootstrap - html

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 Sign in or Register
<?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 Sign in or Register
</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>