ASPX CODE
<style>
* {
box-sizing: border-box;
}
/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
</style>
<div class="container bgwhite" style="border-top: 10px solid #4f6584;">
<div class="row" style="padding: 50px 0 30px 0;" >
<div class="card">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate >
<h2> <asp:Label ID="Label2" runat="server" Text='<%# Eval ("title") %>' style="width: 486px;"></asp:Label></h2><br />
<div id="Div1" runat="server" visible='<%# Eval("pic") != DBNull.Value %>'>
<asp:Image ID="Image1" ImageUrl='<%# "/pic/" + Eval("pic") %>' runat="server" style="height:355px; width: 486px;"></asp:Image>
</div>
<br />
<p> <asp:Label ID="Label3" runat="server" Text='<%# Eval ("article") %>'>'></asp:Label> </p>
<hr />
</ItemTemplate>
</asp:Repeater>
</div>
</div></div>
CS CODE
SqlCommand cmd = new SqlCommand("select * from TABLE ORDER BY id DESC ", con);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
Repeater1.DataSource = ds;
Repeater1.DataBind();