Showing Bootstrap flag in DropDownList inside GridView using CSS in ASP.Net

Hi mvadukul,

I have created sample code which fulfill your requirement and you need to modify as per your requirement.

HTML

<form id="form1" runat="server">
<div>
    <center>
        <asp:GridView ID="gvEmployees" AutoGenerateColumns="false" runat="server">
            <Columns>
                <asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Flag">
                    <ItemTemplate>
                        <div>
                            <ul class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                    aria-expanded="false"><i style="color: black; text-align: center;" class="fa fa-flag fa-1x">
                                    </i><span class="caret"></span></a>
                                <ul class="dropdown-menu" style="min-width: 50px; left: -1; min-height: 120px; padding: 20px 0;
                                    margin: 4px 0 0; border: 3px solid rgba(6, 172, 179, 0.15);">
                                    <center>
                                        <li><i style="color: black" class="fa fa-flag fa-1x"></i></li>
                                        <li><i style="color: Red" class="fa fa-flag fa-1x"></i></li>
                                        <li><i style="color: Green" class="fa fa-flag fa-1x"></i></li>
                                        <li><i style="color: Yellow" class="fa fa-flag fa-1x"></i></li>
                                    </center>
                                </ul>
                            </ul>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Customer Details">
                    <ItemTemplate>
                        <asp:Label ID="lblEmployeeName" Text='<% #Eval("Name")%>' runat="server" />
                        <asp:Label ID="Label1" Text='<%#Eval("Country")%>' runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </center>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
</div>
</form>

C#

private string config = ConfigurationManager.ConnectionStrings["Sqlconn"].ToString();
protected void Page_Load(object sender, EventArgs e)
{
    SqlConnection con = new SqlConnection(config);
    SqlCommand cmd = new SqlCommand("Select * From Customers", con);
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    sda.Fill(dt);
    gvEmployees.DataSource = dt;
    gvEmployees.DataBind();
}

Screenshot