I have a Repeater Control that is being used to generate div elements. While the DIV elements are successfully generated, the CSS formatting is not appearing correctly.
Below is my HTML Code:
<asp:Repeater ID="rptr" runat="server">
<ItemTemplate>
<div class="col-lg-4 col-md-4 col-sm-4 mb">
<a href="VendorProfile.aspx">
<div class="twitter-panel pn">
<i class="fa fa-twitter fa-4x"></i>
<%# DataBinder.Eval(Container.DataItem, "Name") %>
</div>
</a>
</ItemTemplate>
</asp:Repeater>
CSS:
.col-lg-4 {
width: 33.33333333%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-sm-4 {
width: 33.33333333%;
}
.mb {
margin-bottom: 25px;
}
.twitter-panel {
background: #4fc1e9;
text-align: center;
}
.pn {
height: 250px;
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-4x {
font-size: 4em;
}
I am considering adding float styling, but I am uncertain about it. Additionally, this is just a sample and in my project, there will be images in the background so there may not be any icons (like the twitter logo here).
If that's the case, should I create a custom CSS style specifically for this purpose?
Here is my C# code:
public partial class PastOrders : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["vendor"] != null)
{
if (!IsPostBack)
{
ArrayList values = new ArrayList();
values.Add(new Testing
{
Name = "Caterer"
});
values.Add(new Testing
{
Name = "Florist"
});
values.Add(new Testing
{
Name = "Cab Services"
});
rptr.DataSource = values;
rptr.DataBind();
}
}
else
{
Response.Redirect("VendorLogin.aspx");
}
}
public class Testing
{
public string Name { get; set; }
}
}