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=""/>
<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" /> 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
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" /> 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