Using Bootstrap 4: How to maximize the width of a span element placed near a label

I need to adjust the width of a span next to its label in my project.

My goal is to show multiple groups {label / data} on the same line. To achieve this, I divided the row into 4 columns and tried to set a specific width for a span. However, no matter what I do, the size does not change...

Here is the code snippet: 

<div class="row">   
    <div class="col-xl-4">
        <label class="">Batch ID : </label>
        <span class="border padding_right5 padding_left5 col-xl-3">4444</span>
    </div>    
    <div class="col-xl-4">
         <label class="">Etat : </label>
         **<span class="border border_etat_batch statut_green">En Cours</span>**
    </div>      
    <div class="col-xl-2">
        <label>Ligne : </label>
        <span class="border border_data">1</span>
    </div>  
    <div class="col-xl-2 text-right">
        <label>Cuve : </label>
        <span class="border border_data">B1</span>
    </div>                                                                                                                                                      
</div>

View Result

htmlcssbootstrap-4

Answer №1

In Bootstrap v4, the -xl classes are no longer available. The alternative is to use col-{num} for extra small devices or col-sm-{num} for small devices.

To fill the space of the span tag, you can utilize the flex-fill class from Bootstrap flex utilities. More information on this can be found here.

<div class="col-4 d-flex">
         <label class="">Etat : </label>
         **<span class="border border_etat_batch statut_green flex-fill">En Cours</span>**
    </div> 

.statut_green{
background:green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">   
    <div class="col-4">
        <label class="">Batch ID : </label>
        <span class="border padding_right5 padding_left5 col-3">4444</span>
    </div>    
    <div class="col-4 d-flex">
         <label class="">Etat : </label>
         **<span class="border border_etat_batch statut_green flex-fill">En Cours</span>**
    </div>      
    <div class="col-2">
        <label>Ligne : </label>
        <span class="border border_data">1</span>
    </div>  
    <div class="col-2 text-right">
        <label>Cuve : </label>
        <span class="border border_data">B1</span>
    </div>                                                                                                                                                      
</div>

Answer №2

Presenting the solution:

.col-filled {
  display: flex;
}

.d-inline {
  flex: 1 1 auto
}

.statut_green {
  background: green;
  flex: 1 1 auto
}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">   
    <div class="col-xl-4">
        <label class="">Batch ID : </label>
        <span class="border padding_right5 padding_left5 col-xl-3">4444</span>
    </div>    
    <div class="col-filled col-xl-4">
         <label class="">Etat : </label>
         **<span class="border border_etat_batch statut_green">En Cours</span>**
    </div>      
    <div class="col-filled col-xl-2">
        <label class='d-inline'>Ligne : </label>
        <span class="d-inline border border_data">1</span>
    </div>  
    <div class="col-xl-2 text-right">
        <label>Cuve : </label>
        <span class="border border_data">B1</span>
    </div>                                                                                                                                                      
</div>

Link

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 transferring data when clicking in Angular 5 from the parent component to the child component

I need assistance with passing data from a parent component to a child component in Angular 5. I want the child component to render as a separate page instead of within the parent's template. For example, let's say my child component is called & ...

angularhtmltypescript

Combine the bootstrap button and dropdown menu side by side and adjust the width of the dropdown to be

Snippet: <div class="d-grid gap-2 d-md-block mt-1"> <button class="btn btn-secondary" id="btnSearch"><i class="fa fa-search fa-fw"></i>Search</button> <button class="btn ...

htmlbootstrap-5

the slider HTML control is missing a value

Exploring the Range Input Type in HTML When adjusting the value on a slider (Range input type), that value is displayed in a textbox. However, making the same adjustment in the textbox does not update the slider's value. Below is the code snippet: & ...

javascripthtml

The functionality of the button is affected when it is placed on the same line as a h1 heading

My goal is to have the page title and profile button aligned on the same line in the header of each page. However, I've encountered an issue where the button doesn't function properly when placed on the same line but works fine when separated ont ...

javascripthtmlcssreactjsweb-applications

Removing page scrolling in Bootstrap 5: A step-by-step guide

I would like to ensure that only the card-body block is scrollable. Currently, the page does a bit of scrolling when the card-body block overflows (resulting in 2 scroll bars). The lorem text was added as an example of an overflow. The desired outcome is d ...

htmlcssbootstrap-5

Using jQuery and JSON data to dynamically populate a second dropdown menu with filtered options

I am working on a form with two drop-down menus and a text box. The first drop-down contains static values, while the second drop-down is populated dynamically from a JSON array. My goal is to filter the options in the second drop-down based on the selecti ...

javascriptjqueryhtmljson

Trouble displaying background image in Electron Application

When I try to load an image file in the same directory as my login.vue component (where the following code is located), it won't display: <div background="benjamin-child-17946.jpg" class="login" style="height:100%;"> A 404 error is popping up: ...

htmlcsswebpackvue.jselectron

What is the best method for resetting the CSS style of a specific DOM subtree?

While working on a Chrome Extension, I encountered a problem where an HTML subtree and CSS style sheet injected into the original page were being affected by the original CSS. Despite my attempts to override the styles, it seemed unfeasible to manually set ...

css

Linking a watcher property to control the opacity value of inline styles

Struggling to connect the opacity of a div with the value of a slider. <div class="container" v-bind:style="opacity">test content</div> Despite my efforts, I can't seem to make the binding work correctly. When I check in the developer to ...

javascripthtmlcssvue.js

Ensure the validation of multiple form fields in a single function

I've implemented code to validate a form field as you input values, changing the border color to red if invalid or green if valid: function FormValidation(){ var fn=document.getElementById("firstName").value; if(fn == ""){ document.ge ...

javascriptphphtmlforms

Ways to connect css file to ejs views in nodejs

Currently, I am tackling a beginner node.js server project. While I have successfully managed to render dynamic HTML using ejs templates, I seem to be facing difficulties when it comes to linking CSS styling to these templates. In an effort to address thi ...

cssnode.jsexpressejs

audio enhancement in a web-based game

I'm having trouble getting a sound effect to play consistently in my game whenever there is a hit. Sometimes the sound plays, other times it does not! Here is the code I am using: <script> var hitSound = new Audio(); function playEffectSound ...

javascripthtmlhtml5-audio

Selecting a "non-operational" collection location on an e-commerce platform

Recently I discovered a bug on an online shopping website. It seems that by using inspect element, it was possible to alter the HTML code and change an unavailable pickup point to available. This allowed me to place an order, make a payment, and even recei ...

javascripthtmlgoogle-chrome-devtoolsonline-store

The CSS slideshow is malfunctioning when displaying images retrieved from the database

I received a complimentary website layout to enhance my PHP skills. The website originally had slides on the index page, sourced directly from my computer when it was in index.html. However, now I have modified it to retrieve images from a database. Instea ...

phphtmlcssfunctionslide

Display a division upon clicking a button using AngularJS and HTML

Looking to implement a functionality in my HTML page using angularJS. I am currently learning angularJs and experimenting with a feature where clicking on a button will display a specific div (EmployeeInfoDiv) on the webpage. The idea is to fill out some t ...

htmlangularjs

Is there a way for me to detect if the user has manipulated the CSS or JavaScript in order to alter the look of my website?

Is there a way to determine if someone is utilizing script or CSS extension tools? For instance, if they have adjusted alignments, applied display: none; to multiple elements, or utilized jQuery's .hasClass to manipulate divs. ...

javascriptjquerycssgoogle-chrome-extension

Match the test choices with the corresponding `radio` buttons

Looking for help with my quiz application. How can I align text vertically with radio buttons? Take a look at the code here on Codepen. One issue I'm facing is the alignment of long label texts, particularly in questions 9, 12 & 14. I've tried va ...

javascriptjqueryhtmlcssjquery-ui

React hook dom and material-ui FormControlLabel are causing a checkbox input to return an empty string instead of the expected true/false value

I am currently working on displaying the values returned from a form, specifically focusing on the Checkbox section. <FormControlLabel control={<Checkbox {...register('remember')} name="remember" color="primary" defaultV ...

javascripthtmlreactjsmaterial-uireact-hook-form

Guide to designing a CSS gradient with a downward arrow linked to a specific container

I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly. If I use CSS to create the arrow, the gradient doesn't align correctly. ...

htmlcssvuetify.js

The detailView feature in wenzhixin bootstrap-table is failing to initialize the child row

I am currently utilizing the wenzhixin bootstrap table and attempting to initialize another bootstrap table within a child row known as 'detailView' in the code. Previously, I was using datatables but found this method to be simpler and more dir ...

jqueryhtmltwitter-bootstrapbootstrap-table