ASP.NET Styling Buttons Using Bootstrap CSS

ASP-NET Button CSS Bootstrap Style - Output 01

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

ASP-NET Button CSS Bootstrap Style – Output 01


1 thought on “ASP.NET Styling Buttons Using Bootstrap CSS”

  1. Pingback: Asp.net Button CSS • ParallelCodes();

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.