css custom in gridview with asp.net/bootstrap

Question

Good night, I'm doing a simple post system with GRIDVIEW using ASP.NET / BOOTSTRAP, as gridview is a simple table I'm using templatefild and itemtemplate with table td and tr to be "LOOKING" with a BLOG! Until then everything ok, I managed to leave it in the order I want (title, date, abstract, link to see the whole post, author), but I wanted to apply CSS to these items of course, I wanted to leave something like this: HOW I WANT

Applying the bootstrap classes I can get this: WITH THE BOOTSTRAP

As you can see anything close to what I want, then I decided to make my own CSS, but nothing catches it, I create a class with my name, I'll print it in css, I apply the COLOR property for example and the font does not change color, the bootstrap classes work, mine do not! Remembering that I'm using WEBFORM + MASTER PAGE, then on my master page there's a fluid container, a row, and a column and inside that has the contentplaceholder! I have a gridview with colums, templatefild, item template, table, tr and td! I APPLY css in GRIDVIEW, but it does not handle! follows examples:

Master's code:

 <!-- CONTEUDO --> <div class="container-fluid bg-page"> <div class="row"> <div class="col-lg-8"> <asp:ContentPlaceHolder ID="conteudo" runat="server"> </asp:ContentPlaceHolder> </div>

Page code that is called within the contentplaceholder:

 <div class="container-fluid bg-page" id="conteudo"> <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, "titulo")%> </td> </tr> <tr> <td> <%# DataBinder.Eval(Container.DataItem, "data")%> </td> </tr> <tr> <td> <%# DataBinder.Eval(Container.DataItem, "descrição")%> </td> </tr> <tr> <td> <asp:Button ID="btn_visualizar" runat="server" Text="Visualizar" class="btn btn-link nav-link" CommandName="Visualizar" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "id")%>' /> </td> </tr> <tr> <td> <%# DataBinder.Eval(Container.DataItem, "autor")%> </td> </tr> </table> </ItemTemplate> </asp:TemplateField>

CSS code:

 .postagens{ color: aqua!important; } .postagens table{ color: aqua !important; } .postagens td{ color: aqua !important; } .postagens tr{ color:aqua !important; }

Answer 1

You cannot use a GridView with Bootstrap because it creates its own non-RWD table HTML. Look to using a ListView instead. There are tutorials out there on how to do it with a GridView but it's overkill and unnecessary since the ListView allows you to use your own responsive Bootstrap table markup in its template.