Does the Bootstrap 4 flex system allow for arranging self-row items within a parent column?

Displayed below is the navbar code snippet:

<div class="d-flex flex-column flex-lg-row">
   ......
</div>

As shown in the example:

.bd-highlight {
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.15);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column flex-lg-row justify-content-between bd-highlight">
  <div class="p-2 bd-highlight order-0">Flex item 1 (LOGO)</div>
  <div class="p-2 bd-highlight order-2 order-lg-1">Flex item 2 (Nav. Menu)</div>
  <div class="p-2 bd-highlight order-1 order-lg-2">Flex item 3 (Search Form)</div>
  <div class="p-2 bd-highlight order-3">Flex item 4 (Acc. Menu)</div>
</div>

The design requirements also include specific cases described below:

1- Media device ( ≥ 992px ): all displayed side by side.

https://i.sstatic.net/TOby5.png

2- Media device ( < 992px ): all displayed underneath. However, Flex item 2 and Flex item 3 are repositioned using the order-* class. -Refer to the snippet and image above.- Following that, the goal is to align Flex item 1 - Flex item 3 and Flex item 2 - Flex item 4 side by side in rows.

https://i.sstatic.net/Cuzht.png

While everything else is functioning as intended, achieving the alignment of Flex item 1 - Flex item 3 and Flex item 2 - Flex item 4 side by side specifically through self-alignment proves to be a challenge due to the parent container being in a column layout and the inability to add additional parent elements without affecting their positioning.

AS SHOWN BELOW:

https://i.sstatic.net/eKxEL.png

Does Bootstrap 4 or flexbox provide support for this alignment requirement? Is it feasible within these frameworks, or should alternative solutions be explored?

For instance:

<div class="flex-column">
    <div class="flex-self-row1"></div>
    <div class="flex-self-row1"></div>
    <div class="flex-self-row2"></div>
    <div class="flex-self-row2"></div>
</div>
twitter-bootstrapcssflexboxbootstrap-4

Answer №1

If you prefer to maintain the parent as a flex-column, achieving the desired layout for media devices smaller than 992px can be tricky. One approach is to group Flex item 1 and 3 as a row, and Flex item 2 and 4 as another row, or duplicate these items and show/hide them based on media queries.

Alternatively, you can display the parent as a flex-row, allow it to wrap, and set the width of each flex item to 50%.

To keep the HTML clean, Bootstrap's width utility classes with responsive variations might not be suitable. In this case, I modified the HTML layout by adding custom classes .parent and .item and styling them with custom CSS.

HTML

<div class="d-flex bd-highlight parent">
    <div class="p-2 bd-highlight order-0 item">
        Flex item 1 (LOGO)
    </div>
    <div class="p-2 bd-highlight order-2 order-lg-1 item">
        Flex item 2 (Nav. Menu)
    </div>
    <div class="p-2 bd-highlight order-1 order-lg-2 item">
        Flex item 3 (Search Form)
    </div>
    <div class="p-2 bd-highlight order-3 item">
        Flex item 4 (Acc. Menu)
    </div>
</div>

Media device < 992px

.parent {
    flex-flow: row wrap;
}

.parent .item {
    width: 50%;
}

https://i.sstatic.net/ftlJU.png

Media device >= 992px

@media (min-width: 992px) {
    .parent {
        justify-content: space-between;
    }

    .parent .item {
        width: auto;
    }
}

https://i.sstatic.net/luzi3.png

fiddle: http://jsfiddle.net/aq9Laaew/273412/

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

Arrange the divs alongside one another within a container and ensure that the container adjusts its width to fit the children

I am in need of a container div: This div should adjust its width based on the content within. I would like the child elements to align horizontally. The container itself should form a single horizontal line. I prefer not to use flex because it tends to ...

cssreactjs

Multi-select buttons using Bootstrap

Before, I used standard check-boxes, but now I am looking to switch to using bootstrap Multiple select boxes. However, when I implement the new code, I am unable to see any rows in my drop down. New code snippet: <li> <select href="#" class="se ...

c#htmltwitter-bootstraprazor

Challenges with cascading style sheets and the integration of PHP's include function

I am currently working on a PHP website project. I have implemented the include function in my main page to include other files, but I am facing an issue with the CSS when loading the main page. The CSS in the included files seems to be all messed up, maki ...

phphtmlcss

Issue with multi-level bootstrap navbar: Unable to hover on child elements

Currently, I am working on implementing a multi-level navbar in my project using Bootstrap Navbar along with additional CSS and Jquery. If you want to review the codes, they can be found at: CodePen $(function() { // ------------------------------- ...

javascripthtmlcssbootstrap-4navbar

Is there a method to individually collapse each div?

Each question in the database has a corresponding button. When one of these buttons is clicked, only the answer to that specific question should be displayed. However, the issue currently is that clicking on any button reveals all the answers simultaneousl ...

htmlspringbootstrap-4freemarker

Achieving CSS transition effects using the .appendChild function in JavaScript

When using the mouseenter event, I have a JavaScript function applied to an svg path element: const fadeIn = (event, locale) => { event.target.style.fill = 'hwb(' + (120 - score[locale] * 1.2) + ' 0% 0% / 1)' } This function wor ...

javascriptcssvue.jssvgvuejs3

Place the division at the bottom of the screen

I'm facing an issue where I am trying to place a div at the bottom of the viewport but it's not working as expected. Here is how my current setup looks like: html <div class="parent"> <div class="bottom"> </div> </div&g ...

jqueryhtmlcss

The website is unresponsive and fails to adapt to mobile screen sizes

For practice, I designed this layout that is not responsive to mobile screens. The text is supposed to be below the image, but it is not adjusting as expected. To make it responsive, I used Bootstrap, but it seems to not be working properly. Below is the ...

htmltwitter-bootstrapbootstrap-5

Determine the total number of instances an HTML div element is utilized within a PHP script

Having conducted interviews with over 40 individuals, I'm looking to showcase this with a PHP script. Each interview comes with its own set of CSS classes, and adding an extra class or utilizing an existing one can help me determine the total number ...

phpcsshtml

Is there a way to remove the initial number entered on a calculator's display in order to prevent the second number from being added onto the first one?

I am currently in the process of developing a calculator using HTML, CSS, and JavaScript. However, I have encountered an issue with my code. After a user inputs a number and then clicks on an operator, the operator remains highlighted until the user inputs ...

javascripthtmlcssfrontendcalculator

Achieving a Pushing Footer Design with Content

Hey guys, I'm working on a website and I'm having some trouble with the footer. It's sticking to the bottom of the page, but the content is overflowing it. Check out this screenshot for reference: . Here is my HTML/CSS code for the footer: ...

htmlcssfooter

Learning HTML and CSS integration through Codecademy is a fundamental part of the course

After following the instructions from an old HTML and CSS introduction on , I successfully created my first website. However, the code works perfectly on a special constructor page, but once I try to view it on a browser, the HTML and CSS don't seem t ...

htmlcss

What is the reason for parent rows not stretching fully across the width of the page?

I am working on creating a simple table in Vue.js with Bootstrap. When the arrow is clicked, the child row is displayed, and I want it to appear below the parent row. I achieved this by setting display:flexbox; flex-direction:column; Here is the HTML tabl ...

cssvue.jsbootstrap-5

Design a Hover Mega Menu - click outside to close

Although there are similar topics on stackoverflow, the code I have is different from them. I am trying to achieve the following: If I click on the search box (the white square on the site), my search box should open If I open the search box and then cl ...

jquerycss

Showing information from a table for editing purposes with the use of HTML input tags

As I navigate my way through the complexities of HTML and PHP coding, I’m faced with a challenge in displaying database content on an editable table within my web page. Clicking the edit button should lead to a separate page where data can be modified. ...

javascriptphphtmlcss

Tips for making your inner content as wide as possible

I'm currently working on developing collapsible tables, where an outer and inner table are displayed for every row that is clicked. This is the code I have implemented: HTML: <table class="table outerTbl mb-0"> <thead> <t ...

htmlcssbootstrap-4

JavaScript error leading to ERR_ABORTED message showing up in the console

When I try to load my HTML page, my JavaScript code keeps throwing an error in the console. I am attempting to import some JavaScript code into VSCode using an app module for future reuse. The code is being run through a local server. Error Message: GET ...

javascripthtmlcssjson

Notification with jQuery

I am looking to display an alert message when val = -1. However, the issue I am facing is that this message always appears at the bottom of the page regardless of the value of val. if ($val == -1) echo ' <script> $( ...

phpjquerycsshtml

Styling for the bootstrap dropdown menu is missing

While attempting to incorporate a bootstrap dropdown menu, I noticed that despite applying the appropriate class to the sublist, the formatting and padding that is typically associated with bootstrap are not being retained. My current setup involves using ...

htmltwitter-bootstraptwitter-bootstrap-4

Center Items in Flexbox, Implementing React Material with React

In my React App, I am utilizing flexbox and React Material to align the searchbar and clear button on the same line with space between them. Here is the link for reference: CLICK HERE <div className={classes.searchBarSection}> <Paper com ...

cssreactjsmaterial-uiflexboxmaterial-design