I desire for my primary content to cascade over my jumbotron within Bootstrap

Question

I desire for my primary content to cascade over my jumbotron within Bootstrap

I am attempting to create a design where my main container slightly overlaps on top of my jumbotron. I have experimented with the "my, mb, py, pb" properties, but have not achieved the desired 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>

My goal is to have the jumbotron span the full horizontal width, with the content overlapping about halfway over the jumbotron on top. I tried implementing position absolute on the jumbotron as suggested, but it resulted in the jumbotron being squished.

html css bootstrap-4

Answer 1

Answer №1

If you're looking to create an overlap effect where

<main role="main" class="top-5 container">

slightly overlaps

<div class="jumbotron jumbotron-fluid">

, you can achieve this by applying a negative margin-top to the main element.

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

/* 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadec4dcc4da">[email protected]</a>/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>

Answer 2

If you're looking to create an overlap effect where

<main role="main" class="top-5 container">

slightly overlaps

<div class="jumbotron jumbotron-fluid">

, you can achieve this by applying a negative margin-top to the main element.

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

/* 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadec4dcc4da">[email protected]</a>/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>

I desire for my primary content to cascade over my jumbotron within Bootstrap

Answer №1

Similar questions

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

Does the Parent Tag style override the child tag style when hovering?

Saving an Image from HTML5 <canvas> using Java Servlet

Combining Files in Angular 2 for Optimal Production Deployment

Tips for concealing scrolled material beneath a stationary see-through banner

When a new element is dynamically added to a table cell, how is the computation of "width: 100%" handled?

Shifting text higher to the <h1> tag using CSS

Is there a way to display .form-check-inline buttons on a different line than their corresponding label?

Ways to position a button at the bottom of a div and beneath an image

Is there a way to maintain the vertical alignment of spans within an HTML div after numerous drag and drop operations have taken place?

PHP Implementing real-time dynamic categories

What could be causing my Font Awesome icon background to fail to load?

Update the styling for the second list item within a specified unordered list class instantaneously

Creating a drop-down menu within an HTML table along with a D3 bar chart

I've got some .html files stored on GitHub and I want to open them in Sublime Text 3. How can I achieve this? Could you please provide me with a detailed, step-by-step guide

Excessive content - letter "y" disrupts the row layout on mobile devices

Calculate the total price using Jquery once selections have been made

Prevent Bootstrap dropdown menu from closing when clicked on

Utilizing Flask to insert data into a MySQL database table

Guide on making a prev/next | first/last button functional in list.js pagination