Bootstrap Collapse over an element

Question

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".

You can see the website here as well as my "error".

http://basic-models.com/b/

Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.

But that collapsible element is pushing the picture below the element to right for one column.

I guess I don't have to place code here since you can just right click > source code it.

Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.

Answer 1

You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.

Try it like that:

.model-outer div.collapse {
    position: absolute; 
    z-index: 1000; 
    background-color: white; 
    width:100%;
    left:0px;
    margin-top:10px;
}

You see, positioning and styles are not that good, but I assume you can start from there.

Answer 2

Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.