`Flex alignment of columns in Bootstrap 4`

I'm feeling really lost here. I had everything figured out, but after refreshing the jsfiddle, the solution suddenly changed on me. I have a row with two columns in it, but for some reason, I can't get them to align properly on the same row. I attempted using "justify-content-around" but it doesn't seem to be working. Any help would be greatly appreciated.

<div class="container-fluid">
        <div class="d-flex flex-row justify-content-around my-flex-container">
            <div class="d-flex flex-column my-flex-container-column">
                <div class="flex-row my-flex-container">Row 1</div>
                <div class="flex-row my-flex-container">Row 2</div>
                <div class="flex-row my-flex-container">Row 3</div>
                <div class="flex-row my-flex-container">Row 4</div>
            </div>  
            <div class="d-flex flex-column my-flex-container-column">
                <div class="d-flex flex-row my-flex-container">
                    <div class="flex-column my-flex-container-column">
                        <div class="flex-row my-flex-container">Row 1</div>
                        <div class="flex-row my-flex-container">Row 2</div>
                    </div>
                </div>
                <div class="d-flex flex-row flex-1 my-flex-container">
                    <div class="my-auto">ROW 3</div>
                </div>

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

Take a look at the jsfiddle here

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Answer №1

To upgrade your Bootstrap version from Alpha to Beta release, kindly download it here.

  .my-flex-container {
    border: 2px solid green;
  }
   .my-flex-container-column {
    border: 2px solid green;
  }
  .flex-1{
    flex: 1;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="d-flex flex-row justify-content-around my-flex-container">
    <div class="d-flex flex-column my-flex-container-column">
      <div class="flex-row my-flex-container">Row 1</div>
      <div class="flex-row my-flex-container">Row 2</div>
      <div class="flex-row my-flex-container">Row 3</div>
      <div class="flex-row my-flex-container">Row 4</div>
    </div>  
    <div class="d-flex flex-column my-flex-container-column">
      <div class="d-flex flex-row my-flex-container">
        <div class="flex-column my-flex-container-column">
           <div class="flex-row my-flex-container">Row 1
           </div>
           <div class="flex-row my-flex-container">Row 2
           </div>
        </div>
      </div>
      <div class="d-flex flex-row flex-1 my-flex-container">
        <div class="my-auto">ROW 3</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

Arrangement of asymmetrical interactive forms

I am in need of creating a design featuring numerous non-rectangular shapes that are interactive and reveal an image when clicked. The concept is to transform an image of stained glass into a webpage where each pane can be clicked to unveil its colorful ve ...

javascripthtmlcsssvg

Encountered an issue with CSS rendering for PDF files on Gitbook

I was able to use my CSS to customize the design of my Gitbook website. However, I struggled with implementing CSS for the PDF version. When I applied the same CSS used for the website to the PDF, the results were not consistent. It seemed like the CS ...

htmlcssgitpdfgitbook

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...

jqueryhtmlcssslick.js

Animating column shifts in Bootstrap Grid: A step-by-step guide

I am currently working on a dynamic form that allows users to toggle and add additional forms based on their specific needs. One of the key features I am looking to incorporate is a smooth moving animation when new forms are added or removed. I want the fo ...

bootstrap-4css-transitions

Ensure that when a user clicks back on an image popup, the page stays in its current position

Is there a way to ensure that after closing a popup image, the browser returns to the same position where it was before? Currently, when I close the popup image, the page scrolls back to the top (as indicated by the red square in the example). However, I ...

htmlcss

Loading content with AJAX without having to refresh the page

I've been working on implementing a way to load content onto a page without needing to refresh it. While I was able to achieve this, I encountered a problem where the images and CSS files weren't loading properly. Below is the code I used: < ...

javascriptjqueryhtmlcssajax

What is the best way to layer multiple navigation menus on top of each other using z-index?

I'm facing a challenge trying to position or overlap two navigation menus in my project. The technologies I am using are Bootstrap, HTML, and CSS. It seems like I might need to utilize the z-index property, but I'm unsure about the exact impleme ...

htmlcssz-index

What's the reasoning behind incorporating a superscript esf in the Zap Chance typeface?

I'm working with a sample HTML file that includes the Zap Chance font. <!DOCTYPE html> <html> <head> <style> @font-face { font-family: myFirstFont; src: ...

htmlcssfontsfont-facetruetype

Create a specific part of a webpage that can be scrolled through

In a unique way, I have designed a page where the only way to navigate is by simply clicking. To achieve this, I have implemented the following custom CSS: body{ overflow:hidden; } However, I have encountered a problem where I am unable to scroll to ...

javascriptjqueryhtmlcss

Using Bootstrap and PDO for Pagination

Looking for guidance on implementing pagination with PDO in PHP Since I am unable to comment yet, I have decided to post a new question: I'm curious about how to indicate which button/link is currently active when utilizing the "ANSWER" on that ques ...

phppdobootstrap-4

Creating a responsive dropdown submenu with Bootstrap 4, utilizing HTML, CSS, and jQuery

My HTML code includes CSS, jQuery Bootstrap 4 elements. I am attempting to add a dropdown submenu to my main menu when hovering over it. However, I am facing issues in getting the dropdown submenu to work properly. When I hover over main menu items like Co ...

javascriptjqueryhtmlcssbootstrap-4

Exploring the resolution of unit test for an Angular Bootstrap modal using the John Papa ViewModel style

A custom ModalService has been created to display two different types of dialogs, CancelDialog and ErrorDialog, based on the parameter passed to the service. For example, the following code will show an ErrorDialog: ModalService.openModal('Analysis ...

javascriptangularjstwitter-bootstrapunit-testingjasmine

Choose a radio button with a dynamic value in Selenium

How can I automatically select the radio button below with a changing value attribute? HTML: <form name="ViewQueryForm" method="post" action="/equery/getAttachments.do"> <div class="txt_align_left innerdvcont&q ...

pythoncssseleniumselenium-webdriverelement

An interesting quirk within CSS is that when a field is hidden, it can

I am currently developing a Chrome extension to modify certain text fields, but I have run into an issue. Specifically, I need to hide the "Stato" field so I implemented the following CSS code: https://i.stack.imgur.com/9blvz.png https://i.stack.imgur. ...

cssgoogle-chrome-extension

What is the best way to remove horizontal scrolling and reduce element size on mobile devices?

My current project is utilizing the Material-ui framework, and I have a situation where numerous anchor elements are being displayed as a table within a Paper component from mui. However, due to the length of this table, it causes a horizontal scroll bar t ...

cssreactjsmaterial-designmaterial-ui

When I implement inline CSS, everything works smoothly. However, when I try to use the same styles in an external

I am facing an issue with CSS. I have created an HTML page and added some padding and margin properties using inline CSS, which is working fine. However, when I try to add the same properties in my external CSS file, they are not taking effect. Here is my ...

htmlcss

Styling X and Y axis font color in charts using JavaFX 2.x CSS

Is there a way to change the font color of both X and Y axes? In my search through the css reference for fonts, I only found properties like font-size, font-style, and font-weight. font-size, font-style and font-weight I attempted to use -fx-font-color ...

cssfonts

What is the process for implementing a CSS theme switch in a CHM file and ensuring that it remains persistent?

Welcome to my tech world Greetings! I am a tech writer with a side interest in scripting JavaScript/jQuery for our help file (CHM file). While I consider myself a beginner in JS scripting, I have ventured into the realm of dynamic theme swapping within CH ...

javascriptcsscookiesthemeschm

Adjust the mouse scrollbar and correct the vertical scrollbar in Codemirror 3.23 when switching the direction to rtl

Is there a way to dynamically change the text direction based on the language being used? I encountered an issue when switching from LTR to RTL where two vertical scrollbars appear in the textarea of codemirror. Removing the overflow-y: scroll property cau ...

javascriptjquerycss

The font size of the textarea dynamically adjusts based on the size of the screen

Some strange behavior is occurring in the Android default browser when I set the width and height of a textarea to 100%. The font size of the textarea seems to increase based on the screen size, and even though I attempted to alert the font-size using jQue ...

javascriptjquerycsstextarea