CODEWITHSUNDEEP
htmlcssbootstrap-5
alesssz
alesssz

Reputation: 520

Bootstrap 5, columns not aligned

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 class="row VI-border text-center">
  <div class="col-sm-1 VI-border-right VI-border-bottom" style="word-break: break-word;">
    VI 10
  </div>
    <div class="col-sm-2 VI-border-right VI-border-bottom">Ammaloramento</div>
    <div class="col-sm-1 VI-border-right VI-border-bottom">Gravità</div>
    <div class="col-sm-2 VI-border-right VI-border-bottom">Estensione</div>
    <div class="col-sm-3 VI-border-right VI-border-bottom">Dettaglio</div>
    <div class="col-sm-2 offset-sm-1 VI-border-left VI-border-bottom">Segnalazioni</div>
</div>
<div class="row text-center">
    <div class="offset-sm-1 col-sm-2 VI-border-right VI-border-bottom VI-border-left">
        Ossidazione
    </div>
    <div class="col-sm-1 VI-border-right VI-border-bottom">
        Lieve
    </div>
    <div class="col-sm-2 VI-border-right VI-border-bottom">
        75 %
    </div>
    <div class="col-sm-3 VI-border-right VI-border-bottom">
        In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud
    </div>
    <div class="offset-sm-1 col-sm-2 VI-border-right VI-border-bottom VI-border-left" 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?

Upvotes: 0

Views: 523

Answers (2)

dippas
dippas

Reputation: 60563

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 class="table table-bordered">
  <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>

Upvotes: 2

Arleigh Hix
Arleigh Hix

Reputation: 10877

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 class="container-fluid">
  <!-- rows should always be in a container!  -->

  <div class="row VI-border border-top text-center">
    <div class="col-sm-1 border-start border-bottom text-break">VI 10</div>
    <div class="col-sm-2 border-start border-bottom text-truncate">Ammaloramento</div>
    <div class="col-sm-1 border-start border-bottom text-truncate">Gravità</div>
    <div class="col-sm-2 border-start border-bottom text-truncate">Estensione</div>
    <div class="col-sm-3 border-start border-bottom border-end text-truncate">Dettaglio</div>
    <div class="col-sm-2 offset-sm-1 border-start border-bottom border-end text-truncate">Segnalazioni</div>
  </div>

  <div class="row VI-border text-center">
    <div class="offset-sm-1 col-sm-2 border-start border-bottom text-truncate">Ossidazione</div>
    <div class="col-sm-1 border-start border-bottom text-truncate">Lieve</div>
    <div class="col-sm-2 border-start border-bottom">75 %</div>
    <div class="col-sm-3 border-start border-bottom border-end">In corrispondenza delle giunzioni, Forte in corrispondenza della giunzione n. 3 da imbocco Sud</div>
    <div class="col-sm-2 offset-sm-1 border-start border-bottom border-end" style="height: 22px;">Presenti: 0</div>
  </div>

</div>

Upvotes: 1

Related Questions