Remove From My Forums

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"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                          &nbsp;<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" />&nbsp;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" />&nbsp;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