In this blog, I’m explaining how to make slider using Bootstrap in ASP.Net.


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 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="">
<head runat="server">
    <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" />
    <form id="form1" runat="server">
    <div class="LoginDiv">
                <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"></asp:TextBox>
                    <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 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 style="text-align: center">
                        <asp:Label ID="lblError" runat="server" Text="UserId or Password is incorrect!" ForeColor="Red" Visible="False"></asp:Label>

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
  Modified On Sep-18-2014 01:24:20 PM

Leave Comment