'In a 2 col row in Bootstrap 5, remove all padding on one column but keep column 2 perfectly aligned

So I've got a 2 column layout in Bootstrap 5 and each column needs to remain at 50% width e.g.

<div class="container-fluid">
    <div class="row">
        <div class="col">
            One of two columns
        </div>
        <div class="col">
            One of two columns
        </div>
    </div>
</div>

If I wanted the content of the first col to be perfectly flush to the left and right hand edge of the column (no padding etc), but still keep the second column with the default padding, it would seem that if I simply did this:

<div class="container-fluid">
    <div class="row">
        <div class="col p-0">
            One of two columns
        </div>
        <div class="col">
            One of two columns
        </div>
    </div>
</div>

It makes column 1 slightly less wide and column 2 wider. Thus column 2 is out of alignment as both columns are no longer 50% in width.

To keep both columns the same width but have no padding on column 1, the only solution I can come up with is to then adjust the flex property on all columns within .container-fluid to increase the flex-basis value to an arbitrary amount below 50% e.g.

    .container-fluid .col { flex: 1 0 20%; }

This then has the desired effect and keeps both columns in alignment. But it feels a bit hacky.

I wonder if I've missed something?

Solution 1:^[1]

Are you using the latest bootstrap? It seems to work fine here. Both column contents are exactly the same width.

<html lang="en">
  <head>
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
          <div class="col p-0">
              One of two columns
          </div>
          <div class="col">
              One of two columns
          </div>
      </div>
  </div>

  </body>
      <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
      integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"
      crossorigin="anonymous"
    ></script>
  
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Graham Reynolds

'In a 2 col row in Bootstrap 5, remove all padding on one column but keep column 2 perfectly aligned

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]