col-*-2 not properly configured

[the-hotmann]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

Whn you have an HTML setup like this:

<div class="container">
	<div class="row g-4">
		<div class="col-xl-2 col-sm-6 col-12">
			<label for="test1" class="form-label"><b>Test1</b>:</label>
			<input type="test1" class="form-control" id="test5">
		</div>
		<div class="col-xl-2 col-sm-6 col-12">
			<label for="test2" class="form-label"><b>Test2</b>:</label>
			<input type="test2" class="form-control" id="test5">
		</div>
		<div class="col-xl-3 col-sm-6 col-12">
			<label for="test3" class="form-label"><b>Test3</b>:</label>
			<input type="test3" class="form-control" id="test5">
		</div>
		<div class="col-xl-3 col-sm-6 col-12">
			<label for="test4" class="form-label"><b>Test4</b>:</label>
			<input type="test4" class="form-control" id="test5">
		</div>
		<div class="col-xl-2 col-sm-6 col-12">
			<label for="test5" class="form-label"><b>Test5</b>:</label>
			<input type="test5" class="form-control" id="test5">
		</div>
		<div class=col-12>
			<div>
				<button type="submit" class="btn btn-success">TEST BUTTON</button>
			</div>
		</div>
	</div>
</div>

Twice col-xl-3 and 3 times col-xl-2. Which in total would add up to: 2*3 + 3*2 = 6+6 = 12. (one full row). Yet, it will break the row!

This is because col-*-2 = 16.67% width.

Calculation:

2 * col-*-3 | 2 * 25%    = 50    %
3 * col-*-2 | 3 * 16.67% = 50.01 %

50% + 50.01% = 100.01% = it will break the row, while it should not!

Reduced test cases

<div class="container">
	<div class="row g-4">
		<div class="col-xl-2 col-sm-6 col-12">
			<label for="test1" class="form-label"><b>Test1</b>:</label>
			<input type="test1" class="form-control" id="test5">
		</div>
		<div class="col-xl-2 col-sm-6 col-12">
			<label for="test2" class="form-label"><b>Test2</b>:</label>
			<input type="test2" class="form-control" id="test5">
		</div>
		<div class="col-xl-3 col-sm-6 col-12">
			<label for="test3" class="form-label"><b>Test3</b>:</label>
			<input type="test3" class="form-control" id="test5">
		</div>
		<div class="col-xl-3 col-sm-6 col-12">
			<label for="test4" class="form-label"><b>Test4</b>:</label>
			<input type="test4" class="form-control" id="test5">
		</div>
		<div class="col-xl-2 col-sm-6 col-12">
			<label for="test5" class="form-label"><b>Test5</b>:</label>
			<input type="test5" class="form-control" id="test5">
		</div>
		<div class=col-12>
			<div>
				<button type="submit" class="btn btn-success">TEST BUTTON</button>
			</div>
		</div>
	</div>
</div>

What operating system(s) are you seeing the problem on?

Windows, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

5.3.3

[omishah]

works fine here

[julien-deramond]

I've created the corresponding CodePen to check the rendering, and it works well at the xl breakpoint on my side with Firefox, Chrome, Safari (all latest versions on macOS).

3 * col-*-2 | 3 * 16.67% = 50.01 %

.col-xs-2 is defined as the following (source https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.css):

.col-xl-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

So it's more 3 * col-xl-2 = 3 * 16.66666667% = 50.00000001%. In the provided example, the computed value of a <div class="col-xl-2" is 220px at the xl breakpoint. So everything looks fine here, the browser seems to manage this extra 0.00000001% well.

Would you have more elements to share? Screenshot, CodePen, browser/OS versions to check in which context you've got this issue?

[the-hotmann]

Ok I have to check again. Will report back.

Edit: true, I have used cssmin which processed the bootstrap css file and therefore:

.col-xl-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

ended up beeing:

.col-xl-2 {
  flex: 0 0 auto;
  width: 16.67%;
}

which will not be handled properly anymore.

Sorrry for the calse report.