Display (Align) DropDownList on Right Side inside Bootstrap row

ramco1917
 
on Sep 02, 2022 12:39 AM
Sample_465332.zip
471 Views

Hi

In below code DropDownList is appearing in Normal Mode & on Left Side

It should appear on Right Side in Bootstrap

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header bg-transparent header-elements-inline" style="padding: 5px;">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <asp:DropDownList ID="ddlSelect" runat="server" class="form-select form-select-sm pull-right" AutoPostBack="true" OnSelectedIndexChanged="ddlSelect_SelectedIndexChanged">
                            <asp:ListItem Value="Today">Today</asp:ListItem>
                            <asp:ListItem Value="Upcoming">Upcoming</asp:ListItem>
                        </asp:DropDownList>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
KasimA
 
on Sep 04, 2022 12:13 AM
on Sep 04, 2022 12:14 AM

Hi ramco1917,

Set align-items-center and align-items-end class.

Please refer below sample.

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
<div class="container">
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header bg-transparent header-elements-inline" style="padding: 5px;">
                <h5 class="card-title">
                    <asp:Literal ID="ltrlSessionHead" runat="server" Text='Leads'></asp:Literal></h5>
                <div class="d-flex justify-content-end align-items-end">
                    <div>
                        <asp:DropDownList ID="ddlSelect" runat="server" class="form-select form-select-sm pull-right">
                            <asp:ListItem Value="Today">Today</asp:ListItem>
                            <asp:ListItem Value="Upcoming">Upcoming</asp:ListItem>
                        </asp:DropDownList>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Screenshot