CSS problem: The vertical line does not extend far enough following the heading

I am encountering a small problem with my CSS code. I am trying to add a Vertical line after my heading using bootstrap utilities, but I am running into an issue.

Here is a real-time example of the code I am working on:

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdec5dac5d8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

  <title>Bootstrap</title>
</head>

<body class="bg-dark text-white">
  <div class="container mt-5">
    <h3 class="position-relative d-inline-block fw-bold">
      My Title Here
      <hr style="height: 2px;" class="position-absolute top-50 start-100 translate-middle-y opacity-100 w-100 my-0 ms-4 bg-primary" />
    </h3>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999ecf7e8f7ea">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Expected Outcome:

https://i.sstatic.net/INfjK.png

Thank you!

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

Ensure the <h3> tag is closed before the hr tag. Add display: inline-block; to the hr style. Remove the top and bottom margins set to 0 (my-0), as well as left: 100%; (start-100), and translate-middle-y. The combination of absolute positioning, margin-left, and w-100 is causing the hr to overflow. Adjust this by using w-75 instead.

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e554a5548">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

  <title>Bootstrap</title>
</head>

<body class="bg-dark text-white">
  <div class="container mt-5">
    <h3 class="position-relative d-inline-block fw-bold">My Title Here</h3>
      <hr style="height: 3px;" class="position-absolute opacity-100 w-75 ms-4 bg-primary d-inline-block">
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d38233c233e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Answer №2

A straightforward approach with flex can meet your requirements

<div style="display: flex;align-items: center;">
  <h3>
    Your Title Goes Here
  </h3>
  <hr style="height: 2px;flex: 1;margin-left: 8px;">
</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

Footer refusing to stay fixed at the bottom of the viewport

Currently, I am utilizing fullpage.js with scrolloverflow.js activated on the second section. In this setup, I would like to have a footer that remains fixed at the bottom of the viewport for the second section only. However, instead of achieving this desi ...

javascriptjqueryhtmlcssfullpage.js

Avoid altering the Summernote HTML WYSIWYG editor page due to content CSS

We are currently utilizing the Summernote wysiwyg editor to review and preview html content, some of which contains external stylesheet references. This css not only affects Summernote itself but also alters the styling of the parent page where Summernote ...

javascripthtmlcssrazorsummernote

Tips for positioning buttons using HTML and CSS

Looking for some help with my HTML page design. I have a few buttons that I want to style like this: https://i.stack.imgur.com/3UArn.png I'm struggling with CSS and can't seem to get them positioned correctly. Currently, they are displaying "bel ...

htmlcss

Tips for segmenting text into pages according to the dimensions of the viewport and the font style

Here's a puzzle for you. I have a horizontal slider that loads pages via Ajax, with pre-loading features to maintain smooth performance. Similar to Facebook Billboarding but with a slight twist. By determining the viewport size, I calculate boxSizeX a ...

javascriptjquerycssfonts

Is it possible for CKEditor Plugin to extend allowedContent to elements further down the hierarchy, or is there a way to deactivate the MagicLine for specific elements?

I am in the process of developing a Drupal module that is inspired by the CKEditor Accordion Module, but with a twist of using Bootstrap 4 instead. The generated HTML markup by this module looks something like this: <section class="accordion" id="Acco ...

javascriptjquerybootstrap-4ckeditordrupal-8

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

javascripthtmljqueryjquery-events

Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes. My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month The code I am using: $(document).ready(fu ...

javascriptjqueryhtmlcss

Using JavaScript to delete the initial option from a dropdown menu

Below is the code snippet: <select id="List" name="UserType" onChange ="hide"> <option value="0" disabled="disabled" selected="selected">User Type</option> <option value="1" onclick="hide">Administrator</option> ...

javascripthtmldrop-down-menuhide

Can you suggest a solution for fixing this error in Angular Js?

I recently started learning Angular JS and encountered some issues while trying to implement routing. Click here for the error message <!DOCTYPE html> Main <a href="#!london">City 1</a> <a href="#!paris">City 2& ...

javascripthtmlangularjs

Adjusting images of various sizes within a single row to fit accordingly

I am faced with a challenge of aligning a set of images on a webpage, each with varying heights, widths, and aspect ratios. My goal is to arrange them in a way that they fit seamlessly across the screen while ensuring their heights are uniform. Adjusting ...

javascripthtmlcss

Why aren't my messages showing up once I exit the textbox on my website?

After writing various functions to compare two passwords, I encountered an issue. My goal was for the message "The passwords match" or "Please enter your password again because the two passwords don't match" to be displayed when clicking out of the "v ...

javascripthtmlpasswords

Tips for aligning a flex element child vertically

I am trying to achieve a layout where there are 3 divs vertically centered in one flex container with flex-direction:column. However, I need the 3rd div to be positioned at the bottom of the container. To better illustrate what I am looking for, you can v ...

cssflexbox

Is there a way to use Selenium to perform testing on a web UI that generates XML content instead of HTML?

Utilizing Selenium for testing my Perl cgi script has been successful overall, but I've encountered a unique issue in one particular test case. In this scenario, the cgi script returns XML content to the web browser instead of the expected HTML conten ...

htmlxmlperlunit-testingselenium

Tips for positioning text directly beneath another text within the same list item:

I'm currently developing a vertical menu bar from scratch. To ensure responsiveness, I am using the CSS techniques demonstrated in Responsive Web Design by W3school. The menu consists of 5 list items with Font Awesome icons embedded within. I have set ...

htmlcss

Fading CSS Hover Popup Display and Hide

I am looking to create a CSS-only popup for an image that will appear when a user hovers over the image with their mouse. After researching on various platforms, such as this thread, I have developed the following solution: a.tooltip span { width: 250 ...

css

Using Bootstrap svg link in background-image not functioning correctly for radio buttons, checkboxes, and various other icons

I decided to give my Bootstrap design a personal touch by customizing it with my own styles. To do this, I copied an HTML page containing all the Bootstrap elements from bootswatch.com/default. After adjusting the directories in the "link" and "script" tag ...

twitter-bootstrapsvgbootstrap-4

Experiencing Difficulty Retaining Checkbox State Using LocalStorage Upon Page Reload

At the moment, I have a script that automatically clicks on a random checkbox whenever the page loads or refreshes. Through localStorage, I can also view the value of the input assigned to the randomly selected checkbox. However, I'm facing an issue ...

javascripthtmlcsslocal-storage

Achieve horizontal centering of modal without the use of jQuery

Currently, I am developing a modal within a React application. The modal's width is set to auto and its position is set to fixed. My goal is to center it horizontally in the middle of the screen. .Modal { position: fixed; width: auto; z- ...

htmlcssreactjs

employing JavaScript to present an image

Here is the image code I have: <img id="imgId" src="img/cart.png" style="display: none"/> After clicking a button, it triggers a JavaScript function to show the image document.getElementById("imgId").style.display = "inline" The image display ...

javascriptcss

Achieve vertical scrolling within a div of a set width employing CSS

My situation involves a fixed size div that is 500px in dimensions. Inside this div, there is a smaller div. However, as the number of divs increases, it starts to display a horizontal scroll. I am aiming for a vertical scroll instead. I attempted to resol ...

htmlcssuser-interfacewebvertical-scrolling