Bootstrap is having issues with its responsive flex grow and shrink functionality

Currently experimenting with the responsiveness of flex and shrink in Bootstrap. Here's the code I'm working with, but for some reason, nothing is responding as expected. Tried using different breakpoints like lg/md/sm without success. Any help or guidance would be greatly appreciated.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77e5e8e8f3e4e3e5f6c6a3b8a7b8a5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="app.css">

  <title>Practice </title>
</head>

<body>
  <div class="container-fluid">
    <div class="row bd-highlight">
      <div class="col border border-2 flex-md-shrink-1">Flex item 1</div>
      <div class="col border border-2 flex-md-shrink-0">Flex item 2</div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86f4f9f9e2f5f2f4e7d7b2a9b6a9b4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

cssflexboxbootstrap-5

Answer №1

Given that the .col has a property of flex: 1 0 0%, it means that columns will grow but won't shrink. Therefore, the test you conducted doesn't actually override the behavior of .col. To change this, you could modify the flex-grow property to counteract the default behavior of .col.

<div class="container-fluid">
    <div class="row">
        <div class="col border border-2 flex-md-shrink-1 flex-md-grow-1">Flex item 1</div>
        <div class="col border border-2 flex-md-shrink-0 flex-md-grow-0">Flex item 2</div>
    </div>
</div>

Answer №2

Utilize d-flex exclusively without blending it with bootstrap's grid system (.col and .row)

Check out the revised example below:

<!doctype html>
<html lang="en>


<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0859e819e83">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="app.css">

  <title>Practice </title>

  <style>
    .item-container {
      width: 100%;
    }
    
    .item {
      flex-basis: 100%;
      flex-shrink: 200px;
    }
    
    .item-shrink {
      flex-shrink: 3;
    }
  </style>
</head>

<body>

  <div class="item-container d-flex bd-highlight">
    <div class="item item-shrink border border-2">Flex item 1</div>
    <div class="item border border-2">Flex item 2</div>
  </div>


  <!-- Optional JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d829d80">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

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

Tips for aligning buttons in the center of a card both vertically and horizontally

I am currently utilizing the following bootstrap template to develop a Help Desk Ticket App: After the user logs in on the index page, there are two cards available for the user to choose between heading to the app's dashboard or creating a ticket. I ...

htmlcssbootstrap-4centering

Select every p element that comes after an h2 tag using CSS

Is there a way to select all paragraph elements that come after a specific heading? <h2 class = 'history'>History</h2> <p>this is paragraph 1</p> <p>this is paragraph 2</p> <p>this is paragraph 3</p&g ...

htmlcsscss-selectors

When elements are passed through components in Next.js, their style does not get applied

I have a unique component for the hero section of every page with varying content and heights. export default function CustomHero({ height, children, }: { height: string; children: ReactNode; }) { return ( <div className={`flex flex- ...

cssreactjsnext.jscomponentstailwind-css

Which CSS property is utilized to position the parent level of a menu below the children when they are shown on the screen?

Recently, my Drupal superfish menu has been acting up after updating the module. The issue I encountered was that the children no longer appear above their parent items. Can anyone help me figure out which setting dictates the order in which they are dis ...

css

The feature of Google street view is not supported within the tabs on WordPress

I'm experiencing some issues with displaying Google maps and street view using the Wp Google Map WordPress plugin within tabs. The map displays perfectly on the first tab where I placed the short code for the map, but on the second tab where I placed ...

javascriptcsswordpressgoogle-mapsgoogle-maps-api-3

Issues with centering background-position while using clip-path functionality

Struggling to center a background image? I initially suspected conflicting CSS rules, so I created a simplified demo to troubleshoot. After reviewing examples on SO and beyond, it seems like my approach is correct. Can anyone help identify what I might be ...

htmlcss

Bing Map API Version 7 Doesn't Show up on Screen

I am facing an issue with displaying the Bing map code on a website built using HTML5, CSS3, and jQuery. I am utilizing the SDK AJAX v.7 to generate the code. The problem arises when I attempt to insert the code provided (along with my personal key) and c ...

javascriptjqueryhtmlcssbing-maps

Struggling to align the Bootstrap list-group container in the middle

Good day to you! I'm currently working on a sidebar layout using Bootstrap's list-group and I need to set a specific width to ensure it aligns properly with the other elements above and below it. However, when I try setting the width to 300px, t ...

htmlcsstwitter-bootstrapbootstrap-4

The Content Finds Complete Coverage in the Absolute Footer

After setting up a position absolute footer, I noticed it starts covering the content whenever more content is added. I would like the footer to always stay at the bottom of the page, even if there isn't enough content to push it down Check ou ...

htmlcsscss-positionfooterabsolute

Can an image map area be identified using radial coordinates?

While I have experience with online Imagemap Generators for rectangular or circular areas in HTML pages, things get a bit tricky when dealing with pie-shaped sections. When trying to make each pie slice a separate area, the image map code generated by thes ...

javascripthtmlcsshighcharts

Issue with opacity transitions in Chrome on React application

I am currently developing a pomodoro clock using React. My goal is to have the message text (e.g. "Set a time", "Focus," etc.) and the play/reset button fade out and in when the play/reset button is pressed. So, when the play button is clicked, "Set a time ...

htmlcssreactjs

Tips for adjusting the number of columns in a list display using CSS

Recently, I decided to delve into the world of CSS and Bootstrap. I came across an interesting example that I'm trying to implement in my project. You can find the example here. Here's the HTML code snippet: <div class="container"&g ...

htmlcssbootstrap-4

"Glowing orbs in the night: a dark mode spectacle with

I have implemented a night mode (or perhaps dark mode) toggle button located at the top-right corner of my webpage. Here is a link to a perfect example showcasing what I am aiming for However, unlike the provided link, I switch between night mode and lig ...

javascripthtmlcsskeyframe

Guide on serving a static HTML file along with CSS styling

After meticulously crafting a static HTML Report embellished with stylish CSS, I intend to upload this report onto the server. Next, the HTML file will be transferred to S3 where a specialized service would promptly deliver the file directly to users' ...

htmlcss

Customizing Material UI tooltip styles with inline CSS formatting

Currently in the process of creating a React component that utilizes the Material UI Tooltip feature. In my component, I have the need to manually reposition the Mui Tooltip by targeting the root popper element (MuiTooltip-popper). However, the Mui Toolti ...

javascriptcssreactjsmaterial-ui

Concluding a row in PHP Bootstrap for various grid dimensions

My grid layout for displaying a list of users now includes the classes col-xs-4 col-sm-4 col-md-3 col-lg-2. In the past, I only used col-md-2 and relied on a $counter to manage the row layout: while ($row = $business_query->fetch_assoc()){ ...

phphtmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to transform URL images on a webpage into media library images in WordPress?

Having trouble converting HTML Static Sites to WordPress because images are hosted through HTML SRC Code. After conversion, no one can see the images in visual format on pages during editing. Is there a way to convert all image links inside pages to media ...

phphtmlcsswordpress

Real-time update of quiz results based on varying factors

In my quiz, I have set up variables that start at 0 and increase based on certain conditions. One variable should increase when a question is answered correctly, while the other should increase when a question is answered incorrectly. If you answer a quest ...

javascriptjqueryhtmlcss

Troubleshooting issue with Jquery animation from left to right

What's the issue with this code? It is supposed to animate the arrow from left to right and then back to left again repeatedly, but it's not working as expected. Any ideas on why that might be? function moveRight(){ $('#myIcon'). ...

javascriptjqueryhtmlcss

Fixed positioning of a div causes it to move further away when zooming out

Greetings to all! I am looking to achieve a scrolling effect for a div area as I scroll down the page. To accomplish this, I have utilized the CSS property position:fixed to lock the div area within another div called "page". Below is the corresponding CSS ...

javascripthtmlcss