Comment mutiple lines of code in the visual studio code

Following is the way to comment multiple lines of code in the visual studio  code

Shift+alt+a

All the VS code shortcuts can be found at VS keyboard shortcuts

Duplicate a line or selection within Visual Studio Code in windows

Following is the way to open duplicate a line or selection in the visual studio  code

Shift+alt+down and shift+alt+up

The associated keybindings can be seen by navigating to : File > Preferences > Keyboard Shortcuts from the menu 

Format or beautify code in Visual Studio Code

Following is the way to format the or beautify the code in the visual studio  code

 1)Use the shift+alt+f keyboard shortcut on Windows .
 2)Use the shift+option+f  keyboard shortcut on Mac.

How to open terminal in Visual studio Code

Following is the way to open the terminal in the visual studio  code

 1)Use the Ctrl+` keyboard shortcut.
 2)Navigate to View -> Integrated Terminal menu command.
 3)From the Command Palette (Ctrl+Shift+P), use the View:Toggle Integrated Terminal command.

WPF:The name does not exist in the namespace error in XAML

When i encountered this problem i have deleted .suo file and restarted my visual studio.Later i rebuilt the solution .The error was gone.

#deepstutorials:How do I get the value of a textbox using jQuery

The following code creates a form with a textbox

 <html>

<body>
<form>
First name: <input type="text" name="FirstName" id="firstName"><br>
Last name: <input type="text" name="LastName" id="lastName"><br>
<input type="submit" value="Submit">
</form>
<body>
</html>

 To access textbox using jquery ,following is the way

var firstName= $('#firstName').val();  //

$("#firstName").val("someValue")//Is used to set the value of textbox

#deepstutorials:Writing tooltips in bootstrap

The following code shows example to use bootstrap tooltip.

<html lang="en">
<head>
  <title>Bootstrap Example for tooltip</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="tooltip on top!">Tooltip Top</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="tooltip on bottom!">Tooltip Bottom</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="tooltip on left!">Tooltip Left</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="tooltip on right!">Tooltip Right</a></li>
  </ul>
</body>
</html>

Bootstrap example for tooltip

• Tooltip Top
• Tooltip Bottom
• Tooltip Left
• Tooltip Right

deepstutorials:Creating basic menu drop down using bootstrap

The following code creates a  basic drop down as shown below

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Menu
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
  </ul>
</div>
</div>
</body>
</html>

Basic Drop down  in bootstrap

• Menu item 1
• Menu item 2
• Menu item 3

deepstutorials:glyphicon bootstrap usage example

The following code creates an example to illustrate glyphicons.More glyphicons can be found at glyphicon website

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Glyphicon Examples</h2>
  <p>Envelope icon: <span class="glyphicon glyphicon-heart"></span></p>    
  <p>Envelope icon as a link:
    <a href="#"><span class="glyphicon glyphicon-heart"></span></a>
  </p>
  </div>
</body>
</html>

Glyphicon Examples

Envelope icon:
Envelope icon as a link:

deepstutorials: Vertical Navigation in bootstrap

The following code creates a vertical navigation using bootstrap as shown below

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Vertical Navigation Pills</h2>
   <ul class="nav nav-pills nav-stacked" role="tablist">
    <li class="active"><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Jquery</a></li>
    <li><a href="#">Bootstrap</a></li>        
  </ul>
</div>
</body>
</html>

Vertical Navigation in bootstrap

• Home
• HTML
• CSS
• About

deepstutorials: Bootstrap expand/Collapse Plugin

Bootstrap plugin is  used to create expandable/collapsible Panels.Below is the code

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapse1">
         Section 1 Content.Click me to expand.Click again to collapse
        </a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
      Section 1 Content.Click me to expand.Click again to collapse.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapse2">
      Section 2 Content.Click me to expand.Click again to collapse.
      
        </a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
       Section 2 Content.Click me to expand.Click again to collapse.
      
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapse3">
               Section 3 Content.Click me to expand.Click again to collapse.
         </a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">
        Section 3 Content.Click me to expand.Click again to collapse.
       </div>
    </div>
  </div>
</div>

 Section 1 Content.Click me to expand.Click again to collapse        
      

Section 1 Content .Click me to expand.Click again to collapse.

Section 2 Content.Click me to expand.Click again to collapse.

Section 2 Content.Click me to expand.Click again to collapse.

Section 3 Content.Click me to expand.Click again to collapse.

Section 3 Content.Click me to expand.Click again to collapse.

deepstutorials:Bootstrap:Radio buttons on the same line

Inline Radio Buttons gives users ability to place all the radio buttons on the same line by using the .radio-inline class .

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Form control: inline radio</h2>
    <form role="form">
    <label class="radio-inline">
      <input type="radio" value="">Radio Button 1
    </label>
    <label class="radio-inline">
      <input type="radio" value="">Radio Button 2
    </label>
    <label class="radio-inline">
      <input type="radio" value="">Radio Button 3
    </label>
    <label class="radio-inline">
      <input type="radio" value="">Radio Button 4
    </label>
  </form>
</div>
</body>
</html>

Form control: inline radio

Radio Button 1 Radio Button 2 Radio Button 3 Radio Button 4

deepstutorials:Boostrap:Radio buttons/Disabled Radio buttons

Radio Buttons are used to limit users to select single option.By using disabled class , we can change the state of radio to disabled.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>ac
</head>
<body>
<div class="container">
 <div class="radio">
  <label><input type="radio" value="">Radio Button 1</label>
</div>
<div class="radio disabled">
  <label><input  type="radio" value="" disabled>Radio Button 2</label>
</div>
  </div>
</div>
</body>
</html>

Radio Button 1

Radio Button 2

deepstutorials:Bootstrap:Create checkboxes on the same line using bootstrap

Inline Checkboxes gives users ability to place all the checkoxes in the same line by using the .checkbox-inline class .

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Form control: inline checkbox</h2>
    <form role="form">
    <label class="checkbox-inline">
      <input type="checkbox" value="">checkbox 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">checkbox 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">checkbox 3
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">checkbox 4
    </label>
  </form>
</div>
</body>
</html>

deepstutorials:Bootstrap Checkboxes/Disabled checkboxes

Checkboxes gives users ability to select multiple options.By using disabled class , we can change the state of checkbox to disabled.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="checkbox">
  <label><input type="checkbox" value="">CheckBox 1</label>
</div>
<div class="checkbox disabled">
  <label><input  type="checkbox" value="" disabled>CheckBox 2</label>
</div>
  </div>
</div>
</body>
</html>

CheckBox 1

CheckBox 2

deepstutorials:Bootstrap:Different button sizes

Buttons in bootstrap have  different sizes.They are

• .btn-xs
• .btn-sm
• .btn-md
• .btn-lg

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary  btn-lg">Large button</button>
    <button type="button" class="btn btn-primary  btn-md">Medium button</button>
    <button type="button" class="btn btn-primary  btn-sm">Small button</button>
    <button type="button" class="btn btn-primary  btn-xs">Xsmall button</button>
  </div>
</div>
</body>
</html>

Button Group

deepstutorials:Bootstrap:Active/Disabled Buttons

Button in bootstrap can have two states
1)Active
2)Disabled/Inactive state

Active is made using .active  class and .disabled makes it inactive/unclickable.

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Button1</button>
    <button type="button" class="btn btn-primary active ">Active button</button>
    <button type="button" class="btn btn-primary disabled">Disabled button</button>
  </div>
</div>
</body>
</html>

Button Group

deepstutorials:Print contents of modal window only using bootstrap

Got a requirement in mvc which has a  modal window .And i had to print the content of modal window only.After a lot of research i  came up with the following solution.Hopefully,this code might help someone out there :).You can find the solution at my jsfiddle link.

deepstutorials:bootstrap button groups example

The following code creates a button group as shown below

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Button Group</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">ButtonGroup1</button>
    <button type="button" class="btn btn-primary">ButtonGroup2</button>
    <button type="button" class="btn btn-primary">ButtonGroup3</button>
  </div>
</div>
</body>
</html>

Button Group

deepstutorials: Bootstrap modal popup not showing up

I tried to create a  bootstrap modal wrote the following code but when i ran it  on my browser and clicked the button, the popup shows only in milliseconds and then it closes again.Following is the solution.

Try this

<script src="js/bootstrap.js"></script> // This JS have all necessary files

Remove below JS from your file

<script src="js/bootstrap-modal.js"></script>