Tips for positioning text above a dashed line in the blade template using Laravel and Bootstrap 4

I am working on a small Laravel project where I need to pass the variable {{$docno}} to a blade template. Below is the code snippet in the blade file.

    <body>
        <div class="container-fluid">
            <div class="text-center">
                <span><strong>Medical Certify</strong></span>
            </div>

            <div class="clearfix">
                <span class="float-left normal">Ref No..........</span>
                <span class="float-right normal" style="margin-top:-5px; position: relative">{{$docno}}</span>
                <span class="float-right normal">Doc no ............</span> 
            </div>  
        </div>
    </body>

Currently, I am facing an issue where I need to position the variable $docno above the dotted line on the right side. However, the current implementation is not working as expected. Any suggestions or guidance on how to achieve this would be highly appreciated. Thank you!

Answer №1

It might be more visually appealing if the text appears to be filled in on the dotted line. An alternative approach could be to incorporate a dotted line into the value itself. This ensures that the text is consistently aligned.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="clearfix">
    <span class="float-left d-inline-block pr-3">Ref No. </span>
    <span class="float-left d-inline-block" style="border-bottom: 1px dotted">{{$docno}}</span>
</div>  

Answer №2

Instead of trying to align the text with a row of dots, consider adding a border to a span element that surrounds your variable.

span {
  border-bottom: 2px dotted black;
}
<p>Document ID: <span>98762</span></p>

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

Using JavaScript to apply styling on images with overlays

I am currently facing an issue with placing an overlay on top of a background image. Despite my efforts, I am unable to get the background color to appear on top of the image. Any helpful suggestions on how to resolve this would be greatly appreciated. M ...

JavaFX Animation for Charting

My FXML file contains a JavaFX AreaChart <AreaChart id="myAreaChart" onMouseClicked="#handleAreaChartMouseClicked" GridPane.columnIndex="0" GridPane.rowIndex="0" fx:id="myAreaChart" > <xAxis> <Nu ...

Email Embedder - Incorporating HTML source code into email communications

I've encountered an issue where the CDNs (Bootstrap and FontAwesome) do not work when I embed my HTML source code into an email. Despite using inline styling throughout, the receiver still faces this problem. Any insights on why the CDNs are failing t ...

Ways to adjust iframe height as it loads

$('#song-link').change(function () { var link = $('#song-link').val(); SC.oEmbed(link, { element: document.getElementById('putTheWidgetHere') }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1 ...

What is the best way to set the width of an element to 100% while accounting for padding

My dilemma involves an HTML input field. The input currently has padding: 5px 10px;, but I need it to occupy 100% of its parent div's width (which is fluid). If I try using width: 100%;, the input ends up being wider than intended due to the padding ...

What is the method to execute jQuery code after the completion of a fade out effect?

I am attempting to fade out a div upon click while also adjusting some CSS properties. The problem I am encountering is that the CSS properties change during the fade out transition, instead of after it has completed. I would like the values to change onc ...

Tips for showcasing numerous images in a single row on a website

Looking to organize images into rows with 3/4 images in each row, not stacked vertically as shown below. Here is the code I have tried: <html> <head> <title>Images Displayed in Rows</title> <meta charset="utf-8"> <meta ...

Adjust the button's width as the text changes to create a dynamic animation

I'm trying to create an animation effect where the width of a button changes whenever the text inside it is updated. I've attempted using useRef on the button itself to grab its clientWidth and then applying that value to a CSS variable in order ...

How to add icons to HTML select options using Angular

Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag. Here is my current component setup: <select name="drpAccounts" class= ...

Flex Item will only respect the margin or padding when both are set simultaneously

I've been playing around with CSS and running into a problem where a flexbox item isn't respecting margin and padding correctly, causing the right side to have no margin. Here's a simplified example I came up with: <body> <div c ...

Showcasing Information Using AngularJS from a Json Array

My goal is to present data from a JSON array in a table using the code below. However, all the data is currently being shown in one row instead of each record appearing on separate rows with alternating colors - grey for even rows and white for odd rows. I ...

What symbol represents the share function in Unicode?

I've combed through Google, Stack Overflow, and various HTML character sites multiple times but have been unable to find the specific icon I'm looking for. Can someone please assist me with obtaining the HTML Unicode sequence for an icon that rep ...

Solve the issue of aligning two contents side by side using Bootstrap

I'm struggling to display two content items in one row. Here's my code snippet: <div class="row"> <div class="form-group"> <div class="col-lg-1"> <label>Insured First ...

Can Laravel run a Job without the necessity of the "job" property in the payload?

I am exploring the use of Laravel for handling jobs sourced from an external service, utilizing RabbitMQ as the queue driver. In this case, each job payload is essentially a serialized object. However, I have noticed that Laravel seems to require jobs to ...

Selenium encountered an error: Element not found - Could not locate element: {"method":"CSS selector","selector":"*[data-test="email-input"]}

Recently, my application has been encountering an error when trying to log in through a web form. The issue seems to be with locating the email input field: "no such element: Unable to locate element: {"method": "css selector", "s ...

Angular-ui-bootstrap-tabs feature smooth transitions when switching between tabs, but lacks animation when moving

Just made some updates to an example by user @austin Encountering an issue when trying to transition backwards (from tab3 to tab2), but it works fine when transitioning forward. I'm not sure what I'm missing here, so any help would be appreciate ...

A difference in the way content is displayed on Firefox compared to Chrome, Edge, and Safari

Recently, I encountered an issue with a tool I had developed for generating printable images for Cross-Stitch work. The tool was originally designed to work on Firefox but is now only functioning properly on that browser. The problem at hand is whether th ...

Tips for maximizing website performance on touch-enabled devices

When using a touch device such as an iPhone, iPad, or Android device, it can be challenging to accurately tap on small buttons with your finger. So far, there is no universal method in CSS media queries to detect touch devices. As a workaround, I check if ...

Styling CSS code to centrally align a background image in the footer of a

Within my MVC app, there is a footer displayed on every page that includes an image. I am looking to align the image in the center if possible. The current CSS code for the footer is as shown below: footer { position:absolute; bottom:-150px; /* Th ...

Adding Space Before Bullet Points in HTML: A Quick Guide

Is there a way to add space before bullet points? My requirements are as follows: This is paragraph 1 The first text line The second text line This is paragraph 2 The first text line The second text line I would greatly appreciate any ...