htmlcsstwitter-bootstrap

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/bootstrap@4.0.0/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>

Solution

  • Solution 1

    As per TemaniAfif's comments:

    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:

    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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/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/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>