Utilizing the Bootstrap grid system to dynamically adjust column width based on specific conditions

When working with HTML and bootstrap (3.7) CSS, I often come across this issue:

<div class="row">
  <div class="col-xs-6">Stretch ME!</div>
  <div class="col-xs-6">Conditional</div>
</div>

Sometimes the "Conditional" div is present, sometimes it's not. The challenge is how to make the "Stretch ME!" div stretch to the width of the row even if the other div is not there. Is there a way to achieve this using bootstrap without having to conditionally rewrite the classes? Perhaps by using a class like 

class="col-xs-6 but-flex-me-if-over-blank-space"
.

P.S. Surprisingly, I have searched extensively but have not found a clear answer on this common dilemma.

csstwitter-bootstrapflexbox

Answer №1

.row {
  Utilizing display: flex;
  Size of 100%;
}
.row .col-xs-6:first-child {
    Applying flex-grow property with a value of 1;
}

The flex-grow attribute will occupy all available space.

For demonstration, visit https://jsfiddle.net/d8fb36w5/2/

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

splitting lengthy words into several lines

Does anyone know how to break words like the examples below using CSS or jQuery? SAMPLE 1 ConfigTechnologyHormonyAppComponentBackOfficeLaunch It needs to be broken into ConfigTechnologyHo rmonyAppComponentB ackOfficeLaunch SAMPLE 2 WorkAppComponentBa ...

jqueryhtmlcssword-break

What could be causing my Material UI Table to disappear when I toggle the "Show" option?

I am incorporating the Grow material ui component to display or hide a table. Initially, the table is visible. <Box className={classes.object_controls_wrapper}> <Box sx={{ display: "flex" }}> <Grow in={objectViewOpened ...

cssreactjsmaterial-uimaterial-table

Is it possible to generate an image from HTML using PHP?

Can anyone suggest a way to generate an image from pure HTML using PHP, possibly utilizing the GD library or other similar tools? I am looking to display icons from external sites and considering if creating an image would help improve load times. If not ...

phphtmlcssimagefile

React app (storybook) experiencing loading issues with @font-face

I am struggling to load custom fonts from a local directory. Can someone provide assistance? Below is the code I am currently using: @font-face { font-family: 'My Custom Font'; src: url('./fonts/MyCustomFont.eot'); src: url(&apo ...

javascriptcssreactjsfontsstorybook

How can I fix the alignment issue with my centered div?

My attempt to vertically align a centered inner DIV is not working as expected... What could be causing this issue? CSS Code: #page_bar { width: 100%; height: 30px; background-color: white } .page_bar { width: 800px; height: 30px; ...

htmlcssvertical-alignmentalignment

Can a JavaScript framework be created to ensure all browsers adhere to standards?

As someone who isn't an expert in JavaScript, I wonder if it's feasible to create a comprehensive embeddable JavaScript file that ensures all browsers adhere to standards. Could there be a compilation of known JavaScript hacks that compel each br ...

javascriptcssdomstandards

What is the method for changing the color of a specific section of a header?

My header design consists of two lists of buttons, one on the left and one on the right. I am looking to customize the background color of the "Sign Up" button to make it stand out. Below is an example of what I want and the current design of my header alo ...

htmlcssweb-deployment

Tips for avoiding table column overlap during window resizing situations

My current issue involves using a table to present information. While resizing the window, I noticed that the columns in the table were overlapping. Below is the code snippet: <table style="width:100%;table-layout:fixed"> <tr style="border-bo ...

htmlcss

Steps to display a div on top of a background image

Here is a visual representation of my design for better understanding: I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see ...

javascriptjqueryhtmlcss

it will still function properly regardless of the width being set to zero

Is anyone able to explain the strange phenomenon I am experiencing with this code snippet? In this particular example, I have set the width of selector h3 to 0. However, when viewing it in IE 9 using F12 development tools, I can see that the width is indee ...

htmlcss

Is there a way to lock the eye icon in place within the password field using Vue.js?

I added an eye icon to the right side of my password input fields. However, occasionally error messages may pop up on the page to signify issues with the input fields. When these error messages appear below the relevant input field, the position of the eye ...

cssvue.jsinput-field

Determine the width of a div by utilizing SASS and following a series of incremental steps

Let's discuss the current scenario: I have a parent div that consists of multiple child elements which vary in number. (2, 3, 4) The goal is to determine the appropriate width for each step element dynamically: For 2 steps: 50% For 3 steps: 33.3% ...

csssass

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

How can I prevent my ul.SideNav_Main li a:focus class from losing focus when I click on the iframe or elsewhere on the page? Shouldn't it maintain focus until I click on another URL in the list? Is it possible to solve this issue with just CSS, or wo ...

javascripthtmlcss

Experiment with altering the layout of certain navigation bars

I am currently attempting to customize the background color and text color for specific HTML components. Within my project, there are 3 navigation bars. I aim to establish a default color for all nav bars while also altering the specific color of one of t ...

htmlcss

How to properly align a form with a multi-lined label in HTML and CSS?

I'm looking to create a form label that spans multiple lines and align the inputs with the labels. The goal is for the "Releasse Date" label to display as: Release Date (YYYY-MM-DD): [input box] Here's how it currently looks: HTML Code: < ...

htmlcss

Troubleshooting Problem with Padding in ion-content for Ionic Angular

I am currently developing my inaugural Ionic application. The initial template I utilized was the rudimentary sidemenu layout. $ ionic start myApp sidemenu Afterwards, I crafted a straightforward page featuring a list which appears as follows... <ion ...

javascriptcssangularjsionic-framework

Issue with margins of sections when attempting to activate menu class while scrolling

My Objective: I want to create a website where the menu highlights the section that is currently being viewed as the user scrolls up and down. Progress So Far: I have successfully implemented a functioning menu that changes to "active" when the correspo ...

javascriptjqueryhtmlcss

Is it possible for me to convert the contents of a <div> into a rasterized image when printing?

I have been using jquery.printElement.js to print a custom calendar table that I created. The functionality inside a div is mostly working as expected, but I am facing some challenges with the CSS. Despite passing along all necessary .css files, my cells a ...

jqueryhtmlcssprintingrasterizing

implementing a sidebar menu using AngularJS

I am currently working with bootstrap and AngularJS to create a sidebar menu. Here is the code I have for it: <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-send"></span> Link</a& ...

htmlcssangularjstwitter-bootstraptwitter-bootstrap-3

Positioning the sDom in jQuery DataTables

Take a look at the image below: I want to adjust the position of the tableTools buttons (Copy, Excel, CSV) so that they appear aligned with the Search Box. I've experimented with different sDom parameters but haven't been successful. This is th ...

cssdatatablestabletools