Enable the central bootstrap button to expand and occupy the entire width

Here is a code snippet that I have:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>test</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
          integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
          integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<div class="container>
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <button type="button" class="btn btn-default"><span class="fas fa-minus"></span></button>
            <button type="button" class="btn btn-default">text</button>
            <button type="button" class="btn btn-default"><span class="fas fa-plus"></span></button>
        </div>
    </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo""
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
            integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
            crossorigin="anonymous"></script>
    </html>

Is there a way to make the text button grow and fill only the available space?

I've attempted to use block buttons but they take up more space than necessary. Setting the width of the text button in percentage also didn't work as intended.

javascripthtmlcssbootstrap-4

Answer №1

Apply the following bootstrap classes to create a responsive layout for buttons: 

d-inline-flex w-100 justify-content-between
for the parent container of buttons and w-100 mx-2 for the text button.

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>test</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
          integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
          integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-12 d-inline-flex w-100 justify-content-between">
            <button type="button" class="btn btn-default" ><span class="fas fa-minus"></span></button>
            <button type="button" class="btn btn-default  w-100 mx-2">text</button>
            <button type="button" class="btn btn-default"><span class="fas fa-plus"></span></button>
        </div>
    </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
            integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
            crossorigin="anonymous"></script>
    </html>

Answer №2

To make your buttons fill the available area, wrap them in a class and display it as flex. Then, give your middle button a width of 100%.

Refer to the flexbox documentation for more information: https://www.w3schools.com/css/css3_flexbox.asp

.button-full {
    display: flex;
}
.btn-fill {
    width: 100%;
    margin: 0 5px;
}


.button-full {
    display: flex;
}
.button-full.all > button {
    width: 100%;
    margin: 0 2px;
}
.btn-fill {
    width: 100%;
    margin: 0 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>test</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
          integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
          integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
1 -
    <div class="row">
   
        <div class="col-md-6 col-sm-12 button-full">
            <button type="button" class="btn btn-default"><span class="fas fa-minus"></span></button>
            <button type="button" class="btn btn-default btn-fill">text</button>
            <button type="button" class="btn btn-default"><span class="fas fa-plus"></span></button>
        </div>
     </div>
    2 - .button-full .all
    <div class="row">
        <div class="col-md-6 col-sm-12 button-full all">
            <button type="button" class="btn btn-default"><span class="fas fa-minus"></span></button>
            <button type="button" class="btn btn-default">text</button>
            <button type="button" class="btn btn-default"><span class="fas fa-plus"></span></button>
        </div>
    </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
            integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
            crossorigin="anonymous"></script>
    </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

In Adobe XD, I can create shapes that appear blurry with crisp edges, but in real life

While working on my app design, I decided to use a shape blur filter in Adobe XD to create an app-bar-bottom, as shown below. Now I'm wondering if this design can be implemented for web or mobile development. I know that when using a blur filter in CS ...

androidcssuser-interface

What is the best way to add borders to table cells that have a non-zero value

I am trying to create a table using a function and it currently looks like this: table { border: 1px solid; } td { width: 30px; height: 30px; text-align: center; } <table> <tr> <td>2</td> <td>0</td> ...

htmlcsshtml-table

Exchange information among scripts in the background environment, such as the background script, browser action, page action, options page, and more

I am facing a challenge with transmitting data from my background script to the script for my pageAction. The content script I have adds an <iframe />, and the JavaScript within the <iframe /> successfully receives the data from the background ...

javascriptiframegoogle-chrome-extensionfirefox-addon-webextensions

Prevent double-click selection functionality

In my code, I have a CSS class called .noselect that disables text selection using various browser-specific properties. However, I am now looking to modify it so that the text can still be selected, but not when the user double-clicks on it. Is there a wa ...

cssangularjs

How can I showcase an image using Angular?

Recently, I've started working with Angular and I'm trying to display images using assets. I have a service that looks like this: const IMAGES = [ {"id":1, "category": "boats", "caption": "View from the boat", "url":"assets/img/boat_01.jpeg"}, ...

htmlangular

What is the best way to incorporate an icon into my HTML search bar?

I'm having trouble getting the search icon from font awesome to display properly within my search bar. Here is the code I'm using: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/> ...

htmlcssbootstrap-5

All-in-one Angular script and data housed within a single document

Context I want to design a personalized "dashboard" to assist me in staying organized. This dashboard will help me keep track of the issues I am currently handling, tasks I have delegated, emails awaiting response, and more. While I am aware of project ma ...

javascriptangularjslocal-storage

Is there a way for me to view the properties within the subcomponents?

Working on a project to create a bulletin board using React, following the official documentation. Decided to consolidate all actions related to the bulletin board into one alert component called AlertC. In the Form onSubmit statement, if the title is tr ...

javascriptreactjs

The items in the array cannot be identified

var userInput = prompt('Select a fruit:'); var fruitList = ["apple", 'grapes', "orange"]; for(var i=0; i<fruitList.length; i++); if(userInput == fruitList[i]){ alert("Apologies, we are currently out of ...

javascriptarraysfor-loopdomappendchild

Encountering issues with displaying images in React Next.js when utilizing dangerouslySetInnerHtml

While working on creating a simple WYSIWYG editor in nextjs, I encountered an issue with displaying uploaded images on the screen. When generating a blob URL for the image and using it as the src attribute of the image tag, it worked fine unless dangerousl ...

javascriptreactjsnext.js

checking the validity of serialized information in Ajax

I am facing a specific issue where I need to validate data before it is saved through an ajax call. When the user switches to a different URL, the save_ass_rub function is triggered. Within my application, there is a custom Window that allows users to inp ...

javascriptjqueryajaxprototypejs

Retrieving entities from a text

I found a script on the Webdriver.io website that looks like this (adjusted for testing) const { remote } = require('webdriverio'); var assert = require('assert'); ;(async () => { const browser = await multiremote({ ...

javascriptregex

Substituting a child instead of adding it to the table

I have a query regarding a button that dynamically adds rows to a table based on an array's data. My requirement is to append the first row, but for subsequent rows, I want them to replace the first row instead of being appended, ensuring that only on ...

javascriptphphtmlarraysjson

Using JavaScript to override a specifically declared CSS style

In the process of working with a database, I come across HTML that includes "spans" colored in different shades. An example would be: <div id="RelevantDiv">the industry's standard <span style="background-color: red">dummy text ever since ...

javascripthtmlcss

What is causing the modal to fail to open when the button is clicked?

My HTML includes a modal that isn't functioning correctly. <!doctype html> <html lang="en"> <head> <title>Rooms</title> <meta charset="utf-8"> <meta name="viewport" conte ...

htmlbootstrap-5

Expanding the StringConstructor in TypeScript results in a function that is not defined

I'm currently trying to enhance the String class in TypeScript 2.5 by adding a static method, which will be compiled to ES5. Here's what I have in StringExtensions.d.ts: declare interface StringConstructor { isNullOrEmpty(value: string | nu ...

javascriptgoogle-chrometypescript

Restrict magnification in THREE.js mousewheel interaction

Seeking advice on limiting zoom in and out of a model in three.js. I have explored trackball controls, but couldn't find a way to restrict zooming. I also experimented with orbit controls, but encountered issues when combined with trackball controls r ...

javascriptthree.jsmousewheelorbittrackball

I want to utilize a select drop-down menu for navigating between pages in my pagination, breaking away from the traditional method of using <a> tags

I have a select dropdown that is dynamically generated for navigation to other pages within the script. It lists the number of pages available for navigation. However, after selecting a page and loading it, the dropdown does not stay selected. I've tr ...

javascriptphphtmljquery

Syntax error: string unexpected, caught off guard

While attempting to create a drop-down menu, it functions properly in Firefox but fails to work in other web browsers. The error message that appears is as follows: jQuery(".parent").hover( function () { jQuery(this).toggleClass("activeli").(".paren ...

phpjavascriptjquerysyntax-error

"Utilize jQuery to interact with Gridview by clicking on the

I have a data table in ASP with a delete button, and my goal is to trigger a modal confirmation message when the button is clicked. Once the user confirms the action in the modal, I want to execute the C# backend code that would normally run if the modal w ...

javascriptc#jqueryasp.netgridview