Technical Tutorials,Tips and tricks,Installations,Common Errors: February 2015

Wednesday, February 18, 2015

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

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

Sunday, February 15, 2015

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

Saturday, February 14, 2015

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

Saturday, February 7, 2015

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.

Resharper keyboard shortcuts

Resharper shortcuts cheat-sheet available in their website . Follow the link below

Resharper keyboard shorcuts list

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>

Technical Tutorials,Tips and tricks,Installations,Common Errors

Pages

Wednesday, February 18, 2015

deepstutorials:Bootstrap:Radio buttons on the same line

deepstutorials:Boostrap:Radio buttons/Disabled Radio buttons

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

deepstutorials:Bootstrap Checkboxes/Disabled checkboxes

Sunday, February 15, 2015

deepstutorials:Bootstrap:Different button sizes

Button Group

Saturday, February 14, 2015

deepstutorials:Bootstrap:Active/Disabled Buttons

Button Group

Saturday, February 7, 2015

deepstutorials:Print contents of modal window only using bootstrap

Resharper keyboard shortcuts

deepstutorials:bootstrap button groups example

Button Group

deepstutorials: Bootstrap modal popup not showing up

About Me

VisitorCount