How do I add a responsive vertical line aside my text/title

Question

Basically, the only problem left for me is the automatically adjusting height of the line beside the supposed title. I contained the vertical line and the title with a div flex, though I am not certain if the structure itself is even correct or the ideal solution to my case.

Here is what I did:

.post-title {
  font-weight: 700;
}

.vertical-line {
  height: /* (Main Issue Here) */;
  width: 10px;
  background-color: #007bff;
  margin-right: 1rem;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="post-title-container d-flex align-items-center">
  <div class="vertical-line"></div>
  <h1 class="post-title">
    Lorem ipsum dolor sit amet consectetur adipisicing
  </h1>
</div>

What about a left border? Or using ::before. No need for extra HTML here. Still, you haven't provided a full example of your current code, so you risk this topic being closed. — ralph.m
– ralph.m, Commented Nov 16, 2024 at 21:48
Sorry, here's the revised version. I didn't include the CSS code as it wasn't really much. though, here you can judge it. Also, the height also adjusts as the post-title gets longer and goes down to adjust. — hanzoera
– hanzoera, Commented Nov 16, 2024 at 21:59
remove align-items-center and remove the height of the line. You should have what you want — Temani Afif
– Temani Afif, Commented Nov 16, 2024 at 22:08
@ralph.m I tried your approach and type this in for the CSS code (as seen below), though the supposed vertical-line height was still the main issue here: .post-title { font-weight: 700; position: relative; } .post-title::before { content: ""; height: (is still the issue); width: 4px; background-color: #007bff; position: absolute; left: -1.5rem; top: 50%; transform: translateY(-50%); } — hanzoera
– hanzoera, Commented Nov 16, 2024 at 22:11
@TemaniAfif DUDE, Thank you so much! I can't believe I overlooked that one. It works now and re-adjusts its size based on its container. — hanzoera
– hanzoera, Commented Nov 16, 2024 at 22:15

zer00ne · Accepted Answer · 2024-11-17 04:02:03Z

Solution 1

As per TemaniAfif's comments:

Remove BS class .align-items-center. If align-items: center is applied to the flex container^🞴, all flex items^✢ will have the height of their content. Since .vertical-line is empty it's height would be 0. Without any align-items defined it is stretch by default which makes flex items' heights at 100%.
Add padding to .vertical-line. Since .vertical-line is a flex item it's width will adjust according to the width of the flex container, any space within said flex container, and the other flex item widths (see this article). Padding of a flex item is not affected.

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

^🞴any mention of "flex container" refers to .post-title-container which has flex-direction: row
^✢any mention of "flex items" refers to .vertical-line and .post-title

Solution 2

As an alternative to using an extra markup, try this:

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.

Example

.post-title {
  font-weight: 700;
}

/*
  Solution 1
  ==========
  width isn't needed
*/
.vertical-line {
  margin-right: 1rem;
  padding: 5px;
  background-color: #007bff;
}

/*
  Solution 2
  ==========
  Apply style to .post-title-container
  .header class was used for demonstration purposes
*/
.header {
  border-left: 10px solid #007bff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet">
  <!-- 
    Use an external stylesheet and place the <link> as the last one.
  -->
  <link href="path/to/your/style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row g-2 mt-3">
      <div class="col">
        <header class="post-title-container d-flex">
          <div class="vertical-line"></div>
          <h1 class="post-title">
            <b>Solution 1:</b> This Title's Flex Container has an Extra &lt;div&gt; That's 10px Wide with a 1rem Margin on the Right.
          </h1>
        </header>
      </div>
    </div>
    <div class="row g-2 mt-3">
      <div class="col">
        <!-- 
          .ps-3 is padding-left: 1rem 
        -->
        <header class="header post-title-container d-flex ps-3">
          <h1 class="post-title">
            <b>Solution 2:</b> This Title's Flex Container has no Extra &lt;div&gt;. The Flex Container has a 10px Wide Border on the Left and 1 rem of Padding on the Left.
          </h1>
        </header>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Tayne Leite · Accepted Answer · 2024-11-16 23:01:46Z

1

Have you tried this way?

.vertical-line { height: auto; /* Automatically adjusts to the height of its container */ width: 4px; /* Adjust the width as needed */ background-color: #007bff; margin-right: 1rem; align-self: stretch; /* Makes sure the line stretches to match the height of the container */ }

answered Nov 16, 2024 at 23:01

Tayne Leite

193 bronze badges

1 Comment

hanzoera Over a year ago

I tried your version of the code. And, It actually worked!! Thanks for your contributions!

hanzoera · Accepted Answer · 2024-11-17 02:03:50Z

Shout out to @TemaniAfif, we've now got it figured out.
Edit: @TayneLeite solution worked as well!

Apparently, the root problem was the align-items-center in the <div class="post-title-container d-flex align-items-center">.

So just removing that solves the problem. Also, it is better to use padding rather than width when defining the thickness of the <div class="vertical-line"></div>, so that its size doesn't readjusts when the text is longer or shorter, or when resized/zoomed in.

Here's my revised code:

<div class="post-title-container d-flex align-items-center">
    <div class="vertical-line"></div>
    <h1 class="post-title">
        Lorem ipsum dolor sit amet consectetur adipisicing
    </h1>
</div>

.vertical-line {
    padding: 3px;
    background-color: #007bff; 
    margin-right: 1rem;
}

Collectives™ on Stack Overflow

How do I add a responsive vertical line aside my text/title

3 Answers 3

Solution 1

Solution 2

Example

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Solution 1

Solution 2

Example

Comments

1 Comment

Comments

Related