Bootstrap v4 and z-index

Report · May 01, 2018

Hello, all,

I'm trying to use collapse on a higher z-index than the rest of the page, so when expanded it will cover part of the page content.

However, I can't seem to get Bootstrap to co-operate with my desired design. Upon clicking the element that expands and collapses the content, the hidden content starts out "over" the page content, but as soon as the expanding is completed it "sinks below" the page content.

How can I get the expanded content to stay "above" the page content?

V/r,

^ _ ^

Report · May 03, 2018

The closest youll get to anything available in Bootstrap which will do what you need is using data-toggle, without writing your own js or jquery.

Use the bootstrap class position-absolute on the div you want to toggle , the one which is activated by clicking on the 'archives' text. This will force it above the rest of the page content. Be aware the absolutely positioned div must be inside a parent container with the bootstrap class position-relative.

Once you have that set up you can put as many data-toggle divs in it as you want.

The dropdown solution of yesterday will not work as Bootstrap deavtivates it when you click anywhere inside of it hence the reason why you cant choose to show another embedded dropdown.

Report · May 03, 2018

Thank you, osgood_, I had no idea about the position-absolute/position-relative classes. I'll give that a shot.

(For someone who has such disdain for Bootstrap, you seem to know a lot about it. )

V/r,

^ _ ^

Report · May 03, 2018

Below is an example using Bootstrap 4, plus a handful of bespoke css classes. Would I recommend doing it this way, no. I would use less classes and jQuery to target and open/close the <divs>, keeps the html code nice and clean. I've left plenty of sapce betwenn the divs and commented them so you can see what is going on.

Uses CDN Bootstrap 4 hosted files so you'll have to hook up your local files, as I know you cant link to hosted files.

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Div</title>

<style>

* {

box-sizing: border-box;

}

.trigger {

cursor: pointer;

}

#blog_archives {

border: 1px solid #ccc;

padding: 15px;

top: 2.6em;

width: 96%;

background-color: #fff;

}

#blog_archives ul {

margin: 0 0 10px 0;

padding: 0;

}

#blog_archives ul li {

margin: 0;

padding: 0 0 5px 0;

list-style: none;

cursor: pointer;

}

#blog_archives h6 {

cursor: pointer;

}

.blog-entry li {

padding: 0 0 0 15px!important;

}

</style>

</head>

<body>

<h6 class="text-white">Recent Blogs (Dec 2014 - Sep 2013)</h6>

</div>

<div class="trigger text-white" data-toggle="collapse" data-target="#blog_archives">Archives</div>

<li data-toggle="collapse" data-target="#dec2018">December

<li>Blog entry 1</li>

<li>Blog entry 2</li>

<li>Blog entry 3</li>

<li>Blog entry 4</li>

<li>Blog entry 5</li>

</ul>

</li>

<li data-toggle="collapse" data-target="#nov2018">November

<li>Blog entry 1</li>

<li>Blog entry 2</li>

<li>Blog entry 3</li>

<li>Blog entry 4</li>

<li>Blog entry 5</li>

</ul>

</li>

</ul>

<li data-toggle="collapse" data-target="#dec2017">December

<li>Blog entry 1</li>

<li>Blog entry 2</li>

<li>Blog entry 3</li>

<li>Blog entry 4</li>

<li>Blog entry 5</li>

</ul>

</li>

<li data-toggle="collapse" data-target="#nov2017">November

<li>Blog entry 1</li>

<li>Blog entry 2</li>

<li>Blog entry 3</li>

<li>Blog entry 4</li>

<li>Blog entry 5</li>

</ul>

</li>

</ul>

<li data-toggle="collapse" data-target="#dec2016">December

<li>Blog entry 1</li>

<li>Blog entry 2</li>

<li>Blog entry 3</li>

<li>Blog entry 4</li>

<li>Blog entry 5</li>

</ul>

</li>

<li data-toggle="collapse" data-target="#nov2016">November

<li>Blog entry 1</li>

<li>Blog entry 2</li>

<li>Blog entry 3</li>

<li>Blog entry 4</li>

<li>Blog entry 5</li>

</ul>

</li>

</ul>

</div>

</div>

</div>

<h3>Page content goes here. Page content goes here. Page content goes here. Page content goes here. Page content goes here.</h3>

</div>

</body>

</html>

Report · May 03, 2018

This definitely helped. Had to do a lot of finagling (is that a word?) to get it to work the way I had intended, but it's now working precisely as the customer wants. Thanks!

V/r,

^ _ ^

Report · May 03, 2018

No problem, happy Bootstraping.

Lots of finagling sounds about right.

Adobe Community

Bootstrap v4 and z-index

1 Correct answer