Html Question posted in
Some basic documentation can be found here.

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

enter image description here

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>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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;
}

  2. 0

    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 */ }
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search