Answered by:
Changing label position to the right

Question
-
User-1994446809 posted
Hello forum,
I have two label controls (1 and 0) in a <div col-md-6> tag; I want to place one label on the top right of the <div> tag and the other on the top left of the same <div>tag. But it appears that when these labels are inside a <div> tag, they seem not to respond to CSS or even javascript.
I want to put "1" to the left and "0" to the right.
below is my HTML and CSS
<style type="text/css> .lbl4{ float: right; } #lblupld{ float: left; } </style>
HTML
<div class="col-md-6"> <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;"> <div class="col p-4 d-flex flex-column position-static"> <div class="row" style="font-family:Comfortaa;font-size:12pt;font-weight:bolder;"> <asp:Label ID="recptlbl" runat="server" Text="1"/> <div class="lbl4"> <asp:Label ID="lblupld" runat="server" Text="0"></asp:Label> </div> </div> <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;"> <img alt="" src="images/indeximg/recpt.jpg" height="30" /> Reciepts</h3> <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa; background-color: steelblue;" ID="receiptbtn" OnClick="receiptbtn_Click"/> </div> </div> </div>
Monday, November 2, 2020 1:45 PM
Answers
-
User-939850651 posted
Hi georgeakpan233,
According to your description, I created a simple example using the code you provided, and I modified part of the style code:
<head runat="server"> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <title></title> <style type="text/css"> #recptlbl { width: 50%; } .lbl4 { width: 50%; } #lblupld { margin: 0; float: right; } </style> </head> <body> <form id="form1" runat="server"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;"> <div class="col p-4 d-flex flex-column position-static"> <div class="row" style="font-family: Comfortaa; font-size: 12pt; font-weight: bolder;"> <asp:Label ID="recptlbl" runat="server" Text="1" /> <div class="lbl4"> <asp:Label ID="lblupld" runat="server" Text="0"></asp:Label> </div> </div> <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;"> <img alt="" src="images/indeximg/recpt.jpg" height="30" /> Reciepts</h3> <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" Text="More Info" Style="font-family: Comfortaa; background-color: steelblue;" ID="receiptbtn" OnClick="receiptbtn_Click" /> </div> </div> </div> </div> </div> </form> </body>
Result:
If I misunderstood something, please let me know.
Best regards,
Xudong Peng
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, November 3, 2020 5:42 AM
All replies
-
User-939850651 posted
Hi georgeakpan233,
According to your description, I created a simple example using the code you provided, and I modified part of the style code:
<head runat="server"> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <title></title> <style type="text/css"> #recptlbl { width: 50%; } .lbl4 { width: 50%; } #lblupld { margin: 0; float: right; } </style> </head> <body> <form id="form1" runat="server"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;"> <div class="col p-4 d-flex flex-column position-static"> <div class="row" style="font-family: Comfortaa; font-size: 12pt; font-weight: bolder;"> <asp:Label ID="recptlbl" runat="server" Text="1" /> <div class="lbl4"> <asp:Label ID="lblupld" runat="server" Text="0"></asp:Label> </div> </div> <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;"> <img alt="" src="images/indeximg/recpt.jpg" height="30" /> Reciepts</h3> <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: Gadugi;">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" Text="More Info" Style="font-family: Comfortaa; background-color: steelblue;" ID="receiptbtn" OnClick="receiptbtn_Click" /> </div> </div> </div> </div> </div> </form> </body>
Result:
If I misunderstood something, please let me know.
Best regards,
Xudong Peng
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, November 3, 2020 5:42 AM -
User-1994446809 posted
Hi XuDong Peng,
Yes. It is working. Thank you. I don't know how to thank you well enough, I really appreciate your help.
Tuesday, November 3, 2020 9:11 AM