CODEWITHSUNDEEP
c#cssasp.nettwitter-bootstrap
T Dang
T Dang

Reputation: 157

How to make asp:buttons same width with bootstrap and css

I am making an asp website with bootstrap. I am wondering how do I make all asp button widths the same instead of padding the text with spaces. I created an alternate css file and used the css class tag. am i missing something?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="admin.aspx.cs"         Inherits="SCBA.admin" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Admin</title>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
    <style>
        .box {
            border:1px solid grey;
            background-color:#d3d3d3;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
             <script src="../Scripts/jquery.min.js"></script>
              <script src="../Scripts/boostrap.min.js"></script>
         <div class="navbar navbar-default">
            <div class="container">
                 <div class="navbar-header">
                        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Administration" />  <br />
                        <asp:Button ID="Button3" runat="server" cssClass="button1" onclick="Button3_Click" Text="Resource" />  
                 </div>
            </div>             
        </div>     
    </form>
</body>
</html>

Here is my CSS

.button1
{
    width: 200px;
}

Upvotes: 0

Views: 742

Answers (1)

IrishChieftain
IrishChieftain

Reputation: 15253

Depending on which browser you are using, learn to use the browser tools so you can inspect the HTML and CSS elements yourself.

Here are some steps to get you in the right direction:

  1. Look at the Bootstrap documentation for the button classes then override the relevant Bootstrap CSS class in your custom style sheet to change its appearance. Also, do NOT use fixed widths in responsive sites, use percentages. It looks like you are not leveraging the Bootstrap classes at all for this

    .NameOfBootstrapButtonClass { width: 25%; }

  2. Move your script links to just before the closing body tag

  3. Remove all inline CSS and CSS links - then from Solution Explorer drag the CSS files you need into the head section of your ASP page. This guarantees your links are correct but only applies if you are using VS
  4. Do not use minified CSS files in development - when deploying you will have all your min versions bundled up for performance. Personally, I comment out much of the bundling in the RegisterBundles method of the BundleConfig class when working locally
  5. If you're building a site you are going to have a lot of redundancy without the judicious use of master pages and user controls

  6. You have no viewport tag in the head so your site will not be responsive in any mobile browser

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  7. If you are supporting IE9 and IE8, you need to reference the Modernizr library. You need to give some thought to which browsers you need to support

  8. Remove the xmlns namespace attribute from the html tag

Upvotes: 1

Related Questions