Custom-fitting column widths in Bootstrap 5

Trying to achieve an autofit for the second column width using the code provided (view code here), but the use of auto margins doesn't seem to be effective.

.col {
  border: 1px solid red;
}
.autofit {
  margin: auto;
  width: auto;
  max-width: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row m-5">
  <div class="col">1</div>
  <div class="col autofit">2*</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>

Are there alternative methods to achieve the autofit for the column width?

Tried using width: fit-content(100px); as well, but it did not yield the desired results...

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

If you're looking to achieve this, you can make use of the Bootstrap class .col-auto. It's a simple and efficient solution!

.col, .col-auto {
  border: 1px solid red;  
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row m-5">
  <div class="col">1</div>
  <div class="col-auto">2*</div>
  <div class="col">3</div>
  <div class="col">4</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

Issue with strange behavior of CSS cursor with images

Is there something blatantly obvious that I'm missing here? My goal is to replace the cursor css property with a png, as shown in this example here I was able to get it working with the 'happy.png' demo, but for some reason it won't wo ...

htmlcsscursor

Center Button Horizontally and Vertically with CSS Code

I really need some assistance with getting this button I made to be perfectly centered on both the vertical and horizontal axes of the page. So far, I've managed to center it horizontally, but not vertically. Any advice or guidance would be greatly ap ...

htmlcss

Displaying various charts in a single view without the need for scrolling in HTML

How can I display the first chart larger and all subsequent charts together in one window without requiring scrolling? This will eventually be viewed on a larger screen where everything will fit perfectly. Any recommendations on how to achieve this? Here ...

javascripthtmlcssangularjsplotly

During my JavaScript coding session, I encountered an issue that reads: "Uncaught TypeError: $(...).popover is not a function". This

Encountering an issue while trying to set up popovers, as I am receiving this error: Uncaught TypeError: $(...).popover is not a function. Bootstrap 5 and jQuery links are included in the code, but despite that, the functionality is still not operational. ...

javascripthtmldjangobootstrap-5popover

Is it possible to use velocity js to add a gradient color effect to text content?

Can I use velocity js to apply gradient color to text? I've looked at https://css-tricks.com/snippets/css/gradient-text/ My specific need is to dynamically add a changing gradient using js. Thank you in advance. ...

javascripthtmlcssvelocity.js

The functionality to generate forms on the click of a button appears to be malfunctioning

I am currently attempting to dynamically create Bootstrap Panels using an `onclick` function. However, I want each Panel to generate multiple forms when the button is clicked. In my current code, the first Panel successfully creates forms when the button i ...

javascriptjquerytwitter-bootstrap

What is the best way to disable the click function for <a> tags that have a specific class?

I am dealing with parent navigation items that have children, and I want to prevent the parent items from being clickable. Here is an example of how they currently look: <a href="parent">Parent Item</a> Is there a way to select the <a> ...

javascriptjquerycssanchor

The table printing settings are not compatible with portrait and landscape orientations

I am facing an issue with printing a table on my webpage. When I try to print using Control+P or window.print();, the width of the table does not adjust properly for portrait or landscape orientation. The table ends up exceeding the paper width. How can I ...

htmlcsshtml-tablemedia-queries

Hovering over an image and trying to rotate it results in

Check out my rotating image example on hover in React here This effect utilizes scale(), rotate(), and transition properties to create an animated rotation when hovering over the parent element. Additionally, overflow: hidden is applied to the parent elem ...

javascripthtmlcssreactjshover

One effective way to redirect after a PUT request and display a one-time message

Here's what I'm aiming for in terms of desired behaviour: A user navigates to a password change web page. The user completes the form and it is sent via PUT request to our REST server. Upon successful completion, the user is redirected to their ...

javascriptjqueryhtmlajaxhttp-redirect

The mdb navigation bar seems to constantly change its height

Having an issue with the height of my mdb navbar in my Angular app. It randomly flips to a larger size when reloading the page, but returns to normal when I open the developer console in Chrome. Two screenshots show the correct display and the incorrect i ...

cssangularmdbootstrap

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Currently, there are two functionalities at play. The submit button is not being recognized while the functionality in JS $(".next").click(function(){..} is working as expected. HTML This section involves 4 fieldsets. I am attempting to validate ...

javascripthtmljquerycssbootstrap-4

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Utilizing the jquery.uploadfile.min.js plugin to upload multiple files results in creating a div of jscrollpane class each time a file is uploaded. However, there seems to be an issue where only the scrollbars in the last created div are functioning proper ...

javascriptjqueryhtmljscrollpane

Ways to alter the color of individual pseudo elements using a CSS loop

While working on creating a typewriter animation effect for my website using only CSS that I discovered through some online research, a question popped into my mind - is it possible to set different colors for each text in the animation? I have included t ...

htmlcssangularcss-animations

An effective method to showcase the HTML content retrieved by getElementsByClassName using JSON.parse()

Can someone help me modify this code so that it displays the value of favFood? It currently works with getElementById but not getElementsByClassName, and I want to use a class: server file - ProcesssingFileOnServer.php: <?php $myObj = new stdClass(); ...

javascriptphphtmljson

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

There's an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') console.log(slid[numberArray].classList) is working fine, but slid[numberArray].classList.add('active') is ...

javascripthtmlcss

Determine the variance among time stamps

After creating a registration page, I implemented functionality where when a user clicks the submit button, an activation link is sent to their email and a timestamp is stored in the database. To ensure security, I need to verify if the activation link was ...

phphtmldatabasecodeignitertimestamp

XSL fails to display HTML tables

I am having trouble displaying information from an XML file about hotels using XSL on a webpage without HTML tables. Despite searching through numerous posts on StackOverflow, I cannot seem to pinpoint where I may have gone wrong. Here is an excerpt from ...

htmlxmlxslt

What is causing my `<nav>` buttons to be left-aligned?

The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful. CSS Snippets: #container { width: 100%; background-color: bla ...

htmlcss

expanding the close window icon beyond the boundaries of the modal container

I seem to be experiencing a CSS mistake that I can't figure out. The close window icon in my modal window is getting cut off at the edge and not displaying properly. Check out this JSFiddle link <div id="sendMsgForm" class="modal"> <div ...

htmlcss