Positioning Label controls in bootstrap Row using CSS

George616
 
on Nov 02, 2020 04:13 AM
Sample_162237.zip
1871 Views

I have two label controls in a "col-md-6" div tag. The two labels appear in the top-left of the tag. How do I shift the second label to the right? I tried to use CSS style – “float: right;” but it’s not working

HTML and CSS

                                <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=""/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                          &nbsp;<div class="lbl4"><asp:Label ID="lblupld" runat="server" Text=""></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>

 

#lbl4{
    float: right;
}

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Nov 03, 2020 12:43 AM

HiGeorge616,

Refer below code.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <div class="container">
        <div class="col-md-6">
            <div class="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;">
                        <div style="float: left; padding-left: 20px;">
                            <span id="recptlbl">Test Left</span>
                        </div>
                        <div style="float: right; padding-right: 20px;">
                            <span id="lblupld">Test Right</span>
                        </div>
                    </div>
                    <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                        <img alt="" src="https://i.imgur.com/73e8Dja.png" height="15" />&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>
                    <input type="submit" name="receiptbtn" value="More Info" id="receiptbtn" class="btn btn-lg btn-block btn-primary" style="font-size:X-Small;font-family: Comfortaa; background-color: steelblue;" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Demo