Aligment issues in columns on Bootstrap 5

I currently have a layout using Bootstrap 5 with multiple rows and columns. My goal is to have the columns aligned within each row, but I am experiencing issues where some borders are not lining up correctly 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>

If you examine the code snippet closely (by opening the full page or expanding the snippet), you'll notice that the borders of the second row do not align perfectly with those of the first row. The issue may lie in the borders themselves, but I'm unsure how to fix it while maintaining the border aesthetic.

Any suggestions on how to tackle this problem?

htmlcssbootstrap-5

Answer №1

When dealing with tabular data, it is recommended to utilize tables

Avoid using tables for layout purposes and explore CSS Tutorials for modern web design techniques. However, tables are still valuable in presenting information in a structured format.

If you require a solution, consider implementing 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">Improvement</th>
      <th scope="col">Severity</th>
      <th scope="col">Extent</th>
      <th scope="col">Detail</th>
      <th scope="col">Reports</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Oxidation</td>
      <td>Mild</td>
      <td>75 %</td>
      <td>At junctions, Strong at junction n. 3 from South entrance</td>
      <td>Total: 0</td>
    </tr>
  </tbody>
</table>

Answer №2

If you find that a table works well for your needs, that's fantastic! Bootstrap provides excellent styles for tables. However, if you prefer not to use a table, it is still possible to achieve the layout you desire. Instead of simply saying: don't do this, I will demonstrate: how you can do it:

The Issue(s):

Your borders are misaligned because, for example, where one .row's .col-* has a left border, the adjacent .row uses a right border on the previous .col-*, resulting in offsets of 1px.
<- left border here will not align
with right border here ->

The Solution:

To address this issue, ensure consistency by applying the same borders as the corresponding .col-* in each .row. You can also customize the border styles using CSS variables and utilize border utility classes to apply the borders. In the example provided below, the .text-break class is used on the first .col-* to replace inline styling, and .text-truncate is added to various .col-*s to prevent text overflow.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Whenever I navigate to a new page in my NEXTJS project, it loads an excessive number of modules

I am currently working on a small Next.js project and facing an issue where the initial load time is excessively long. Whenever I click on a link to navigate to a page like home/product/[slug], it takes around 12 seconds to load due to compiling over 2000 ...

javascripthtmlreactjstypescriptnext.js

A miniature triangle-shaped bubble crafted with 1px of CSS3 styling

Currently, I am experimenting with CSS3 and creating bubble shapes. However, I have encountered an issue. I am trying to create a triangle with a 1px border, but the result is a thicker triangle than desired. You can view my code on this fiddle : FIDDLE ...

csspseudo-element

My webpage is experiencing issues with function calls not functioning as expected

I have created a select menu that is integrated with the Google Font API. To demonstrate how it works, I have set up a working version on JSBIN which you can view here. However, when I tried to replicate the code in an HTML page, I encountered some issues ...

javascripthtmljsongoogle-font-api

What is the best way to connect a line from the edge of the circle's outermost arc?

I am attempting to create a label line that extends from the outermost point of the circle, similar to what is shown in this image. https://i.sstatic.net/OqC0p.png var svg = d3.select("body") .append("svg") .append("g") svg.append("g") .attr("cl ...

javascripthtmlcssd3.jssvg

Explore the Codrops website with the help of our convenient tour feature and

CoDrops offers a website tour feature created with jQuery, which can be found at this link: http://tympanus.net/Development/WebsiteTour/ However, there is an issue when you click on "Start the tour". It will initially show a Next button, which then change ...

jquerycssgallery

Is it possible to generate a table without any grid lines present?

Currently, I am in the process of designing a table that will function as a popup when a link is clicked within my imported SQL table. An example of this table is included with this message for reference. After conducting thorough research, I attempted to ...

htmlcssbootstrap-4bootstrap-modal

How to modify the background image of a div using CSS from a specific folder

<head id="Head1" runat="server"> <title>Title</title> <style> .parallax { /* The image used */ background-image: url(Pictures/BackUS.png); height: 100%; /* Create the parallax scrolling effect */ back ...

htmlcss

Troubleshooting HTML image visibility issues

I've been trying to get a Tumblr icon to display in the upper-right corner of my HTML-based page, but all I see when I open it in a browser is a white box with a gray outline. The code I'm using for the image is: <img style="float: right; mar ...

htmlcssimageicons

Tips for changing form field values using jQuery

Is there a way to use jQuery to retrieve the values of multiple checkboxes and insert them into a hidden form field? Here is how my checkboxes are structured: <form> <input type="checkbox" name="chicken" id="chicken" />Chicken <in ...

jqueryhtml

The scroll function triggers even upon the initial loading of the page

Trying to solve the challenge of creating a fullscreen slider similar to the one described in this question, I created a jsfiddle (currently on hold) Despite knowing that scrolling too fast causes bugs and that scrolling both ways has the same effect, m ...

javascriptjqueryhtmlcssevents

Issues with the display property

After setting the display of a div tag as none in the style property, I am trying to show it based on an on-click function. However, the issue I am facing is that when I click on the function, the div displays for a brief moment then disappears again. Ca ...

javascriptjqueryhtml

Changing the selection in the Angular Mat-Select dropdown causes the dropdown's position to shift

Issue with dropdown position: The dropdown should display below the select element, but when selecting the second value, it appears on top of the select element. I have removed any relevant CSS to troubleshoot, but the problem persists. See screenshots for ...

htmlcssangularangular-material

Enhancing functionality by integrating Jquery/JS with input fields and labels

I am currently facing a challenge in applying CSS to the label element when the corresponding input is selected. After attempting and failing to use input:checked + label due to limitations in the HTML structure that cannot be altered, I seek alternative ...

javascriptjqueryhtmlcss

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

I attempted to implement the .slideToggle("slow"); feature to my table, following the instructions detailed here: W3Schools The toggle effect seems to be functioning, but not as expected. I want the effect to behave similar to the example on the W3School ...

javascriptjqueryhtmljquery-uislidetoggle

Guide on disabling a hyperlink in a table column under specific conditions using Angular2

I am working with a table that has 4 columns: Name, id, Dept, City. The row data and column data are provided as an array from a typescript file and I am iterating through *ngFor to display the content. Below is a snippet of my code: <tbody> < ...

htmlangularhyperlink

Avoid displaying the HTML formatting whitespace on the webpage

I'm working with cakephp's helper to generate spans using the code below: <div id="numberRow"> <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', & ...

phphtmlcakephp

Unleashing the power of ::ng-deep to access CSS in an Angular child component

I'm attempting to modify the CSS class of a child component by using ::ng-deep. Despite my efforts with various iterations of the code provided below, I have been unsuccessful in accessing the CSS. The structure of the HTML component is depicted in th ...

cssangularsassng-deep

Set the height of the vertical scroll at a fixed 100% floatValue

Check out my creation at http://jsfiddle.net/ZygnV/ html, body { margin: 0; padding: 0; height: 100%; } .main-content-wrapper { height: 100%; overflow-y: hidden; white-space: nowrap; } .main-sidebar { display: inline-block; height: 1 ...

javascripthtmlcss

Locate numbers 2, 3, 6, 7, and 10, and continue in numerical order, within the

Having trouble with this one. Does anyone know how to display the items like this: 2, 3, 6, 7, 10 and so on... Is there a jQuery or CSS hack that can achieve this? I'm stuck trying to figure it out .container { display: flex; flex-flow: row wra ...

jquerycss

Using AJAX does not automatically trigger the form submission process

It seems like the preventDefault function is working as intended to prevent the form from posting. However, the update() function is not sending the form data to the specified URL. I am perplexed by this issue and unsure of why it is happening. UPDATE: I ...

jqueryhtmlajax