In this blog, I’m explaining how to make slider using Bootstrap in ASP.Net.
Introduction
Bootstrap is a Just like the toolbox. Twitter Bootstrap is basically use for elements like that Buttons, TextBox , Form, Dropdown List, Tab, Grid View, Progress Bar, and other things etc. Twitter Bootstrap provide even more valuable tools for your site such as layouts and widgets.
Example :-
In this example, first create an asp.net web application and Control Like That Button, TextBox, Label, we Want to show the How to Look TextBox and Button After Implement Bootstrap File.
Before Use Bootstrap File Like This:
Form Design:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ButtonAndTextBox.aspx.cs" Inherits="Demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<linkhref="Bootstrap/bootstrap.css"rel="stylesheet"/>
<linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
<linkhref="Content/LoginStyle.css"rel="stylesheet"/>
</head>
<body>
<formid="form1"runat="server">
<divclass="LoginDiv">
<fieldset>
<legend>Login</legend>
<divstyle="text-align: center;">
<divstyle="padding: 5px">
<spanstyle="margin-right: 40px">Email Id:</span>
<asp:TextBoxID="txtEmailID"Width="150px"Height="30px"runat="server">abc@gmail.com</asp:TextBox>
</div>
<divstyle="padding: 5px">
<spanstyle="margin-right: 30px">Password:</span>
<asp:TextBoxID="txtPassword"Width="150px"Height="30px"runat="server"TextMode="Password"></asp:TextBox>
</div>
<divstyle="margin-left: 180px; padding-top: 5px">
<asp:ButtonCssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover"ID="Btn_Login"runat="server"Text="Login"/>
</div>
<divstyle="text-align: center">
<asp:LabelID="lblError"runat="server"Text="UserId or Password is incorrect!"ForeColor="Red"Visible="False"></asp:Label>
</div>
</div>
</fieldset>
</div>
</form>
</body>
</html>
In this case you can only design form and link css file then automatic apply
css on your control.
After Using BootStrap File: -
<link href="Bootstrap/bootstrap.css" rel="stylesheet" />
<link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
Download and add the above two files into your projects because it’s mandatory for using the bootstrap libraries and methods.
Output TextBox
Button Look : -
Leave Comment