What are some effective strategies for arranging multiple collapsible Bootstrap panels in an organized and visually appealing

I'm looking to use "collapsible bootstrap panels" to display a list, but I've run into an issue where certain panels don't align correctly when opened.

For example, when I open the first panel in my code, all other panels shift down and stack underneath the second panel.

I want panels 3 and 4 to maintain their position within the grid even when panel 1 is open.

Can anyone help me figure out what I might be doing wrong?

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div>
                <a
                    href="#panel1"
                    class="btn btn-info"
                    data-toggle="collapse">Panel 1</a>
            </div>
            <div
                id="panel1"
                class="collapse">

                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Praesent scelerisque, neque sit amet aliquam pulvinar, metus
                        arcu commodo sem, id volutpat erat nulla imperdiet enim. Proin
                        imperdiet dolor vitae lorem efficitur, non tincidunt nisi
                        accumsan. Nam condimentum mi ac auctor tincidunt. Fusce eget
                        tempus velit, in porta velit. Mauris vel ultrices ipsum. Nunc
                        rutrum vitae quam ut porta. Suspendisse diam sem, molestie sed
                        nisl id, imperdiet ornare libero. Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit. Nam sagittis augue vitae iaculis
                        lacinia. Ut id eros egestas turpis vehicula feugiat ut eu
                        lectus. Ut eu consequat arcu, a porttitor magna.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div>
                <a
                    href="#panel2"
                    class="btn btn-info"
                    data-toggle="collapse">Panel 2</a>
            </div>
            <div
                id="panel2"
                class="collapse">

                <div>
                    <p>Nunc vel lectus sit amet ante imperdiet aliquet non sit amet
                        felis. Vestibulum rhoncus rutrum ante nec sodales. Aliquam
                        vitae suscipit orci. Nam dignissim a purus vitae efficitur.
                        Pellentesque habitant morbi tristique senectus et netus et
                        malesuada fames ac turpis egestas. Nam libero augue,
                        scelerisque ut rhoncus eu, scelerisque a enim. Vestibulum ante
                        ipsum primis in faucibus orci luctus et ultrices posuere
                        cubilia Curae; Ut l...
csstwitter-bootstrapgrid

Answer №1

**Tyr With this**
<div class="container">
   <div class="row">
      <div class="col-xs-6">
         Custom panel1 Code
      </div>
      <div class="col-xs-6">
         Custom panel2 Code
      </div>
   </div>
   <div class="row">
      <div class="col-xs-6">
         Custom panel3 Code
      </div>
      <div class="col-xs-6">
         Custom panel4 Code
      </div>
   </div>
</div>

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

Tips for positioning two divs in the center of a webpage, both horizontally and vertically, while also including a header and

Currently, I am in the process of creating a new web page with Bootstrap 4. This page consists of four main elements - a header, a footer, and two content boxes contained within divs. While I have successfully utilized default bootstrap classes to ensure t ...

htmlcssbootstrap-4

Solve the problem with SCSS at the component level in NextJS

I've decided to transition my regular React app to Next.js. In the past, I would simply import SCSS files using: import from '.componentName.scss' However, now I need to import them using: import style from 'componentName.module.scss ...

javascriptcssreactjssassnext.js

What is the reason for using <div class="clear"></div> instead of <div class="clear"/>?

It dawned on me that: <div class="clear"/> can wreak havoc on the layout after a sequence of floating divs, whereas <div class="clear"></div> works perfectly fine. Does anyone have an explanation for this? Here is the CSS being used ...

htmlcsscss-float

When elements are passed through components in Next.js, their style does not get applied

I have a unique component for the hero section of every page with varying content and heights. export default function CustomHero({ height, children, }: { height: string; children: ReactNode; }) { return ( <div className={`flex flex- ...

cssreactjsnext.jscomponentstailwind-css

React Tabulator - custom header filter for select column - hide 'X' option

Is it possible to remove the 'x' option on header filters in react tabulator columns? The issue arises when users click the 'X' to clear a filter, as expected. However, if they then try to click on the same filter for another list item ...

cssreactjstabulator

Is there a bug in Firefox when using the multicolumn columns property with Flexbox?

Could this be a compatibility issue with Firefox? The layout appears fine in Chrome or when I take out columns: 2, then it also displays correctly in Firefox. div { width: 500px; padding: 2rem; display: inline-flex; align-items: baseline; bor ...

cssfirefoxflexboxcss-multicolumn-layout

Responsive design element order rearrangement

My code example is as follows: <div class="info-container"> <span class="item1">item1</span> <a class="item2" href="#">item2</a> <a class="item3" href="#">item3</a> </div> I want to rearran ...

javascriptjqueryhtmlcssangularjs

Are you searching for a stylish tabbed navigation menu design?

I am searching for a tabbed navigation menu specifically designed to showcase images as the tab items. Here is an example of what I have in mind: <div class="menu"> <a href="#"> <img src="images/Chrysanth ...

jquery-uicss

The use of jQuery addClass does not produce any changes

I am trying to modify a single attribute in my class using a JavaScript function. .msg_archivedropdown:before { content:""; display: block; position:absolute; width:0; height:0; left:-7px; top:0px; border-top: 10px solid tr ...

javascriptjquerycss

Incorporating various vertical divs with 100% height and width

Struggling to achieve the creation of multiple divs with 100% width and height? Here is an example: <html> <body> <div id="wrapper"> <div id="1">100% height & width, all you can see when opening this file!</div&g ...

htmlcss

Design a background or overlay for modal using CSS styling

How do I add a backdrop color behind my React modal screen using just CSS, specifically positioning the overlay with white at .5 opacity behind the modal? .modal-footer-small width: 450px height: auto margin: 0 auto top: 53% left: 0 right: 0 ...

cssreactjsmodal-dialogoverlay

Creating a zebra-striped list using CSS can be done by styling even and odd list items differently

I am facing an issue with Angularjs and the table tag when using group loops. The problem arises in achieving correct zebra striping for the list. How can I solve this to ensure the zebra pattern is applied correctly? <table> <tbody> <tr ...

cssangularjs

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

Why isn't the video div sliding down and displaying properly in the beginning? Any ideas on how to fix it? Here is the snippet of HTML code and JavaScript: <!DOCTYPE HTML> <html> <head> <title>Team Songs</title> <link ...

javascriptjqueryhtmlcss

Developing view logics in Angular using ng-grid/ui-grid

Exploring the possibilities of creating a grid with advanced features such as filtering, resizing, scrolling, fixed headers, row formatting, and cell formatting using AngularJS. After reviewing various grids documentation, I have come across the following ...

javascriptangularjstwitter-bootstrapgrid

What is the best way to automatically close a modal box after submitting a form?

Currently, I am utilizing the CSS modal box developed by Paul R. Hayes. More information about this can be found here - Within the modal box, I have integrated a form. This form is aimed at an iframe that remains concealed on the same page. My objective i ...

htmlcssforms

What is the best way to place a p-growl element in the bottom right corner of the page?

I've been struggling to fix the positioning of my growl message at the bottom right corner by overriding the CSS classes of p-growl. Initially, I attempted to override the .ui-growl class like this: ::ng-deep .ui-growl { position: fixed; b ...

cssangularangular5primeng

The size of the elements inside a div should be proportional to its parent div

I am struggling with sizing elements within a div. I have set the max-width to 40% and max-height to 25%, and inside is an image that I want to be 80% of its parent div. Here is the code snippet for reference: <div className="inputbox-container&qu ...

htmlcsssass

Simple HTML files on a local server are having trouble loading images and JavaScript, yet the CSS is loading

Having worked in web design for quite some time, I recently began working on a basic Angular app that is meant to be very simple. For this project, I am only using the angular files and a single html file as the foundation. As I started setting up the bas ...

javascripthtmlcssangularjscss-selectors

Unable to accommodate additional space, InputGroup is not utilizing the

Using react-bootstrap in my project, I have a component with the following code. I want the input and button to display together and fill up the entire space allocated by the Col. Although the input and button are displaying side by side, they are not ta ...

csstwitter-bootstrapreactjsreact-bootstrap

The height of the content in the polymer core-scaffold cannot be set to 100%

I am working with a polymer element that I have defined. The main objective is to make the conversation_container element have a height of 100% so that the message_box_container can be positioned at the bottom of the entire panel using position: absolute; ...

htmlcsspolymer