ASP.NET Dropdown for Months (Filled)

               <asp:DropDownList ID="ddlmonth" runat="server" CssClass="form-control">
                                    <asp:ListItem Text="January" Value="1"></asp:ListItem>
                                    <asp:ListItem Text="February" Value="2"></asp:ListItem>
                                    <asp:ListItem Text="March" Value="3"></asp:ListItem>
                                    <asp:ListItem Text="April" Value="4"></asp:ListItem>
                                    <asp:ListItem Text="May" Value="5"></asp:ListItem>
                                    <asp:ListItem Text="June" Value="6"></asp:ListItem>
                                    <asp:ListItem Text="July" Value="7"></asp:ListItem>
                                    <asp:ListItem Text="August" Value="8"></asp:ListItem>
                                    <asp:ListItem Text="September" Value="9"></asp:ListItem>
                                    <asp:ListItem Text="October" Value="10"></asp:ListItem>
                                    <asp:ListItem Text="November" Value="11"></asp:ListItem>
                                    <asp:ListItem Text="December" Value="12"></asp:ListItem>
               </asp:DropDownList>

How to make Tab using Bootstrap?

making tab in bootstrap is very simple, it just take a minute to understand this simple code...

<!--Start  tabs -->

<div>

  <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>

    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>

    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>

  </ul>

  <!-- Tab panes -->

  <div class="tab-content">

    <div role="tabpanel" class="tab-pane active" id="home">hello babby</div>

    <div role="tabpanel" class="tab-pane" id="profile">...</div>

    <div role="tabpanel" class="tab-pane" id="messages">...</div>

    <div role="tabpanel" class="tab-pane" id="settings">...</div>

  </div>

</div>

<!--End  tabs -->

<script>

$('#myTabs a').click(function (e) {

  e.preventDefault()

  $(this).tab('show')

})

</script>

How to make Popup or Modal using Bootstrap?

try this very simple code to make a popup :

<!-- Start Button trigger modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

  Launch demo modal

</button>

<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        ...your text or form here…

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

<!-- End Button trigger modal -->

<script>

$('#myModal').on('shown.bs.modal', function () {

  $('#myInput').focus()

})

</script>

How to make ToolTip using Bootstrap?

The code to create tooltip by using bootstrap is as follows :

<!-- Start ToolTip -->

<div class="container">

  <h3>Tooltip Example</h3>

  <p>Tooltips are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the tooltip() method.</p>

  <a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a>

</div>

<!-- End ToolTip -->

<script>

$(function () {

  $('[data-toggle="tooltip"]').tooltip()

})

</script>

How to make Responsive Navigation using Bootstrap?

Try the code given below to start a navigation design.

<!-- Start Navigation -->

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>                       

      </button>

      <a class="navbar-brand" href="#">WebSiteName</a>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Home</a></li>

        <li class="dropdown">

          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Page 1-1</a></li>

            <li><a href="#">Page 1-2</a></li>

            <li><a href="#">Page 1-3</a></li>

          </ul>

        </li>

        <li><a href="#">Page 2</a></li>

        <li><a href="#">Page 3</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>

        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>

    </div>

  </div>

</nav>

<!-- End Navigation -->

How to make Responsive Design using Bootstrap?

   
Follow these basic steps to get started to bootstrap design.

       1.      Use DOC into head in HTM5 before start the <html> Tag

             <!DOCTYPE html>

2.       Add language into HTMl tag

<html lang="en">

3.       Use Meta information likes:

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1;maximum-scale=1.0, user-scalable=no"">               

4.       Download or use online CSS from Bootstrap:

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

5.       Download or use online JS from Bootstrap:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

6. Download bootstrap from here