Utilize Bootstrap 4 columns to ensure efficient use of space by either maximizing or minimizing wrapping

I'm attempting to design a layout with multiple rows, each containing two columns. The first column will display text descriptions and should not wrap, taking up about 80% of the row space. The second column will show amounts and must be right-justified. However, my current code sets both columns to an equal 50% width.

<div className="row border">
     <div className="col border">
          <small className="text-muted">{trans.payee} - {trans.category}</small>
     <div>
     <div className="col text-righ">
          <small className="text-muted">{trans.amount.toFixed(2)}</small>
    </div>
</div>

Is there a way to make the first column expand to fill available space while allowing the second column to use only what it needs? I'm questioning if the row/col elements in Bootstrap 4 are the appropriate choice for this layout.

Bootstrap 4 is still new to me, so I'm working through the learning curve as I go along.

csstwitter-bootstrapbootstrap-4

Answer №1

To save space, consider using col-auto on the second column

Check out this link for more information: 

<div class="row border">
        <div class="col border text-truncate">
            <small class="text-muted">{trans.payee} - {trans.category} can be longer</small>
        </div>
        <div class="col-auto text-right">
            <small class="text-muted">40.00</small>
        </div>
</div>

Adding text-truncate to the first column can prevent wrapping if necessary.

Answer №2

Reminder: Please remember to close the second div tag.

If you do not specify a width for the div, it will automatically adjust itself.

Make sure to assign a width to one of the div elements so that the other can adapt accordingly.

<div className="row border">
     <div className="col border">
          <small className="text-muted">{trans.payee} - {trans.category}
          </small>
     </div>
     <div className="col text-righ">
      <small className="text-muted">{trans.amount.toFixed(2)}</small>
     </div>
</div>

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

Adjusting the height of panels in Bootstrap and ensuring that an image within the panel maintains that specific height

Struggling to include an image within Bootstrap's panel without the panel height adjusting to the image? Wondering how to set a fixed panel height while allowing the image to adjust accordingly? Let's solve this dilemma together! ...

phpjqueryhtmlcss

What are some ways to make the parent div grow based on the width, padding, margin, or box of the child div

Is it possible to expand a parent div with a child div and how can I achieve this? I have created a JSFiddle with some code included. CSS body { background: gray; } div.page { color: white; background: black; max-width: 72em; margin: ...

htmlcss

Navigate the page by scrolling the absolute positioned div

Is it possible to make the fancybox modal scroll with the page using fancybox 2? I want it to move along with the content rather than being fixed in the center with a max-height restriction. How can I achieve this? $('.fancybox-open').fancybox({ ...

javascriptjqueryhtmlcss

Adjusting height in Google Maps to fill the remaining space

Currently, I am developing a map application where I want the Google Maps DIV to occupy the remaining height under the header. Here is the code snippet: <!DOCTYPE html> <head> <title>Map Application</title> <style type ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Incorporate FontAwesome icons into table headers within an Angular framework

I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial. The NgbdSortableHeader directive plays a key role in changing the sorting of columns: @Directive({ selector: ...

htmlcssangularangular-fontawesome

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

javascript.nethtmlcssprinting

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with: $(document).on('click', '.view-details', function () { $(this).prop("disabled", true); // API call1 // API call2 // API call3 $(this).prop("disabled" ...

javascriptjqueryhtmlcss

Reactstrap and React-router v4 are failing to redirect when there is a partial change in the address link

Within the header of my website, <NavItem> <NavLink tag={Link} to="/template/editor">Create New Template</NavLink> </NavItem> On the routing page of my website, <BrowserRouter> <div className="container-fluid"> ...

javascriptreactjsbootstrap-4react-router-v4reactstrap

An unusual outcome occurred while attempting to duplicate the text

After copying the letter A, I noticed that an empty string is being logged to the console instead of the expected A. However, when I paste, the console does successfully log the letter A. document.addEventListener('copy', handler); document ...

javascripthtmlcss

Tips for extracting designated link by employing a Selector CSS Query

Please note: While a similar question has been asked on JSoup:How to Parse a Specific Link, I have a more specific variation of this inquiry. Kindly read on for further details. In order to extract data from a particular site link, I am looking to utili ...

cssjsoup

Understanding how flex-wrap property works in flexbox is essential for creating

Take a look at the code snippet below: .flex-container { padding: 20px; margin: 20px; list-style: none; border: 1px solid silver; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz- ...

javascripthtmlcssflexbox

Is it possible to design and implement Materialize CSS inputs without relying on Materialize CSS?'

Is there a method to implement Materialize CSS input elements that include placeholders and icons without directly using the Materialize CSS framework? I prefer not to mix frameworks in order to avoid potential conflicts, as I am already utilizing anothe ...

cssmaterialize

Is there a more intelligent approach to incorporating Bootstrap classes (or classes from another less.css file) into my less file through inheritance?

I am trying to find a more efficient way to integrate bootstrap classes into my less file. Currently, I am doing the following, but it has the disadvantage that not every "subclass" or connected class is inherited for my own control: .BWForm_form-control ...

csstwitter-bootstrap-3visual-studio-2013less

CSS - the option element is not appearing when using display:block

I am facing an issue with a select tag and its options. I have used CSS to hide all the options except for the last one which is set to display block. However, the last option is not showing up. Could this be due to the large number of options present? &l ...

htmlcssselect

Bootstrap 4 modal with scrollspy feature for a seamless full-screen experience

I am trying to implement a full-screen modal using Bootstrap 4 that incorporates a scrollspy feature for scrolling the content within the modal body. I have successfully achieved the full-screen aspect, but I am facing issues with making the content scroll ...

htmlcssbootstrap-4bootstrap-modal

Managing the scrolling direction horizontally with waypoints.js

As I work on creating a custom wizard form with waypoints, I've encountered an interesting issue that has left me puzzled. In my sample CODEPEN, you can see two pages of the wizard process to better understand the problem. Upon clicking the forward ...

javascriptjquerycssjquery-waypoints

position a div element at the bottom of its parent container

I am facing a challenge with this issue: I want to position a red div at the bottom of another div. The red div should always stay at the bottom of its parent div. .homepage-wrapper{ max-width: 1028px; margin-left: auto; ...

javascriptjqueryhtmlcss

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

javascripthtmlcssvue.js

What is the method to retrieve an id similar to "invokedOn" text through a right-click event using Bootstrap ContextMenu?

I'm working with Bootstrap 3.0 ContextMenu and you can find the link here: http://jsfiddle.net/KyleMit/X9tgY/ I am trying to figure out how to retrieve the id or data-Id of the element that was clicked. I have tried several methods but haven't b ...

javascriptjquerytwitter-bootstrapcontextmenu

The text consistently remains positioned to the right of my image

Photo Gallery Title Issue I'm working on a photo gallery project where I want to add titles underneath each image. However, I'm facing a problem where the title is appearing next to the image instead of below it. You can see the issue in this sc ...

htmlcssphoto-gallery