Creating a line that extends from the left side of the viewport to the full length of an element within a bootstrap column

Question

Creating a line that extends from the left side of the viewport to the full length of an element within a bootstrap column

I'm currently working on creating a title that has a unique design:

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

The design requires a horizontal line to start from the left side of the viewport and end at the same point where the title ends. I am aiming to keep everything contained within a Bootstrap column. Here is the initial markup that I have:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec1dec1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>A great title</h2>
            </div>
        </div>
    </div>
</div>

I prefer to keep the HTML markup as it is without making major changes. Additional elements can be added inside the column without any issue. It is important to me that nothing is placed outside of the column div.

html css bootstrap-5

Answer 1

Answer №1

To create a title with a line underneath, you can use the following CSS:

.title-with-line {
  width: fit-content;
  border-top: 2px solid black;
  padding-left: calc(2em * 2);
  position: absolute;
  left: 0;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b3bebea5a2a5a3b0a191e4ffe0ffe0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>Our Services</h2>
            </div>
        </div>
    </div>
</div>

Answer 2

To create a title with a line underneath, you can use the following CSS:

.title-with-line {
  width: fit-content;
  border-top: 2px solid black;
  padding-left: calc(2em * 2);
  position: absolute;
  left: 0;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b3bebea5a2a5a3b0a191e4ffe0ffe0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>Our Services</h2>
            </div>
        </div>
    </div>
</div>

Answer 3

Answer №2

After much trial and error, I have finally discovered a solution that is responsive on any screen size. I am grateful for the helpful responses that directed me to this solution :

.title-with-line {
    position: relative;
    margin-top: 25px; /* This margin only to offset the line form the top of the body for demonstration */
}

.title-with-line h2 {
    position: relative;
    float: left;
}

.title-with-line h2:before {
    content: '';
    display: block;
    position: absolute;

    top: 0;
    right: 0;

    width: 100vw;
    height: 1px;

    background-color: black;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2978c938c93">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-12">

            <div class="title-with-line">
                <h2>An amazing heading</h2>
            </div>
        </div>
    </div>
</div>

Answer 4

After much trial and error, I have finally discovered a solution that is responsive on any screen size. I am grateful for the helpful responses that directed me to this solution :

.title-with-line {
    position: relative;
    margin-top: 25px; /* This margin only to offset the line form the top of the body for demonstration */
}

.title-with-line h2 {
    position: relative;
    float: left;
}

.title-with-line h2:before {
    content: '';
    display: block;
    position: absolute;

    top: 0;
    right: 0;

    width: 100vw;
    height: 1px;

    background-color: black;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2978c938c93">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-12">

            <div class="title-with-line">
                <h2>An amazing heading</h2>
            </div>
        </div>
    </div>
</div>

Answer 5

Answer №3

//To create a horizontal line, you can use the <hr> tag.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Here is an example</h1>
<hr>
<h2>Another example</h2>
</body>
</html>

Answer 6

//To create a horizontal line, you can use the <hr> tag.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Here is an example</h1>
<hr>
<h2>Another example</h2>
</body>
</html>

Answer 7

Answer №4

This snippet of code will get the job done

.title-with-line h2 {
  position:relative;
  padding-top:20px;
  display:inline-block;
}
.title-with-line h2:before {
  content:"";
  position:absolute;
  height:1px;
  background:black;
  right:0;
  top:10px;
  width: 50vw;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>A Great Title</h2>
            </div>
        </div>
    </div>
</div>

Answer 8

This snippet of code will get the job done

.title-with-line h2 {
  position:relative;
  padding-top:20px;
  display:inline-block;
}
.title-with-line h2:before {
  content:"";
  position:absolute;
  height:1px;
  background:black;
  right:0;
  top:10px;
  width: 50vw;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>A Great Title</h2>
            </div>
        </div>
    </div>
</div>

Creating a line that extends from the left side of the viewport to the full length of an element within a bootstrap column

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is a way to increase the boldness of an HTML anchor tag when hovering without using CSS, but by modifying the inline style?

Clicking on the icon reveals the current date

Expanding beyond the dimensions of the webpage, HTML CSS Height set to 100% creates a unique

When floating a heading 4 (h4) and two divs to the left, and a single div to the right,

Getting the URL of a CSS background image in NodeJS and Express: A step-by-step guide

Every time I attempt to input text into the text area, the page automatically refreshes, preventing me from completing any entries

Angular binding for selecting all data

Is Jade used for making subsequent lines children of an included partial?

do not display entries with expired duration

Utilizing a Web Interface for Remote Monitoring of Windows Servers

Guide on showing long blocks of text in MySQL without formatting restrictions

As the screen size shrinks, two components merge together

Captivating captions for captivating visuals. Pictures don't conform to a linear arrangement

Adjust the div container to wrap underneath the image if the webpage width decreases

Prevent automatic submission of forms when selecting attributes in HTML forms using AngularJS

Angular2 poses a strange problem with ngClass

Creating a dynamic full-width background image that adjusts its height according to the content: a step-by-step guide

Embed fashion and graph elements into a CSV document (generated from <script>)

Incorporating a CSS Stylesheet into an ASP.NET Custom Control

The Bootstrap container is extending beyond the boundaries of the page view