Alignment of containers on the same level in a horizontal direction

Looking to achieve horizontal alignment of div containers. The container on the left (with a blue border) may have a fixed height. The other two containers (with red borders) should be aligned horizontally to the left blue container regardless of its height.

.cursor-pointer {
    cursor: pointer;
}

.equal-height {
  display: flex;
  display: -ms-flex;
}

.border-red {
  border-style: solid;
  border-width: 2px;
  border-color: #FF0000;
}
.border-blue {
  border-style: solid;
  border-width: 2px;
  border-color: #2E2EB8;
}
.border-green {
  border-style: solid;
  border-width: 2px;
  border-color: #00CC00;
  margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-green equal-height">
        <div class="col-xs-6 border-blue">
            <div class="panel panel-default">
                <div class="panel-heading">Z</div>
                <div class="panel-body">
                    a<br>
                    a<br>
                    a<br>
                    a<br>
                    a<br>
                    a<br>a<br>a<br>a<br>a<br>

                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="border-red">
                <div class="panel panel-default">
                    <div class="panel-heading">X</div>
                    <div class="panel-body">
                        c<br>
                        c<br>
                        c<br>
                    </div>
                </div>
            </div>
            <div class="border-red">
                <div class="panel panel-default">
                    <div class="panel-heading">Y</div>
                    <div class="panel-body">

                    </div>
                </div>
            </div>
        </div>        
    </div>

htmlcsstwitter-bootstrapflexbox

Answer №1

When utilizing bootstrap, it is important to enclose your grid within a container element.

Columns come with built-in padding, which explains the padding you see on the second column. If you wish to remove it, simply apply a class like .noRPad (I made this adjustment inline, but I recommend creating a separate class).

You might be wondering why the blue element doesn't have padding. The padding is there, but you applied your border-blue class directly to the column itself. By moving it inside the column, you would achieve the same results as you do with the border-red elements.

If you'd like to see a demonstration of these concepts, check out this demo.

Additionally, here's an example showing how padding can be removed from columns by adding the .noPad class: example.

Example: 

.cursor-pointer {
cursor: pointer;
}

.equal-height {
  display: flex;
  display: -ms-flex;
}

.border-red {
  border-style: solid;
  border-width: 2px;
  border-color: #FF0000;
  flex-grow: 1;
}
.border-blue {
  border-style: solid;
  border-width: 2px;
  border-color: #2E2EB8;
}
.border-green {
  border-style: solid;
  border-width: 2px;
  border-color: #00CC00;
  margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row border-green equal-height">
    <div class="col-xs-6 border-blue">
        <div class="panel panel-default">
            <div class="panel-heading">Z</div>
            <div class="panel-body">
                a<br>
                a<br>
                a<br>
                a<br>
                a<br>
                a<br>a<br>a<br>a<br>a<br>

            </div>
        </div>
    </div>
    <div class="col-xs-6" style="display: flex;flex-direction: column;padding-right: 0;">
        <div class="border-red">
            <div class="panel panel-default">
                <div class="panel-heading">X</div>
                <div class="panel-body">
                    c<br>
                    c<br>
                    c<br>
                </div>
            </div>
        </div>
        <div class="border-red">
            <div class="panel panel-default">
                <div class="panel-heading">Y</div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </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

Adding EventListeners for Click Handling: A Step-by-Step Guide

Here is the part of my code in HTML: <!DOCTYPE html> <html> <head> <h> <title> This page</title> </h> </head> <body> <button id = "go-button" >GO ...

javascripthtmlcsswebfrontend

Tips for choosing a nested element within a div using CSS

I'm looking to target a specific child element within a div using CSS. Here's the HTML code I have: <div class='body'> <text>This is a text element</text> </div> Instead of adding a class or an ID, I want to ...

htmlcss

Navigate through content to reach the bottom of the webpage

I am currently working on a layout that is similar to Facebook's messaging system (facebook.com/messages). I have made some progress with it, but not quite there yet. You can view my work so far here: https://jsfiddle.net/3nd0b17m/23/ https://i.sstati ...

css

Retrieving information from a server within several sections of a Flask application

Currently working on a project with Python using Flask and Jinja2, I am exploring ways to integrate a sidebar. Within the HTML pages, there is this snippet: {% include "sidebar.html" %} My objective for the sidebar file is to showcase a section highlight ...

pythonhtmlflaskjinja2sidebar

How can grid be used in CSS/HTML to create two collapsible columns that are side-by-side, maintain equal width, and keep their size when expanded?

Hello all, I'm new here and I have a question that I hope I can explain clearly. I am currently working on creating two collapsible "buttons" positioned side by side (each taking up half of the screen width), which expand when clicked to reveal an equ ...

htmlcsscss-grid

JavaScript tool for implementing sorting features on an HTML table

I am facing an issue with my AJAX-loaded table where I need sorting functionality implemented. Despite searching for various JavaScript plugins, none seem to work efficiently due to slow performance or errors. The structure of my HTML table is unique with ...

javascriptjqueryhtmlsorting

Immediate display of collapsed/toggle menu in a Bootstrap navbar

I have created a bootstrap responsive navigation menu that collapses into a box when the page is resized. It's a standard menu with bootstrap, but I'm facing an issue where the menu automatically appears when the page gets small instead of needin ...

htmlcsstwitter-bootstrapmenuresponsive-design

Is there a way to adjust the orientation of a <video> element without affecting the orientation of the video controls?

<video controls> </video> video { transform: scaleX(-1) } This CSS code flips the video horizontally, but it also flips the control buttons along with it. I attempted to flip the wrapper element containing the video using .wrapper {transfor ...

htmlcssvideo

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

I am trying to add a 'Read more' feature on my friend's website. I was able to achieve the desired effect, but when I tried to adjust the alignment of the box, it affected the 'Read more' feature. Original design: https://codepen. ...

javascripthtmljquerycssjquery-ui

Methods to prevent images from spilling over into divs?

I am looking to implement a unique functionality that involves three images sliding out of the page to the right, fading in the process, and not overflowing. Simultaneously, three other images slide in to take their place. If you want to see the Framework ...

htmlcssanimationoverflow

Spartacus 3.3 - Unleashing the Full Potential of the Default Sparta Storefront Theme

Looking for advice on how to customize the default Spartacus Storefront theme (Sparta) by only overriding specific CSS vars. Any suggestions? I tried following the instructions provided at: https://github.com/SAP/spartacus/blob/develop/projects/storefront ...

cssspartacus-storefront

Tips for creating a custom Menu with content overflow in a single direction

What is the goal of this task? I have developed a custom Menu in my application with 8 options. There is a need to dynamically disable certain menu options based on specific conditions (e.g. disabling the last 4 options). When a user hovers over a disable ...

javascripthtmlcssoverflow

Is there a way to prevent HTML Tidy from inserting newlines before closing tags?

Have you ever noticed how HTML Tidy always seems to add an extra newline before the closing tag? It's so frustrating! For instance: <p>Some text</p> ends up looking like this: <p>Some text </p> Is there a way to make Tidy k ...

htmltexttidytext-formattinghtmltidy

Replace particular letters within the text with designated spans

Suppose I have this specific HTML code snippet: <div class="answers"> He<b>y</b> <span class='doesntmatter'>eve</span>ryone </div> Additionally, imagine I possess the subsequent array: ['correct' ...

javascriptjqueryhtml

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

csstwitter-bootstraplayout

Is there a way to restrict the number of words displayed in React? Check out this code snippet: `<ProductImg imgtext={products.description}/>`

imgAlt={product.name} Note: Consider the product name as: HD Single Sided Cantilever Rack. In this case, only HD Single Sided... should be displayed Please find the code snippet below <ProductImg imgtext={products.description}/> ...

htmlreactjsimagefrontendcoding-style

Fixing Email Validation Error in AngularLearn how to troubleshoot and resolve

I'm encountering an issue when trying to develop an email center using regex pattern, as I'm receiving a validator error in HTML. I have already installed ngx-chips and angular-editor, imported all the necessary modules and dependencies. Here is ...

htmlangulartypescriptformsvalidation

Having trouble loading Yeoman Webapp SASS

Every time I try to build a web application using 'yo webapp', I encounter a 404 Error. GET http://localhost:9000/styles/main.css 404 (Not Found) I removed compass from the project, but that shouldn't be causing the issue, correct? ...

csssasshttp-status-code-404

What is the best way to implement a JavaScript pattern matching for both "aaaa" and "aaa aaa"?

Can anyone help me create a pattern that can accept both strings with spaces and without spaces in the same text box? I would appreciate any guidance on how to achieve this. Thanks! ...

javascripthtml

Tips for adjusting the border-bottom line in real-time as text is selected from a dropdown menu

$('#select').on('change', function() { name = $('#select :selected').val(); //some code here }); . bdr-txtline { border-bottom: 1px solid black; } <div class="container"> <div class="row"> <div ...

jqueryhtmltwitter-bootstrapcss