Home > DeveloperSection > Blogs > Create Attractive TextBox Button using BootStrap in ASP.Net

Create Attractive TextBox Button using BootStrap in ASP.Net


Bootstrap Bootstrap 
Ratings:
0 Comment(s)
 13428  View(s)
Rate this:

Create Attractive TextBox Button using BootStrap in ASP.Net

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> 

    <link href="Bootstrap/bootstrap.css" rel="stylesheet" />

    <link href="Bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet" /> 

    <link href="Content/LoginStyle.css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">

    <div class="LoginDiv">

            <fieldset>

                <legend>Login</legend>

                <div style="text-align: center;">

                    <div style="padding: 5px">

                        <span style="margin-right: 40px">Email Id:</span>

                        <asp:TextBox ID="txtEmailID" Width="150px" Height="30px" runat="server">abc@gmail.com</asp:TextBox>

                    </div>

                    <div style="padding: 5px">

                        <span style="margin-right: 30px">Password:</span>

                        <asp:TextBox ID="txtPassword" Width="150px" Height="30px" runat="server" TextMode="Password"></asp:TextBox>

                    </div>

                    <div style="margin-left: 180px; padding-top: 5px">

                        <asp:Button CssClass="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>

                    <div style="text-align: center">

                        <asp:Label ID="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 : -



in my next post i'll explain about AutoComplete TextBox using BootStrap in ASP.Net

Don't want to miss updates? Please click the below button!

Follow MindStick