Bootstrap Collapse one item
I am using Bootstrap 3 to create a responsive website. However, I am doing a "portfolio".
You can see the website here as well as my "mistake".
Scroll down to Our Models and click Information. When you click on this button, it will hide the new item under the model's profile picture.
But this collapsible element nudges the image under the element to the right for one column.
I guess I don't need to post the code here, as you can just right click on its source code.
Also, this is my first question about Stack Overflow, so I am sorry if it is not formatted properly. Thank you for your help.
source to share
Since you are already using Bootstrap, I suggest you use the bootstrap dropdown . The problem with the current code is that div
which shows the information is not absolutely positioned. This way, whenever this div is displayed, it takes up extra space and breaks the grid layout. Bootstrap dropdown uses an absolute positioned div and therefore does not break layout. Try using it and it will definitely solve this problem.
source to share
You can change the CSS attribute of the expanding position
div to absolute
. This way the element will float to the bottom element, but you have to apply some styles.
Try this:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You can see that the positioning and styling isn't all that great, but I guess you can start from there.
source to share