Hey there, I'm currently working on a post system using GRIDVIEW in ASP.NET/BOOTSTRAP. Since GRIDVIEW is basically a table, I am using templatefild and itemtemplate with table td and tr to make it resemble a BLOG! Everything is going well so far, I have managed to arrange it in the order I want (title, date, abstract, link to view the whole post, author). However, my goal is to apply CSS to these items to achieve a design like this: HOW I WANT
By applying the bootstrap classes, I can achieve a design like this: WITH THE BOOTSTRAP
As you can see, none of these options are exactly what I am looking for. Therefore, I attempted to create my own CSS style, but unfortunately, it doesn't seem to work. I created a class with my name, wrote the CSS code, applied the COLOR property, but the font color does not change. While bootstrap classes work perfectly fine, mine do not! Just a reminder, I am using WEBFORM + MASTER PAGE setup, where the master page contains a fluid container, a row, a column, and a contentplaceholder. Inside the contentplaceholder, there is a gridview with columns, templatefield, item template, table, tr, and td! I have tried applying CSS directly to the GRIDVIEW, but it is not reflecting. Here are some examples:
Master Page Code:
<!-- CONTENT -->
<div class="container-fluid bg-page">
<div class="row">
<div class="col-lg-8">
<asp:ContentPlaceHolder ID="content" runat="server">
</asp:ContentPlaceHolder>
</div>Page Code within Content Placeholder:
<div class="container-fluid bg-page" id="content">
<div class="row">
<div class="col-lg-12">
<asp:GridView ID="gdv_posts" runat="server" ShowHeader="false" CssClass="table table-striped" GridLines="None" AutoGenerateColumns="false" PageSize="5" OnRowCommand="gdv_posts_RowCommand" AllowPaging="True" OnPageIndexChanging="gdv_posts_PageIndexChanging">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table >
<tr >
<td>
<%# DataBinder.Eval(Container.DataItem, "title")%>
</td>
</tr>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "date")%>
</td>
</tr>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "description")%>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btn_view" runat="server" Text="View" class="btn btn-link nav-link" CommandName="View" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "id")%>' />
</td>
</tr>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "author")%>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>CSS Code:
.posts{
color: aqua!important;
}
.posts table{
color: aqua !important;
}
.posts td{
color: aqua !important;
}
.posts tr{
color:aqua !important;
}