Getting the inner panel perfectly aligned in Bootstrap

Hello everyone,

I'm new to bootstrap and having trouble aligning the inner panel with the outer panel.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel panel-default bs-example">
  <div class="panel-heading">
    <h3 class="panel-title">Outer</h3>
  </div>
  <div class="panel-body">
    <form name="templateForm" class="form-horizontal bs-example" style="min-height: 320px;">

      <div class="form-group">
        <div class="col-sm-4">
          <label for="inputName" class="control-label">Name</label>
          <input type="text" class="form-control" name="name" id="inputName" placeholder="Display Name">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-4">
          <button class="btn btn-primary">Submit</button>
        </div>
      </div>
      <div class="panel panel-default" style="padding:0px;">
        <div class="panel-heading">
          <h3 class="panel-title">Description</h3>
        </div>
        <div class="panel-body"></div>
      </div>
    </form>
  </div>
</div>

1) My goal is to have the inner panel (Description) start from the border of the outer panel without any padding as shown in image.

2) I would like to implement a feature where users can collapse/minimize the outer panel, displaying only the panel title by default.

csstwitter-bootstrap

Answer №1

To make the necessary adjustments, you can modify padding:15px to padding:15px 0 in the .panel-body class to remove the left padding. Then, include padding-left for the .form-group class.

See the code below:

.panel-body {
    padding:15px 0;  
}

.form-group {
  padding-left:15px;
}

Check out the Bootply example here: http://www.bootply.com/UV5wsddAoW

Answer №2

If you're looking to achieve this effect, one approach is to assign a class to the inner panel, such as inner-panel, and apply a negative margin to it. Since Bootstrap adds 15px padding by default to a panel-body, you'll need to compensate for that with the offset.

.inner-panel {
  margin-left: -15px;
  margin-right: -15px;
}

To enable collapsing of the inner panel, utilize Bootstrap's JavaScript components, specifically http://getbootstrap.com/javascript/#collapse.

<div class="panel-heading" data-toggle="collapse" href="#inner-panel-body">

You can enhance the functionality by adding data-toggle="collapse" and href="#inner-panel-body" to the panel-heading of the inner panel. This configuration indicates to Bootstrap that clicking on the header should expand the element selected by the CSS selector #inner-panel-body. Additionally, you can style the header to display a hand icon when hovering over it or enclose the header description within an <a> tag.

<div class="panel-body collapse" id="inner-panel-body"></div>

The panel-body receives the collapse class to ensure it starts collapsed by default and is linked via the ID inner-panel-body, which corresponds to the href in the panel-heading.

Consider leveraging more of Bootstrap's grid system classes to structure your content into containers, rows, and responsive columns. Check out http://getbootstrap.com/css/#grid for more information.

.inner-panel {
  margin-left: -15px;
  margin-right: -15px;
}

.inner-panel .panel-heading {
  cursor: pointer;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="panel panel-default bs-example">
  <div class="panel-heading">
    <h3 class="panel-title">Outer</h3>
  </div>
  <div class="panel-body">
    <form name="templateForm" class="form-horizontal bs-example" style="min-height: 320px;">

      <div class="form-group">
        <div class="col-sm-4">
          <label for="inputName" class="control-label">Name</label>
          <input type="text" class="form-control" name="name" id="inputName" placeholder="Display Name">
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-4">
          <button class="btn btn-primary">Submit</button>
        </div>
      </div>
      <div class="inner-panel panel panel-default">
        <div class="panel-heading" data-toggle="collapse" href="#inner-panel-body">
          <h3 class="panel-title">
            Description
          </h3>
        </div>
        <div class="panel-body collapse" id="inner-panel-body"></div>
      </div>
    </form>
  </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

The vertical tabs in JQueryUI lost their functionality when a few seemingly unrelated CSS styles were added

Check out the JsFiddle demo here I embarked on a mission to craft JQueryUI Vertical tabs by following the guidance provided in this example. The source code within the aforementioned link contains specific CSS styles: .ui-tabs-vertical { width: 55em; } ...

javascriptjqueryhtmlcssjquery-ui

Challenges arise when using Bootstrap 4 for country selection

There have been reports that bootstrap 4 country select is not functioning properly. In an effort to troubleshoot, I delved into the documentation to find a solution. To make bootstrap-select compatible with bootstrap 4, refer to: Bootstrap 4 beta-2 ...

javascripthtmljquerycssbootstrap-4

Remove the outline on a particular input and retain only its border

Even after trying to use "outline: 0", nothing seems to change. #input_field { outline: 0; width: fit-content; margin: auto; margin-top: 20%; border-radius: 30px; border: 2px solid turquoise; padding: 6px; } <div id="input_field"> ...

htmlcssoutline

Tips for creating a div that remains fixed when scrolling

What is a JQuery method to identify when a div goes offscreen and adjust its CSS to make it fixed position at the bottom of the window? ...

jquerycss

Issue with custom leaflet divIcon not maintaining fixed marker position during zoom levels

After creating a custom marker for leaflet maps, I noticed that it shifts position drastically when zooming in and out of the map. Despite trying to adjust anchor points and positions, the issue persists. I have provided the code below in hopes that someon ...

javascripthtmlcssleaflet

Challenges with jQuery: Appending strings to a dynamically selected element

Hello everyone, I have a question regarding adding the string 'url(" ")' around my Any assistance you can provide would be greatly appreciated. Thank you! $(function() { $('#list li a').hover( function(){ $("#meow").css( " ...

javascriptjqueryhtmlcss

What is the best way to fix images that appear stretched out when the containing DIV class is sized properly?

I'm currently tackling a timeline module in Elementor/Wordpress. Even though the image is uploaded correctly and displayed properly in the Wordpress gallery with the correct proportions, it appears distorted. The <div class="eael-content-timeline- ...

htmlcsswordpressimageelementor

How can I align the tags properly when inserting a tab box within a section tag?

How can I successfully insert a tab box within my section tag? I found this tab box tutorial on the website here The download link for the source code is available here: source code Below is the HTML code snippet: <!DOCTYPE html> <html> & ...

javascriptjqueryhtmlcss

Issue with MeteorJS: The template event fails to trigger when within a popover

I'm facing an issue with my code. The problem I'm encountering is that the button "viewcart" click event is not triggering when clicked. This button is located inside a popover. Does anyone have any suggestions on how to activate the button click ...

javascriptjquerynode.jstwitter-bootstrapmeteor

What is the method for animating the hiding of <details>?

Having successfully used @keyframes to animate the opening of the details tag, I am now facing the challenge of animating the closing. Unfortunately, I have not been able to find a CSS solution for this. The @keyframes for closing are not working as expect ...

css

Expand the width of the dynamic arc surrounding the circle

I borrowed an animated circle with a timer. I need to adjust the width of the animated arch within the circle. Can someone help me do this? I'm having trouble figuring it out on my own. You can access the jsFiddle here This is where I have set the ...

javascriptjqueryhtmlcss

The CSS keyframe for mobile devices initiates from 100% and then proceeds to animate

Having some trouble with CSS animations on mobile devices. The animation works perfectly fine on desktop, but on mobile, it seems to display the final 100% keyframe first before animating from 0%. I've tried adding the initial style directly to the cl ...

csscss-animationskeyframe

What is the best way to align a container in the middle of the page without positioning the text in the center

Query 1: What is the best way to horizontally center the container div while keeping Typography aligned to the left? Expected outcome: https://i.stack.imgur.com/yKCZF.jpg Query 2: How can a component be positioned below the AppBar without relying on mar ...

cssflexboxmaterial-ui

What are the steps for transitioning with JavaScript?

My goal is to make both the <hr> elements transition, but I'm struggling with only being able to select the lower <hr> using CSS. html { margin-bottom: 0; height: 100%; min-height: 100%; } body { margin-top: 0; height: 100%; ...

javascripthtmlcss

Create an alert box that covers the content

I have been struggling to get the alert boxes to overlap on my content without pushing it down. I have tried changing the position to absolute, relative, and fixed, but nothing seems to work. There was one time when it worked, but as soon as I saved, it ...

csssassbootstrap-5

Ways to avoid margin overflow in CSS

I am facing an issue with the code below where the last row overflows the parent container. I have tried using overflow: auto; to fix it, but that just adds scrollbars. Any suggestions on how to prevent the overflow? <link rel="stylesheet" href="http ...

htmlcssbootstrap-4

When a Bootstrap row has a set maximum height, it continues to occupy space even when its content overflows

There is a div with colors that includes a Bootstrap row with multiple columns. A fixed max-height has been set, giving the appearance of scrollability. However, the row with columns continues to expand well beyond the footer: https://i.sstatic.net/jf3pGx ...

vue.jstwitter-bootstrapflexboxvuejs3bootstrap-5

Graphics vanishing during printing on document

Partaking in the Daily UI challenge to enhance my skills, but have encountered a hurdle. After entering numbers into the Card Number field, it appears to be replacing the images I uploaded. There might be something glaringly obvious that I'm missing ...

javascripthtmlcss

Background gradients in versions of Internet Explorer 8 or earlier

For my website, I'd like to incorporate gradient backgrounds specifically for Internet Explorer. I am aware of a proprietary method for achieving this: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr= ...

htmlcssinternet-explorer

What steps should be taken to resolve error code 405 in Flask/Py?

I've been encountering an issue with my Flask and socket.io chat application - every time I try to send a message, I receive a 405 error. Despite multiple attempts, I can't seem to resolve this problem (it's just a basic setup with a usernam ...

pythonhtmlcssflask