Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I noticed a problem with my buttons within an ASP page within the Twitter Bootstrap. It seems the only class that appears correctly is the "btn" class. If I would like to use "btn btn-primary" a grey gradient appears over my blue button. When I hover over the button it half of it turns blue. I've tried it with the other button styles and I get the same result.

I'm hoping the code below is correct:

<asp:button type="button" id="btnSearch" runat="server" CssClass="btn btn-primary" Text="Search"></asp:button>

Full HTML

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="header.aspx.vb" Inherits="Backend.header" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title></title>


<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />

</head>
<body>
<form id="masterSearch" runat="server">
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
          <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </a>

              <a class="brand" href="#">Company Name</a>

              <div class="nav-collapse collapse">
                  <ul class="nav">
                      <li><a href="cart.aspx">
                          <asp:Label ID="Label1" runat="server" Text="Cart"> </asp:Label></a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">History <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">New Order</a></li>
                              <li><a href="#">Order History</a></li>
                          </ul>
                      </li>
                      <li><a href="#">Invoices</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Returns <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Return Previous Order</a></li>
                              <li><a href="#">Return Policy</a></li>
                          </ul>
                      </li>
                      <li><a href="#">Rewards Balance</a></li>
                      <li><a href="#">Help</a></li>
                      <li><a href="#">Log Out</a></li>
                  </ul>
              </div>
          </div>
      </div>
    </div>

    <div id="wrap">
            <div class="row-fluid">

         <div class="container">

             <div class="span12">
                 <asp:Label ID="Label1" class="pull-right" runat="server" Text="Label"></asp:Label>
              </div>

       </div> <!--/container-->
   </div> <!--/row-->

    <hr />

    <div class="container">
        <div class="row-fluid">
            <div class="span2">Left Column</div><!--/left sidebar-->

            <div class="span8">
                <h5 class="pagination-centered">Search By...</h5>
                <div class="span12">

                        <input type="text" id="txtSearch1" placeholder="NDC#, Item#, Item Name..." runat="server" />
                        <asp:button type="button" id="btnSearch" runat="server" CssClass="btn btn-primary" Text="Search"></asp:button>       


                </div> <!--/search-->

                <div class="searchResults">
                    <table ID="tblSearchResults" class="table table-bordered">
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                             <Columns>


                                       <asp:BoundField HeaderText="Generic" DataField="ItemDesc" />
                                       <asp:BoundField HeaderText="Brand" DataField="BrandName" />
                                        <asp:BoundField HeaderText="Item Number" DataField="ItemNumber" />
                                        <asp:BoundField HeaderText="NDC" DataField="NDC" />
                                       <asp:BoundField HeaderText="Class" DataField="ControlLevel" />
                                        <asp:BoundField HeaderText="Price" DataField="Price" />
                                        <asp:TemplateField HeaderText="Qty">




                    <ItemTemplate>
                        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                    </ItemTemplate>
                </asp:TemplateField>
                             </Columns>
        </asp:GridView> 


                </table>

                </div>


            </div><!--/main content -->

            <div class="span2">Right Column</div><!--/right sidebar-->
        </div><!--/row-->

    </div> <!--/container -->












     <asp:button type="button" id="btnAdd" class=" btn btn-danger" runat="server" Text="Add to Cart"></asp:button> 
&nbsp;&nbsp;
    <asp:Button ID="btnCheckOut" runat="server" Text="Check Out" />






    </form>
   </body>
  </html>
share|improve this question
can you add the generated html of that asp page? – Roger Apr 11 at 15:43
The post has been updated with the full code. – Nina Morena Apr 11 at 15:59
1  
twitter bootstrap have nothing with asp. they just applied css from the class you gave to element. try firebug and it will work. – F1beta Apr 11 at 16:02
F1beta thank you. It seems like this issue only appears in IE9 & IE10. I will figure it out from there. – Nina Morena Apr 11 at 16:10
That is odd that that what you did isn't working. I have done the identical and it worked as you had anticipated. – Timothy Randall Apr 14 at 1:37

1 Answer

up vote 1 down vote

I don't necessarily remember 100% but after thinking about this a bit more, I think I ran into the same exact thing as you. In looking at some of my old code, I worked around this by using the Link Button instead of the Button control.

<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_ReportButton" OnClick="OnReportClick" Text="Report" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_DeleteButton" OnClick="OnDeleteClick" Text="Delete" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_EditButton" OnClick="OnEditClick" Text="Edit" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_QuoteButton" OnClick="OnQuoteClick" Text="Quote" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_ReplyButton" OnClick="OnReplyClick" Text="Reply" />

Thinking back I am almost certain I made this change simply to apply more than just the btn bootstrap class.

share|improve this answer
Timothy thank you. I will try to add this into my code sometime today and I will let you know the results. – Nina Morena Apr 15 at 16:02
@NinaMorena So ? It july now, and what happened ? – Milche Patern Jul 16 at 16:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.