Tricky question about aligning row & cols

[JustSxm]

Hello! Here is my issue:

I have two rows, The first row the entirety of it is a 'section'. The second row, there is 3 columns which are 3 different sections. All those sections needs to be aligned with a background. I found a way to do it, but it is super ugly and probably not something I would go in production with. I also need gutters betwen my sections

Here is a minimal example of my problem, that I've solved but very bad. Hopefully someone can help me.

Ive attached in this zip a demo of the problem and a demo of the solution I found (apparently we cant upload html files)

Edit by maintainer: removed the zip file

[julien-deramond]

Hello @JustSxm
Sorry I just removed the zip file for security reasons. To share your HTML, you could just do it in CodePen starting from our preconfigured Bootstrap CodePen demo. Those are free solutions that can be very handy to share reproducible environment.
Otherwise, if this is just short code, you can use Markdown with the code syntax.

[JustSxm]

No worries

Problem:

		<div class="vh-100 bg-black container-fluid">
			<div class="p-2">
				<div class="row bg-white">
					<div class="col">t</div>
					<div class="col">t</div>
					<div class="col">t</div>
				</div>
				<div class="row mt-2">
					<div class="col-3">
						<div class="bg-white">a</div>
					</div>
					<div class="col-6">
						<div class="bg-white">a</div>
					</div>
					<div class="col-3">
						<div class="bg-white">a</div>
					</div>
				</div>
			</div>
		</div>

[julien-deramond]

Not entirely sure to have understood what is expected in terms of result, but tried something real quick to have the sections matching on the left/right side, and the content (letters) at the same level: https://codepen.io/julien-deramond/pen/vYoPQOV:

<div class="container-fluid px-4 py-5" style="background-color: #fd0">
  <div class="row bg-info gap-2">
    <div class="col">t</div>
    <div class="col">t</div>
    <div class="col">t</div>
  </div>
  <div class="row bg-yellow mt-2 gap-2">
    <div class="col bg-danger">a</div>
    <div class="col bg-danger">a</div>
    <div class="col bg-danger">a</div>
  </div>
</div>

Even if it's not the exact right solution for your use case, hope it can lead you to another solution matching your expectations.

[JustSxm]

Im sorry, I was very unclear in my explanation, but that is exactly what I was looking for. How exactly does gap-2 works differently than the already existing gutters that bootstrap makes?

[julien-deramond]

Our .g*-* (e.g. .gx-5) utility presented at https://getbootstrap.com/docs/5.3/layout/gutters/ works by defining a gutter size which is used by the row margin right/left (calculated), but also for the padding left/right of the column:

Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.

If you replace .gx-5 with .gap-4 for instance, it's no more calculated values by Bootstrap by playing with margins and paddings, it's the real gap system from flexbox:

So slightly different, but not that far neither.