A horizontal line will separate the title both before and after

Is there a way to create an hr line both before and after a title using Bootstrap 5? I have managed to add the lines, but I am struggling to align the title within a container class in order for the lines to span the width of the screen.

My current code snippet:

.decorated{
            overflow: hidden;
            text-align: center;
        }
        .decorated > span {
            position: relative;
            display: inline-block;
        }
        .decorated > span:before, .decorated > span:after {
            content: '';
            position: absolute;
            top: 50%;
            border-bottom: 2px solid;
            width: 591px; /* half of limiter*/
            margin: 0 20px;
        }
        .decorated > span:before {
            right: 100%;
        }
        .decorated > span:after {
            left: 100%;
        }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706e706c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
            <div class="col-md">
                <div class="col-md">
                    <div class="">
                        <div class="container">
                            <h1 class="decorated"><span>My Title</span></h1>
                        </div>
                    </div>
                </div>
            </div>

This is the desired result:

https://i.sstatic.net/2OUyg.png

htmlcssbootstrap-5

Answer №1

Try this simple CSS trick: create a parent element with the desired width, position a span within it, and style the span with a background color matching the parent's background.

.custom{
    overflow: hidden;
    position: relative;
}
.custom > span{
    display: inline-block;
    background: white;
    padding: 0 10px;
    position: relative;
    left: 20%;  /* adjust as needed */
}
.custom::before{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 2px solid;
    width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="badcd1d1cad8cfd9f7e6b2aba1abdbbabbbfab">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md">
        <div class="col-md">
            <div class="">
                <div class="container">
                    <h1 class="custom"><span>Title Here</span></h1>
                </div>
            </div>
        </div>
    </div>

Adjust the left value of the span to fine-tune the positioning.

Updated Version

To independently move the left and right lines of the design:

.custom{
    overflow: hidden;
    position: relative;
}
.custom > span{
    display: inline-block;
    background: white;
    padding: 0 10px;
    position: relative;
    
    /* adjust this to move the text itself */
    left: 20%;
}
.custom > span::before{
    content: ''; 
    width: 100vw;
    position: absolute; 
    left: -100vw;
    border-bottom: 2px solid blue;
    
    /* Adjust this to move the left line vertically */
    top: 40%;
}
.custom > span::after{
    content: ''; 
    width: 100vw;
    position: absolute; 
    right: -100vw;
    border-bottom: 2px solid red;
    
    /* Adjust this to move the right line vertically */
    top: 70%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa3aeaeadafaaadbbcfc4dcbc89839dedd5df97dacccdfcdf">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="col-md">
        <div class="col-md">
            <div class="">
                <div class="container">
                    <h1 class="custom"><span>Title Here</span></h1>
                </div>
            </div>
        </div>
    </div>

Answer №2

Your code seems very close to completion, but it appears that you have restricted the width of the two lines for some reason. The following snippet ensures they each span 100vw, guaranteeing they will be sufficiently long.

Furthermore, it eliminates the body margin and parent overflow (essential for allowing elements to reach the edge of the screen) and utilizes CSS calc to position the two lines 20px from the actual text edge instead of using margins which created extra space on both ends.

* {
  margin: 0;
}

.decorated {
  text-align: center;
}

.decorated>span {
  position: relative;
  display: inline-block;
}

.decorated>span:before,
.decorated>span:after {
  content: '';
  position: absolute;
  top: 50%;
  border-bottom: 2px solid;
  width: 100vw;
  /* margin: 0 20px; */
}

.decorated>span:before {
  right: calc(100% + 20px);
}

.decorated>span:after {
  left: calc(100% + 20px);
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4e4343585f585e4d5c6c19021c021e">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
  <div class="col-md">
    <div class="">
      <div class="container">
        <h1 class="decorated"><span>My Title</span></h1>
      </div>
    </div>
  </div>
</div>

Answer №3

Would the desired outcome be achieved by adding .container {margin: 0;} to the code?

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

In JavaScript/jQuery, there is a technique for retrieving the values of dynamically generated td attributes and the id tags of elements inside them within tr

I am currently working on creating a calendar of events using PHP, jQuery, and ajax. The calendar is embedded within an HTML table, where the rows and fields are dynamically generated based on the number of days in a specific month. In order to successfull ...

javascriptphpjqueryhtmlajax

Finding text outside of a HTML tag with jsoup

I am working with the following HTML code: Data <div class="alg"></div> <div class="alg"></div> Pepsi 791 <div class="alg"></div> <div class="alg"></ ...

htmljsoup

Using JWPlayer 6 and JWPlayer 7 simultaneously in one project - how is it done?

Trying to incorporate both JWPlayer 6 and JWPlayer 7 into my expressJS, AngularJS project has been a challenge. While they each work independently without issue, bringing them together has proven to be tricky. In my index.html file, I include them separat ...

javascripthtmlangularjsexpressjwplayer

Tips on attaching a class to elements in a loop when a click event occurs

In my HTML, I am displaying information boxes from an array of objects that are selectable. To achieve this, I bind a class on the click event. However, since I am retrieving the elements through a v-for loop, when I select one box, the class gets bound to ...

javascriptcssclassvue.js

Navigation menu with submenus containing buttons

I attempted to incorporate a dropdown into my existing navigation bar, but unfortunately, the dropdown content disappeared after adding the necessary code. I am now at a loss on how to troubleshoot this issue and make the dropdown function properly. Despit ...

javascripthtmljquerycssnav

What is the best way to connect added elements together?

I am currently utilizing Plupload to upload files. Due to specific requirements, I need to place FilesAdded "inside" init as demonstrated below. The issue I'm facing is the inability to utilize jQuery.remove() on elements that have been appended usin ...

jqueryhtmlplupload

Is there a way to activate a click event on a particular child element within a parent element?

When attempting to click on a specific descendant of an element, I located the ancestor using ng-class since it lacked an id. yes = document.querySelectorAll('[ng-controller = "inventoryController"]') Having found the desired ancestor, ...

javascripthtmlangularjs

Styling the background of a navigation menu specifically for mobile devices using CSS

Currently, my focus is on developing the website I am using Elementskit nav builder and I aim to change the background color of the navigation menu on mobile and tablet devices to black The existing code snippet is as follows: margin-top: 6px; } @med ...

htmlcssdrop-down-menu

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...

javascriptjquerycsscookiesdocument-body

PHP Linking Style Sheets

I am exploring the use of an HTML Diff Tool in PHP, specifically looking at this one: https://github.com/rashid2538/php-htmldiff. I am fetching the content of both pages using cURL and passing it to the HTML-Diff tool. It works perfectly fine, but there is ...

phpcss

Using httpRequest to handle binary data in JavaScript

Having trouble deciphering the response of an http request that is a binary datastream representing a jpeg image, despite numerous attempts. Edit: Including the full code snippet below: xmlhttp = false; /*@cc_on@*/ /*@if (@_jscript_versio ...

javascripthtmlxmlhttprequestbinary-dataresponsetext

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

I'm currently working on the design for a homepage where I want to showcase the same image repeated 4 times in a row, creating a decorative banner effect. Each image is set to occupy 25% of the screen width, which should theoretically fit perfectly si ...

csstwitter-bootstrap

Creating a two-column post loop in Wordpress is a great way to display content in a

I've been attempting to separate posts for a long time without success. No matter what variations I try, the result is always either a single post or duplicating all of them. In other words, multiple posts are not displaying as intended. If anyone ha ...

phpcsswordpress

Custom-designed background featuring unique styles

I have implemented the following code to create a continuous running banner: <style> #myimage { position: fixed; left: 0%; width: 100%; bottom: 0%; background:url("http://static.giga.de/wp-content/uploads/2014/08/tastatur-bild ...

javascriptjqueryhtmlcss

Sketch the borders of the element (animated)

Seeking a way to create a button with an animated border that looks like it is being drawn. Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners) https://codepen.io/anon/pen/MbWagQ & ...

javascriptjqueryhtmlcss

Preventing Text Chaos in CSS Layouts: Tips and Tricks

I'm facing an issue with the alignment on this page: . When the page is resized, some of the text links are too long and causing a problem with the layout of the stacked images. How can I fix this? Here is the HTML & CSS code for reference: CSS: #b ...

htmlcss

Sidenav Content with all elements having opacity applied

How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code: function openNav( ...

javascripthtmlcsswordpress

Is there a way to modify the image source upon clicking a button?

I am currently working on implementing an image swap functionality on a webpage. I need the image to change when a user clicks a button, but for some reason, my logic isn't working. I am more interested in understanding why it's not working and w ...

javascripthtml

Tips for utilizing document.write() with a document rather than just plain text

Currently, I am utilizing socket.io to develop a party game that shares similarities with cards against humanity. My main concern is how to retain the players' names and scores without needing to transmit all the data to a new page whenever new games ...

javascripthtmlnode.jssocket.io

Unable to open Google Maps link within React application

I've set up a conditional link based on location, using the following code: <a href={`https://maps.google.com/maps?q=${delivery_branch.latitude},${delivery_branch.longitude}`} target={"_blank"} >{`${delivery_branch.street}, ${d ...

javascripthtmlreactjs