Is it possible to have the smaller column in a flex column layout display full-width when it is wrapped alongside a bigger column?

I am currently using Bootstrap 4 and have a flex layout set up like this:

.larger {
  background: blue;
}

.smaller {
  background: red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabfa4bba4b9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col larger"> larger column </div>
  <div class="col-3 smaller"> smaller column </div>
</div>

As I resize the window to a very small width, the second column is displayed in a new line on its own. While this is acceptable, the issue arises when it only occupies a fraction of the line's width. This behavior is less than desirable. When there is a line break, I would prefer for the divs to fill the available size. How can achieve this?

cssbootstrap-4flexbox

Answer №1

There is flexibility in the layout design, you don't have to stick to the row/col system:

div {
  outline:1px solid red
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45272a2a31363137243505716b">[email protected]</a>/dist/css/bootstrap.min.css">
<div class="d-flex flex-wrap">
  <div class="w-75 flex-grow-1"> larger column </div>
  <div class="flex-fill"> smaller column </div>
</div>

Answer №2

Feel free to utilize the following code snippet

<div class="row">
  <div class="col"> big column </div>
  <div class="col-12 col-md-3"> small column </div>
</div>

.col-md-3 occupies one third of the screen on larger devices, while it remains unchanged on smaller screens.

Answer №3

By incorporating a css tag, here is an alternative solution using pure CSS:

.container{
  display: flex;
  flex-wrap: wrap;
}

.larger {
  background: blue;
  flex: 1;
  width: 100%;
  min-width: 75%;
}

.smaller {
  background: red;
  flex: 1;
}
<div class="container">
  <div class="larger"> larger column </div>
  <div class="smaller"> smaller column </div>
</div>

This approach utilizes flexbox, specifically leveraging flex-wrap for wrapping and flex-grow to expand based on available space. The larger column is set to occupy 3/4 of the row using min-width. To delve deeper into understanding flexbox and its functionality, you can explore more about it here.

Answer №4

Check out the grid options.

A single row consists of 12 columns. For example, if you want the second element to occupy 3 columns on screens larger than ~576px, but all 12 columns on smaller screens, you can use the classes col-12 col-sm-3.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67677c7b7b7c79ad9e6f8d9e6369787865">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col"> wider column </div>
  <div class="col-12 col-sm-3"> narrower column </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

Guide to adjusting the position of a dropdown menu within a navigation bar

ANSWER BELOW HTML: <div class = "navbar"> <a href = "index.php">NON-HOVER</a> <div class="dropdown"> <a href = "index.php">HOVER</a> <div class="dropdown-c ...

htmlcssnavbardropdown

Tips for aligning the dialog box in the center of the screen based on the current scroll position

Is there a way to center the dialog box vertically at the current scroll position of the window when any of the "show dialog" buttons are clicked? For instance, if I click on location 3, I want the dialog box to be centered vertically within the current v ...

javascripthtmlcssmodal-dialogcenter

Activate the Navbar by clicking on the bar and change the color of the icon

Is it possible to change the background color and icon color when clicking on the bar (active bar)? If not, is there an option to switch the icon with a different color? I've tried modifying my code but haven't seen any changes. Instead of using ...

javascriptphphtmlcssbootstrap-4

Error: Uncaught TypeError - The function indexOf is not defined for e.target.className at the mouseup event in HTMLDocument (translator.js:433) within the angular

Upon clicking on an SVG to edit my data in a modal bootstrap, I encountered the following error: Uncaught TypeError: e.target.className.indexOf is not a function at HTMLDocument.mouseup (translator.js:433) This is my SVG code: <svg data-dismiss ...

htmlcssangulartypescript

Creating a banner using four grid elements, with each element containing four child elements, is a simple process that can

Can you assist me in recreating my idea from an image? I am having trouble understanding how to select and place other elements, and then return them to their original positions after deselecting... I attempted to use a grid but it did not work properly. ...

javascripthtmlcssgrid

Angular 6: Customizing the title of ngBootstrap accordion panel based on its state of collapse

Is there a way to customize the titles of panels within an accordion created with ngBootstrap? I noticed NgbPanel has a property called isOpen, but I'm uncertain how to access its value. Can anyone provide guidance on this? ...

angularbootstrap-4ng-bootstrap

What could be the reason for the css problems being caused by my flash banner?

My flash banner ad is being displayed on a website as an advertisement at the bottom of the page. Whenever the banner ad is shown, the scroll bar disappears. The following CSS code appears when the flash banner is active: body {margin: 0; padding: 0; over ...

htmlcssflash

What is the best way to position a container div over another container using Bootstrap or CSS?

https://i.sstatic.net/q1qGi.png I'm working on a Bootstrap 4 layout where container B needs to overlay part of container A. I want to achieve a design where container B appears on top of container A. Any suggestions or references on how to achieve th ...

javascripthtmlcssbootstrap-4

Customize the appearance of all QProgressBars using Qt stylesheets in your C++ program

Struggling to figure out how to dynamically apply a stylesheet to multiple or all widgets in Qt Creator 4.1 (Qt 5.7) using C++. For instance, if I have 3 progress bar widgets, currently I am setting the same stylesheet for each one individually with CSS: ...

c++cssqtqstylesheet

Show image details on hover?

I have six images displayed full width using a flex grid. I would like the image information (along with a visit button) to appear on hover, and the brightness of the image should decrease. I am struggling to position the information in the center of the i ...

htmlcss

Having trouble with jQuery UI draggable when using jQueryUI version 1.12.1?

Currently, I am diving into the world of jQuery UI. However, I am facing an issue with dragging the boxes that I have created using a combination of HTML and CSS. My setup includes HTML5 and CSS3 alongside jQuery version 1.12.1. Any suggestions or help wou ...

javascriptjqueryhtmlcssjquery-ui

When hovering over a select element within a grid-area that has overflow set to scroll, Safari unexpectedly jumps to the

Encountering a strange issue that I can't seem to figure out. When testing the code in Safari, hovering over the select field causes the .page div to scroll to the top. This behavior only occurs when .page is within a grid layout and there's a s ...

htmlcsssafaripseudo-class

Buttons failing to adjust the color of the background and text

There seems to be an issue with this piece of code. I can't quite put my finger on it, but something is definitely off. I am trying to make it so that when a button is clicked, the background color and text font changes. Unfortunately, this is not wo ...

javascriptjqueryhtmlcssangularjs

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

javascriptjqueryhtmlcss

What is the best way to pinpoint particular text within a paragraph that includes numerous line breaks?

So here is the puzzling situation I'm grappling with. Here's a peek at the HTML snippet: <p>This paragraph has <br><br> two unusual line breaks <br><br> and it happens TWICE!</p> The problem arises when tryi ...

htmlcsscss-selectorsline-breaks

Setting a card to the center within a col-md in Bootstrap 4: Step-by-step guide

I'm looking to position this card in the middle, not centered. How can I achieve that? I've already attempted using my-auto, but it didn't work at all. Please take a look at my code and suggest any necessary changes. Thank you! https://i.s ...

htmlcsstwitter-bootstrapbootstrap-4

Achieving consistent radiobutton width across various column widths

Struggling to match the size of the radio button area (input-group-addon) in col-sm-4 and col-sm-6 columns? Considering using min-width to achieve a consistent width but finding no success? Seeking uniform width for radio button controls? Check out this vi ...

htmlcsstwitter-bootstrap-3

Tips for utilizing flexbox to position a button to the right of an InputSelect

Struggling to position a button next to a dropdown? No matter what I attempt, the button keeps ending up above the dropdown. Ideally, I'd like it to appear alongside 'Select Organisation' as shown in the image below: https://i.sstatic.net/w ...

c#css.netflexboxblazor

How to position menu on the right side using bootstrap

Hello everyone, as a newbie I have been struggling to align my navigation menu to the right while keeping the logo on the left side. I have tried multiple approaches without success. Currently, I am working with Bootstrap 4.7 and using the navbar code in ...

htmlcssbootstrap-4

Utilizing dual <legend> elements within a fieldset

I am attempting to include two legends within a fieldset. The first legend consists of an image in the center of the fieldset, while the other legend should be another image aligned to the very right side of the fieldset. The code snippet below demonstrate ...

htmlcsscss-position