The example below features both solutions in a minimal Bootstrap 5.3.3 layout. Aesthetically, they are identical, but semantically Solution 2 is better. Additional details are commented in the example. View in Full PageFull page mode.
The example below features both solutions in a minimal Bootstrap 5.3.3 layout. Aesthetically, they are identical, but semantically Solution 2 is better. Additional details are commented in the example. View in Full Page mode.
The example below features both solutions in a minimal Bootstrap 5.3.3 layout. Aesthetically, they are identical, but semantically Solution 2 is better. Additional details are commented in the example. View in Full page mode.
In addition, since .vertical-alignline has no content you can apply padding as shorthand with half the width: padding: 5px and it will always be 10px wide and a minimum height of 10px (but it's current height will be of it's flex container).
Remove div.vertical-line. Visually, it's really just a border.
Add border-left: border-left: 10px solid #007bff; to .post-title-container. This is a real border which is just a style (as it should be).
Add BS class .ps-3 to .post-title-container. .ps-3 is padding-left: 1rem which is the spacing equivalent to margin-right: 1rem on .vertical-line.
In addition, since .vertical-align has no content you can apply padding as shorthand with half the width: padding: 5px and it will always be 10px wide and a minimum height of 10px (but it's current height will be of it's flex container).
Remove div.vertical-line. Visually, it's really just a border.
Add border-left: border-left: 10px solid #007bff; to .post-title-container. This is a real border which is just a style (as it should be).
Add BS class .ps-3 to .post-container. .ps-3 is padding-left: 1rem which is the spacing equivalent to margin-right: 1rem on .vertical-line.
In addition, since .vertical-line has no content you can apply padding as shorthand with half the width: padding: 5px and it will always be 10px wide and a minimum height of 10px (but it's current height will be of it's flex container).
Remove div.vertical-line. Visually, it's really just a border.
Add border-left: border-left: 10px solid #007bff; to .post-title-container. This is a real border which is just a style (as it should be).
Add BS class .ps-3 to .post-title-container. .ps-3 is padding-left: 1rem which is the spacing equivalent to margin-right: 1rem on .vertical-line.
The example below features both solutions in a minimal Bootstrap 5.3.3 layout. Aesthetically, they are identical, but semantically Solution 2 is better. Additional details are commented in the example. View in Full Page mode.
The example below features both solutions in a minimal Bootstrap 5.3.3 layout. Aesthetically, they are identical, but semantically Solution 2 is better. Additional details are commented in the example.
The example below features both solutions in a minimal Bootstrap 5.3.3 layout. Aesthetically, they are identical, but semantically Solution 2 is better. Additional details are commented in the example. View in Full Page mode.
