Does bootstrap have builtin padding and margin classes?

Bootstrap 3 or older version doesn’t have this feature enabled. But Bootstrap 4 has this option built-in.
Bootstrap has many facility of classes to easily style elements if HTML. It includes a various of padding and margin classes for modification of the appearance of the element.
Here is the list of margin and padding classes for Bootstrap 3 or older version.

.m-0 { margin:0!important; }
.m-1 { margin:.25rem!important; }
.m-2 { margin:.5rem!important; }
.m-3 { margin:1rem!important; }
.m-4 { margin:1.5rem!important; }
.m-5 { margin:3rem!important; }

.mt-0 { margin-top:0!important; }
.mr-0 { margin-right:0!important; }
.mb-0 { margin-bottom:0!important; }
.ml-0 { margin-left:0!important; }
.mx-0 { margin-left:0!immortant;margin-right:0!immortant; }
.my-0 { margin-top:0!important;margin-bottom:0!important; }

.mt-1 { margin-top:.25rem!important; }
.mr-1 { margin-right:.25rem!important; }
.mb-1 { margin-bottom:.25rem!important; }
.ml-1 { margin-left:.25rem!important; }
.mx-1 { margin-left:.25rem!important;margin-right:.25rem!important; }
.my-1 { margin-top:.25rem!important;margin-bottom:.25rem!important; }

.mt-2 { margin-top:.5rem!important; }
.mr-2 { margin-right:.5rem!important; }
.mb-2 { margin-bottom:.5rem!important; }
.ml-2 { margin-left:.5rem!important; }
.mx-2 { margin-right:.5rem!important;margin-left:.5rem!important; }
.my-2 { margin-top:.5rem!important;margin-bottom:.5rem!important; }

.mt-3 { margin-top:1rem!important; }
.mr-3 { margin-right:1rem!important; }
.mb-3 { margin-bottom:1rem!important; }
.ml-3 { margin-left:1rem!important; }
.mx-3 { margin-right:1rem!important;margin-left:1rem!important; }
.my-3 { margin-bottom:1rem!important;margin-top:1rem!important; }

.mt-4 { margin-top:1.5rem!important; }
.mr-4 { margin-right:1.5rem!important; }
.mb-4 { margin-bottom:1.5rem!important; }
.ml-4 { margin-left:1.5rem!important; }
.mx-4 { margin-right:1.5rem!important;margin-left:1.5rem!important; }
.my-4 { margin-top:1.5rem!important;margin-bottom:1.5rem!important; }

.mt-5 { margin-top:3rem!important; }
.mr-5 { margin-right:3rem!important; }
.mb-5 { margin-bottom:3rem!important; }
.ml-5 { margin-left:3rem!important; }
.mx-5 { margin-right:3rem!important;margin-left:3rem!important; }
.my-5 { margin-top:3rem!important;margin-bottom:3rem!important; }

.mt-auto { margin-top:auto!important; }
.mr-auto { margin-right:auto!important; }
.mb-auto { margin-bottom:auto!important; }
.ml-auto { margin-left:auto!important; }
.mx-auto { margin-right:auto!important;margin-left:auto!important; }
.my-auto { margin-bottom:auto!important;margin-top:auto!important; }

.p-0 { padding:0!important; }
.p-1 { padding:.25rem!important; }
.p-2 { padding:.5rem!important; }
.p-3 { padding:1rem!important; }
.p-4 { padding:1.5rem!important; }
.p-5 { padding:3rem!important; }

.pt-0 { padding-top:0!important; }
.pr-0 { padding-right:0!important; }
.pb-0 { padding-bottom:0!important; }
.pl-0 { padding-left:0!important; }                             
.px-0 { padding-left:0!important;padding-right:0!important; }
.py-0 { padding-top:0!important;padding-bottom:0!important; }

.pt-1 { padding-top:.25rem!important; }         
.pr-1 { padding-right:.25rem!important; }                       
.pb-1 { padding-bottom:.25rem!important; }      
.pl-1 { padding-left:.25rem!important; }                            
.px-1 { padding-left:.25rem!important;padding-right:.25rem!important; }
.py-1 { padding-top:.25rem!important;padding-bottom:.25rem!important; }

.pt-2 { padding-top:.5rem!important; }                                              
.pr-2 { padding-right:.5rem!important; }                                
.pb-2 { padding-bottom:.5rem!important; }               
.pl-2 { padding-left:.5rem!important; }                                             
.px-2 { padding-right:.5rem!important;padding-left:.5rem!important; }
.py-2 { padding-top:.5rem!important;padding-bottom:.5rem!important; }

.pt-3 { padding-top:1rem!important; }                               
.pr-3 { padding-right:1rem!important; }             
.pb-3 { padding-bottom:1rem!important; }                
.pl-3 { padding-left:1rem!important; }                              
.py-3 { padding-bottom:1rem!important;padding-top:1rem!important; }
.px-3 { padding-right:1rem!important;padding-left:1rem!important; }

.pt-4 { padding-top:1.5rem!important; }                             
.pr-4 { padding-right:1.5rem!important; }               
.pb-4 { padding-bottom:1.5rem!important; }              
.pl-4 { padding-left:1.5rem!important; }                                
.px-4 { padding-right:1.5rem!important;padding-left:1.5rem!important; }
.py-4 { padding-top:1.5rem!important;padding-bottom:1.5rem!important; }

.pt-5 { padding-top:3rem!important; }   
.pr-5 { padding-right:3rem!important; } 
.pb-5 { padding-bottom:3rem!important; }    
.pl-5 { padding-left:3rem!important; }  
.px-5 { padding-right:3rem!important;padding-left:3rem!important; }
.py-5 { padding-top:3rem!important;padding-bottom:3rem!important; }

DEMO

Maxlength ignored for input type=“number” in Chrome

<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

DEMO

Save html form input to json file

Using Serializing we can save input html form to JSON output

<script type="text/javascript">
  $(document).ready(function() {
  $("#btn").click(function(e){
     var jsonData = {};

   var formData = $("#myform").serializeArray();
  // console.log(formData);

   $.each(formData, function() {
        if (jsonData[this.name]) {
           if (!jsonData[this.name].push) {
               jsonData[this.name] = [jsonData[this.name]];
           }
           jsonData[this.name].push(this.value || '');
       } else {
           jsonData[this.name] = this.value || '';
       }


   });
   console.log(jsonData);
    $.ajax(
    {
        url : "action.php",
        type: "POST",
        data : jsonData,

    });
    e.preventDefault(); 
});
});
</script>

HTML

<div id="header">
 Send Form's data as JSON
</div>

<form id="myform" type="post">
  <fieldset>
    <legend>Ajax Form  </legend>
    <p>We would love to hear from you. Please fill out this form</p>
    <div class="elements">
      <label for="name">Name :</label>
      <input  required="required" type="text"  value="Girish Kumar Santhu" name="fname"  size="20"  />
    </div>
     <div class="elements">
      <label for="Age">Age :</label>
      <input required="required" type="number" value="32" id="age" name="age" size="10" />
    </div>  
    <div class="elements">
      <label for="pro"> Profession :</label>
      <select name="pro">
   <option value="Student">Student</option>
   <option value="Engineer" selected="selected">Engineer</option>
   </select>
    </div>      
    <div class="elements">
    <label for="Gender">Gender: </label>
      <input type="radio" name="gender" value="Male" checked="checked" id="r1"> Male 
  <input type="radio" name="gender" value="Female" id="r2"> Female 
</div>  
    <div class="elements">
      <label for="hobby">Hobby :</label>
      <input type="checkbox" name="hobby[]" value="Sports" id="ch1" checked="checked"> Sports 
  <input type="checkbox" name="hobby[]" value="Coding"  id="ch2"> Coding 
   </div>

    <div class="submit">
       <input type="submit" id="btn" name="btn" class="btn" value="Submit" />
    </div>
    <span class="elements">Press "Ctrl + Shift + J" to see sent JSON in console: <span>
  </fieldset>
</form>

How can I select an element with multiple classes in jQuery?

Group Selector

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Becomes this:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Using this

$(".a.b") 

CSS3 selector to find the 2nd div of the same class

<h1> Target Bar Elements </h1>

<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>

.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}

DEMO
https://jsfiddle.net/ssuryar/6ka13xve/

How to use ng-option to set default value of select element

<select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
    <option value="">English(EN)</option>
    <option value="23">Corsican(CO)</option>
    <option value="43">French(FR)</option>
    <option value="16">German(GR)</option>

Just add option with empty value. It will work.

DEMO Plnkr
http://plnkr.co/edit/XBpdLMP53RR2Aec46NEJ?p=preview

Use multiple @font-face rules in…

Use multiple @font-face rules in CSS

How can I use more than @font-face rule in my CSS ?

@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Thin.otf);
    font-weight: 200;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Light.otf);
    font-weight: 300;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Regular.otf);
    font-weight: normal;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Bold.otf);
    font-weight: bold;
}
h3, h4, h5, h6 {
    font-size:2em;
    margin:0;
    padding:0;
    font-family:Kaffeesatz;
    font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }

[code] CSS: Change image src...

CSS: Change image src on img:hover

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

DEMO

http://jsfiddle.net/ssuryar/wcmHu/429/

Eclipse IDE Online

Chrome Extension Link

Eclipse online is a web extension that provides an integrated development environment (IDE) for Java and other programming languages like C, C++, PHP, and Ruby. It is a Java IDE by adding Java development components (JDT) and it is also a C/C++ IDE because it adds C/C++ development components (CDT). Other modules can extend the Eclipse funcionality for additional programming languages.

Its main features are:

  • Java, C, C++, PHP, Ruby projects Files arranged in package directories below one or more source folders.
  • Libraries located in the same project, another project, or external to the workspace.
  • Browse Java, C, PHP and Ruby projects In terms of Java-specific elements: packages, types, methods, and fields.
  • Java, C, PHP, Ruby source code editor.
  • Keyword and syntax coloring when editing the source code.
  • Separate outline that display the source code declaration structure.
  • Suggest how to resolve code issues.
  • Legal completions for methods and classes.
  • Refactoring.
  • Find declarations, procedures, packages, types, methods, and fields.
  • Integration with Java compiler and CC compiler.
  • Incremental compilation.
  • Include a console that provides stdout, stdin, stderr.
  • Debug Java, C, PHP and Ruby programs.
  • Set breakpoints and handle steps that go through the whole source code.
  • When debugging it can inspect and modify fields and local variables.

Further instructions can be found at http://www.eclipse.org.

This extension uses the platform http://www.offidocs.com from which this software is served.

#eclipse

How to Send Email With Attachment In Asp.Net

Sending email with attachment in ASP.Net with a simple coding. In this article I will show you, how you can do this.

Requirements

 

Index.aspx

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Index.aspx.cs” Inherits=”_Default” Debug=”true” %>

Place your Html tags here

<!– Form starts here –>
<label for=”exampleInputName”>Name</label>
<asp:TextBox ID=”txtName” runat=”server” class=”form-control” placeholder=”Name”></asp:TextBox>
<label for=”exampleInputEmail”>Email address</label>

<asp:TextBox ID=”txtEmail” runat=”server” class=”form-control” placeholder=”Enter Email”></asp:TextBox>
<label for=”txtcontact”>Contact no</label>
<asp:TextBox ID=”txtcontact” runat=”server” class=”form-control” placeholder=”Contact no”></asp:TextBox>
<label for=”txtjobTitle”>Job Title</label>
<asp:DropDownList ID=”txtjobTitle” runat=”server” class=”form-control”>
<asp:ListItem Text=”Select” Value=”0″></asp:ListItem>
<asp:ListItem Text=”Social Media Experts” Value=”1″></asp:ListItem>
<asp:ListItem Text=”Business Developement Executives” Value=”2″></asp:ListItem>
<asp:ListItem Text=”Copywriters” Value=”3″></asp:ListItem>
<asp:ListItem Text=”Graphic Designers” Value=”4″></asp:ListItem>
<asp:ListItem Text=”Web Designers” Value=”5″></asp:ListItem>
<asp:ListItem Text=”Animation Designers” Value=”6″></asp:ListItem>
</asp:DropDownList>
<label for=”txtjobExp”>Experience</label>
<asp:DropDownList ID=”txtjobExp” runat=”server” class=”form-control”>
<asp:ListItem Text=”Select” Value=”0″></asp:ListItem>
<asp:ListItem Text=”0-1″ Value=”1″></asp:ListItem>
<asp:ListItem Text=”1-3″ Value=”2″></asp:ListItem>
<asp:ListItem Text=”3-5″ Value=”3″></asp:ListItem>
</asp:DropDownList>
<label for=”exampleInputFile”>Upload Resume</label>
<asp:FileUpload ID=”fileUploader” runat=”server” />
<asp:Button ID=”bttn_Send” Text=”Submit” runat=”server” OnClick=”bttn_Send_Click” class=”btn” />

<!– Form ends here –>

Index.aspx.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Mail;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void bttn_Send_Click(object sender, EventArgs e)
{
string from = “info@suryarpraveen-wordpress.com”;
string textTo = “careers@suryarpraveen-wordpress.com”;
using (MailMessage mail = new MailMessage(from, textTo))
{

mail.Subject = “Careers – Surya R Praveen WordPress”;

mail.Body = string.Format(@”
Name: {0}
Email: {1}
Contact: {2}
Job: {3}
Experience: {4}
“, txtName.Text, txtEmail.Text, txtcontact.Text, txtjobTitle.SelectedItem.Text, txtjobExp.SelectedItem.Text);

if (fileUploader.HasFile)
{
string fileName = Path.GetFileName(fileUploader.PostedFile.FileName);
mail.Attachments.Add(new Attachment(fileUploader.PostedFile.InputStream, fileName));
}
mail.IsBodyHtml = false;
SmtpClient smtp = new SmtpClient();
smtp.Host = “mail.suryarpraveen-wordpress.com”;
smtp.EnableSsl = false;
NetworkCredential networkCredential = new NetworkCredential(from, “password@007”);
smtp.UseDefaultCredentials = true;
smtp.Credentials = networkCredential;
smtp.Port = 25;
smtp.Send(mail);
ClientScript.RegisterStartupScript(GetType(), “alert”, “alert(‘Message has been sent successfully.’);”, true);
}
}
}