Prevent Bootstrap 4 from causing content to shift downwards when collapsing

Currently, I am utilizing Bootstrap 4 Collapse and it is functioning flawlessly. However, I am interested in making a slight adjustment. Is there a method to prevent the collapse from pushing down the content below it and instead have it overlap? If this is achievable, how can I implement it?

Below is the basic HTML structure for reference:

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block"gt;
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
<div>Content goes here</div>

Any guidance on achieving this would be greatly appreciated!

csstwitter-bootstrapbootstrap-4

Answer №1

This piece of code appears to be functional!

.content {
  position: relative;
}

#collapseExample {
  position: absolute;
  z-index: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
<div class="content">Content goes here</div>

Answer №2

Incorporating the .align-items-end class into your menu container is another option. This particular class utilizes the flex feature that was added in BS4.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Elevation Ratio

Is there a way to make the height of the textarea in my demo always be 50% of the frame's height, even when resizing the frame? Currently, the textarea's height does not adjust dynamically. How can I achieve this? html, body { line-heigh ...

htmlcss

How to modify the color of a div element with jQuery?

I need some help changing the color of a div with 'jQuery', but I am not sure how to do it. Below is the code I have been trying: function updateDivColor() { $('#OutlineX1').css("color","blue"); } ...

javascriptjqueryhtmlcss

What causes the Material-UI Grid element to shift upon clicking it?

I have encountered an issue while developing a React app with Material UI. The problem arises on a specific page of the application. This particular page consists of text and a button aligned vertically, along with a second set of text and another button ...

cssreactjsflexboxmaterial-uigrid-layout

Using Three.js to display a CSS3D-rendered DIV in full-screen mode

After extensively experimenting with the three.js library, I was able to establish two distinct scenes – one canvas-rendered and the other css3d-rendered – both displayed using the same perspective camera. Note: Despite my efforts, I am constrained to ...

csshtmlthree.jsfullscreenperspectivecamera

How can you ensure that divs stay the same size and appear next to each other without resorting to using

I need assistance with organizing my website layout as shown below: The image div will display an image of variable size, which needs to be vertically and horizontally centered. The text div will contain a large amount of text. While this could easily be ...

htmlcss

Issue with Bootstrap Toast failing to display after Bootstrap Modal closure

I am currently working on an app for a company directory that will help the company manage its employees, departments, and locations. This app is designed to allow users to make changes to the database only after confirming their actions. The app successfu ...

javascripthtmljquerybootstrap-4toast

My JavaScript code is being executed before Chrome Auto-fill

I have successfully created form input elements in Chrome that display a floating label when focused. However, I am encountering an issue when the browser autofills the username and password fields with yellow prefilled text. The JavaScript for the float ...

javascriptjqueryhtmlcssgoogle-chrome

How to ensure an absolutely positioned div spans the entire width of the screen

I am facing an issue with an absolutely positioned div that I want to stretch the full width of the screen using 100vw. However, the problem is that it aligns with its parent's starting point rather than the left side of the viewport. How can I make s ...

htmlcsscss-positionabsolute

Enhancing Bootstrap project with personalized CSS styling

Utilizing SCSS to create my CSS has been the approach I've taken. The content of my main.scss file remains consistent even after it is compiled into css. .my-custom-row { background-color: bisque; } Contained within my index.html file is everythi ...

htmlcsssass

Is it possible for a scrollable div to fill the space above a BottomNavigation bar?

My current project involves creating a fixed bottom navigation bar, with a scrollable div above it displaying various card lists. In my attempts to achieve this layout, I consulted both the Material-UI documentation here and here. However, I struggled to ...

cssreactjsmaterial-ui

Is it possible to capture the bootstrap "data-target" event?

Question Elaborated: I am working on implementing a bootstrap modal, and I want it to be accessible only to logged-in users. Although vue.js allows me to hide this element completely for non-logged in users or manage links effectively, I am facing diffic ...

vue.jsbootstrap-4bootstrap-modal

Show or conceal advertisement based on user role

I have developed a custom Web Control that acts as a container for a mobile banner, but I want to hide it from users who are admins. So far, I've attempted the following: <mob:MobileBanner runat="server" ID="MobileBanner" Visible='<%# Not ...

htmlcssasp.netvb.netasp.net-webcontrol

Using JavaScript to listen for events on all dynamically created li elements

Recently, I've created a simple script that dynamically adds "li" elements to a "ul" and assigns them a specific class. However, I now want to modify the class of an "li" item when a click event occurs. Here's the HTML structure: <form class ...

javascripthtmlcss

What are some ways to create a flashing effect for text in HTML and JavaScript?

Although flashing text is typically prohibited in many places, my client has requested it for a project. I need to create one line of text that flashes using HTML and JavaScript. The text should appear and disappear within seconds, repeating this cycle. I ...

javascripthtmlcss

Tips for successfully using `cols=""` within a grid container alongside a textarea

It seems that both Chrome and Firefox are not following the cols attribute on textarea elements within a grid container: .grid { display: grid; } textarea:not([cols]) { width: 100%; } <h2>Not in a grid container:</h2> <div> <tex ...

htmlcsstextareacss-grid

Assign the two values to variables in the CSS script

My challenge lies in passing two values to the CSS within the <style> tags. The values are: (background-color: --placeholder; color: --placeholdtext;). I am able to pass either one of the values successfully, but not both at the same time. When I cop ...

javascriptjquerycss

The Material-UI table spills out of its designated container

My material-ui table is resizing and scrolling horizontally without issue, but the table element and its contents are overflowing off the right side of the page. Check out this gif to see the behavior: https://i.stack.imgur.com/lXuHj.jpg Additionally, her ...

javascriptcssreactjsmaterial-ui

Positioning Problems with Popups

I have been facing an issue with the positioning of a popup in my trivia game. Despite trying multiple solutions, I have not been able to achieve consistency. Here is a snippet of the HTML code: <div class="logo"> <img src="css/rio-40.png"/& ...

javascriptjqueryhtmlcsspopup

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Two rectangular divs were created, each measuring 60px wide and 150px tall with text inside. The goal was to align the text vertically within the rectangles, achieved by using transform: rotate(-90deg). The challenge arose when trying to center the vertic ...

htmlcss

Arrange the menu items in a column layout based on a given condition

Can someone assist me with displaying the menu subitems? I have created a plunker. Take a look at it to understand what I need (open plunker in full screen) https://plnkr.co/edit/IMEJFPfl5kavKvnUYaRy?p=preview In the plunker above, there are two dropdown ...

htmlcssangularjsangular-ui-bootstrap