Bootstrap 5, columns not aligned-CodePudding

I'm using Bootstrap 5 with multiple rows and columns. I would want my columns to be aligned with each rows. This is working but some borders are not aligned with the columns

.VI-border {
    border-top: 1px solid grey;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.VI-border-top {
    border-top: 1px solid grey;
}

.VI-border-bottom {
    border-bottom: 1px solid grey;
}

.VI-border-left {
    border-left: 1px solid grey;
}

.VI-border-right {
    border-right: 1px solid grey;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">

<div >
  <div  style="word-break: break-word;">
    VI 10
  </div>
    <div >Ammaloramento</div>
    <div >Gravità</div>
    <div >Estensione</div>
    <div >Dettaglio</div>
    <div >Segnalazioni</div>
</div>
<div >
    <div >
        Ossidazione
    </div>
    <div >
        Lieve
    </div>
    <div >
        75 %
    </div>
    <div >
        In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud
    </div>
    <div  style="height: 22px;">
        Presenti: 0
    </div>
</div>

You can see from the snippet (open full page or expand the snippet) how the borders of the second row are not aligned with borders of first row. The problem could be the borders themselves but I don't know how to resolve it while keeping the border.

Any advice?

CodePudding user response：

Because you are clearly using tabular information/data, you should use tables

You should not use table-based layout under any circumstances. Instead, check out our CSS Tutorials to start learning about modern web site layout. However, that doesn’t mean you should avoid tables — tables should be used whenever you need to present information in a tabular format.

In this case you can use bootstrap 5 tables

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<table >
  <thead>
    <tr>
      <th scope="col">Ammaloramento</th>
      <th scope="col">Gravità</th>
      <th scope="col">Estensione</th>
      <th scope="col">Dettaglio</th>
      <th scope="col">Segnalazioni</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ossidazione</td>
      <td>Lieve</td>
      <td>75 %</td>
      <td> In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud</td>
      <td> Presenti: 0</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

If a table works for you that's great! Bootstrap styles them really well. However, if you would like to avoid using a table then the layout you trying to achieve is totally possible. So rather than telling you: don't do that, I will show you: how you can do that:

The Problem(s):

Your borders misalign because i.e. where one .row's .col-* has a left border, the adjacent .row instead uses a right border on the previous .col-*, etc. (causing 1px offsets).


	<- left border here will not align
with right border here ->

The Fix:

You just need to be consistent and apply the same borders as the corresponding .col-* in each .row. You can also easily style the borders with CSS variables and then use the border utility classes to apply the borders. In my example below, I also used .text-break on your first .col-* to replace the inline style, and I added .text-truncate to several .col-*s to prevent the text from overflowing the borders.

.VI-border {
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: grey;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css">
<div >
  <!-- rows should always be in a container!  -->

  <div >
    <div >VI 10</div>
    <div >Ammaloramento</div>
    <div >Gravità</div>
    <div >Estensione</div>
    <div >Dettaglio</div>
    <div >Segnalazioni</div>
  </div>

  <div >
    <div >Ossidazione</div>
    <div >Lieve</div>
    <div >75 %</div>
    <div >In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud</div>
    <div  style="height: 22px;">Presenti: 0</div>
  </div>

</div>