ASP.NET Styling Buttons Using Bootstrap CSS

ASH

7 years ago

Using Bootstrap in our ASP.NET Website application can make our web application responsive and make UI look more redefined and attractive to our users. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. So, let’s design ASP.NET Buttons using Bootstrap CSS.

Step 1 : Reference the Bootstrap StyleSheet in inside “<head>” tag of your ASP.NET page :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >

Step 2 :

Reference the CssClass property of your ASP.NET Button like :

<asp:Button runat="server" Text="btn-primary" CssClass="btn btn-primary" />

More Examples :

<div class="col-lg-10">
<asp:Button runat="server" Text="btn-primary" CssClass="btn btn-primary" />
&nbsp;&nbsp;&nbsp;
<asp:Button ID="Button1" runat="server" Text="btn-sucess" CssClass="btn btn-success" />
&nbsp;&nbsp;&nbsp;
<asp:Button ID="Button3" runat="server" Text="btn-danger" CssClass="btn btn-danger" />
&nbsp;&nbsp;&nbsp;
<asp:Button ID="Button4" runat="server" Text="btn-warning" CssClass="btn btn-warning" />
&nbsp;&nbsp;&nbsp;
<asp:Button runat="server" Text="btn-info" CssClass="btn btn-info" />
&nbsp;&nbsp;&nbsp;
<asp:Button runat="server" Text="btn-dark" CssClass="btn btn-dark" />
&nbsp;&nbsp;&nbsp;
<asp:Button runat="server" Text="btn-default" CssClass="btn btn-default" />
&nbsp;&nbsp;&nbsp;
<asp:Button runat="server" Text="btn-group" CssClass="btn btn-group" />

</div>

Full Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>BootStrap Buttons in ASP.NET</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="row" style="padding: 5px">
<h1>ASP.NET Button CSS - Using Bootstrap Styling</h1>
</div>
<div class="row" style="padding: 5px">

<div class="col-lg-10">
<asp:Button runat="server" Text="btn-primary" CssClass="btn btn-primary" />
&nbsp;&nbsp;&nbsp;
<asp:Button ID="Button1" runat="server" Text="btn-sucess" CssClass="btn btn-success" />
&nbsp;&nbsp;&nbsp;
<asp:Button ID="Button3" runat="server" Text="btn-danger" CssClass="btn btn-danger" />
&nbsp;&nbsp;&nbsp;
<asp:Button ID="Button4" runat="server" Text="btn-warning" CssClass="btn btn-warning" />
&nbsp;&nbsp;&nbsp;
<asp:Button runat="server" Text="btn-info" CssClass="btn btn-info" />
&nbsp;&nbsp;&nbsp;
<asp:Button runat="server" Text="btn-dark" CssClass="btn btn-dark" />
&nbsp;&nbsp;&nbsp;
<asp:Button runat="server" Text="btn-default" CssClass="btn btn-default" />
&nbsp;&nbsp;&nbsp;
<asp:Button runat="server" Text="btn-group" CssClass="btn btn-group" />

</div>
<br />
<br />
<div class="col-lg-10">
<asp:Button ID="Button2" runat="server" Text="btn-block" CssClass="btn btn-block" />
&nbsp;&nbsp;&nbsp;
</div>
</div>
</form>
</body>
</html>

Output :

ASP-NET Button CSS Bootstrap Style – Output 01

Share this: