Using Bootstrap 4 to create columns with fixed width and displaying the rest of the line in the card-footer

I have a bootstrap-4 card containing a footer. The footer consists of a fixed-width input field and a button. The button needs to expand to the width of 100% minus the width of the input field.

https://jsfiddle.net/aq9Laaew/224543/

input {
  width:3rem;
}

<div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">The input field has a fixed width, the button should fill the rest of the line.</p>
    </div>
    <div class="card-footer">
      <input type="text" value="1" />
      <button>
        Rest of width
      </button>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">The input field has a fixed width, the button should fill the rest of the line.</p>
    </div>
    <div class="card-footer">
      <div class="col-auto">
        <input type="text" value="1" />      
      </div>
      <div class="col-12">
        <button>
          Rest of width
        </button>
      </div>
  </div>
</div>

What is the solution to achieve this? I attempted using col-auto as shown in the fiddle, but it caused the input+button line to break into two lines.

cssflexboxbootstrap-4

Answer №1

If you want to adjust the width of an element in CSS, you can use the property 

width: calc(100% - "width_your_button");

Alternatively, you can achieve a similar layout using Bootstrap:

<div class="card-footer">
      <div class=" col-sm-2 col-xs-2 col-md-2 col-lg-2">
        <input type="text" value="1" />      
      </div>
      <div class=" col-sm-10 col-xs-10 col-md-10 col-lg-10">
        <button>
          Rest of width
        </button>
      </div>
  </div>

Answer №2

To resolve the issue, start by adding the d-flex class to the card-footer to make it a flex container. Additionally, apply the following CSS:

.card-footer button { flex: 1 }

With the flex: 1 property, the button will expand to take up the remaining space.

input {
  width:3rem;
}

button {
  flex: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 
 
 <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer d-flex">
      <input type="text" value="1" />
      <button>
        Rest of width
      </button>
    </div>
  </div>

Answer №3

  • It's recommended to utilize bootstrap columns for this task. (bootstrap 4)
  • Another option is to make use of the css calc() property. See the example below.

/*CSS for Example 1*/
.ex-1 input {
  float: left;
  width: 3rem;
}

.ex-1 button {
  display: block;
  float: left;
  width: calc( 100% - 3rem);
}
<!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">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
   
  <!-- Example 1 -->
  <div class="card ex-1">
    <div class="card-body">
      <h5 class="card-title">Exxample 1</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <input type="text" value="1" />
      <button>
        Rest of width
      </button>
    </div>
  </div>
  
  <!-- Example 2 -->
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Example 2</h5>
      <p class="card-text">The input field has a fixed width, the button should fill-in the rest of the line.</p>
    </div>
    <div class="card-footer">
      <div class="row">
        <div class="col-2 pr-0">
          <input type="text" class="form-control" value="1">
        </div>
        <div class="col-10 pl-0">
          <button class="p-1 w-100">Rest of width</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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

The background image will not repeat to completely cover the height

Click here to view my issue. I have set the background image to repeat the entire height, but it's not behaving as expected. Here is my CSS #wrapper { margin: 0px; padding: 0px; background: url(img02.jpg) repeat-x left top; } I attempt ...

htmlcss

What could be causing my line-clamp to malfunction when using a fixed height in the Safari browser?

I have a problem with the design of my episode list on mobile devices. The list has a fixed height, and I am using the line-clamp-2 property for the episode titles that exceed two lines. While everything looks fine on my PC and even when using Dev Tools t ...

cssiossafaritailwind-css

With jQuery fadeout, hyperlinks remain visible even after being clicked on

<a target="_blank" href="https://example.com"> <img class="bcvc_ad1" src="http://bdeas.com/wp-content/uploads/2015/08/ad1.jpg" alt="ad1" width="80" height="80" /> & ...

jqueryhtmlcss

justify-content property seems to be ineffective when used in Chakra UI

Currently in the process of developing a website using Next.js and Chakra-ui. I'm facing some issues with aligning the ButtonGroup to the end of the container. Despite trying to use justifyContent="space-between", it doesn't seem to be ...

reactjsflexboxnext.jschakra-ui

Design interactive horizontal buttons containing images and corresponding labels using HTML5

I want to create three horizontal buttons with images and labels underneath using HTML5. I attempted to follow this example: tutorial, but I need a different image for each button. When I give each button an ID and add #id {background-image:url} to the CS ...

htmlcss

Ensuring proper alignment within anchor links and buttons

button, a { height: 30px; display: inline-block; border: 1px solid black; vertical-align: middle; } button > div, a > div { width: 30px; height: 10px; background-color: red; } <button> <div class="buttonDiv"></div> ...

javascripthtmlcssbuttonalignment

Do Not Replace Bootstrap Theming

Good day, I am encountering an issue that has left me puzzled. I am attempting to modify the color scheme of bootstrap using SCSS in my Vue project, but it seems to be ineffective when I execute npm run serve. Below are snippets from my files: custom_boo ...

vue.jsbootstrap-4

HTML5 enables the creation of an imperceptible scrollbar

I am looking to make my scrollbar invisible without it being visible however, I still want it to function when hovering over the box Also, I need it to work smoothly on both tablets and computers, which is why I have opted for using html5 I would great ...

javascriptjquerycsshtml

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

javascriptcssgoogle-chrome

Tips for including space at the beginning and end of a dynamically created table cell

My table is dynamically generated with contents drawn from a database, creating rows based on the data. Each cell has a rounded border and 2px padding for consistency. I want all cells to appear evenly spaced and padded vertically, but I'm facing an ...

csshtml-tablecellpadding

When nearing the edge of the window, extend the submenu in the opposite direction

I've created a simple submenu using CSS, structured as an unordered list. It appears on hover by changing the display property to "block". <ul> <li><a href="#">item</a></li> <li><a href="#">item</a ...

jquerycss

Skewed div with a stylish background image

Struggling with an issue here. I've managed to skew my div just right, but now I'm trying to get the image to fit without tiling. If anyone can offer some assistance, that would be greatly appreciated. This is what I'm aiming for: https://i ...

htmlcss

Top and bottom fieldset legends in Bootstrap 4

Looking for suggestions on how to include legend text on the bottom border in bootstrap 4. I attempted to use position and margin, but it didn't work. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.mi ...

htmlcssbootstrap-4

changing up the format of nested blockquotes

My website includes various text features, which means that nested blockquotes are a possibility. I am now curious if it is feasible to style nested blockquotes differently from each other! blockquote{ background-color:#666; color:#fff; border ...

javascriptjqueryhtmlcss

Switching Over to Burger Menu

I created a burger menu using HTML, CSS, and jQuery that switches from a full-width menu to a burger menu. However, I'm facing an issue with toggling the dropdown when the menu collapses. Here's my code: <!DOCTYPE html> <html> < ...

javascriptjqueryhtmlcssmenu

How can I incorporate a personalized SVG path to serve as a cursor on a webpage?

Is there a way to enhance the functionality of binding the 'mousemove' event to a div and moving it around the page while hiding the real cursor? Specifically, can we change the shape of the circle to an SVG path and drag the SVG path around the ...

javascripthtmljquerycsssvg

Issue regarding the carousel functioning on Bootstrap version 4.5.0

I am currently facing an issue with the carousel in the latest version of Bootstrap (4.5). I have set up a multiple item carousel by creating a grid inside it, where each item looks like this: <div class="carousel-item active"> < ...

htmlcssbootstrap-4carousel

Is your Navbar having trouble readjusting its height?

My navbar is not resizing properly when I shrink the logo image. Here's a link to the Codepen page with the full code: https://codepen.io/gabor-szekely/pen/JeMqQz I'm trying to reduce the size of the "Sino Medical" logo image in the top left co ...

htmlcssnavbarmargin

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight

Incorporation of a dynamic jQuery animation

I'm a beginner in jquery and I'm attempting to achieve the following: I want each menu to collapse separately when the mouse hovers over it. The issue is that both menus collapse simultaneously! I know it's probably something simple, but I ...

javascriptjqueryhtmlcss