Tag: Guide

JavaScript : Advantages and disadvantages of External JavaScript ?

by vikashdev kJavaScriptLeave a Comment on JavaScript : Advantages and disadvantages of External JavaScript ?

Advantages :

Following are the Advantages of javaScript over external :-

  • Reusability of code.
  • Easy code readability.
  • It Enables both web designers and coders to work with html and js files.
  • With these small js files, you can use Google closure or YUI Compressor or other minifying tools to reduce the size and make it not readable by humans .

Disadvantages :

Following are the disadvantages of javaScript over external :-

  • Code can be downloaded using the url of the js file. This can help coders to steal your code easily.
  • If two js files are dependent on one another, then a failure in one file may affect the execution of the other dependent file.
  • A small change to a common js file may cause unexpected results in some of the HTML files .
  • The browser has to make an extra http request to get the js code.
Tagged : / / / / / /

Bootstrap : Default Text Sizes

by vikashdev kBootstrapLeave a Comment on Bootstrap : Default Text Sizes

Bootstrap’s font sizes are calculated off of the body font size by using rem values. If you change
the body font size all styles will be increased/decreased automatically. Rem stands for “root em”
because it calculates the size based on the size of the root of the document or body tag.

Tag / ClassDefault Font size
body16px; line-height: 1.5;
font-family: “Helvetica Neue”, Helvetica, Arial,
sans-serif;
p, li1rem / 16px
h12.5rem / 40px
h1 small80% / 32px
h22rem / 32px
h2 small80% / 25.6px
h31.75rem / 28px
h3 small80% / 22.4px
h41.5rem / 24px
h4 small80% / 24px
h51.25rem / 20px
h5 small80% / 16px
h61rem / 16px
h6 small80% / 12.8px
.display-16rem / 90px
.display-25.5rem / 82.5px
.display-34.5rem / 67.5px
.display-43.5rem / 52.5px
Tagged : / / / / / / / / / / / / /

Bootstrap Utilities : “Visibility”

by vikashdev kBootstrapLeave a Comment on Bootstrap Utilities : “Visibility”

With visibility utilities you have control the visibility, without modifying the display, of elements.

Visibility simple exampleDownload
Tagged : / / / / / / / / / / / / / / / /

Bootstrap utilities : “Vertical align”

by vikashdev kBootstrapLeave a Comment on Bootstrap utilities : “Vertical align”

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Change the alignment of elements with the vertical-alignment utilities.

These are the classes:- .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

vertical align easy exampleDownload
Tagged : / / / / / / / / / / / / / / / / /

Bootstrap Utilities : Text

by vikashdev kBootstrapLeave a Comment on Bootstrap Utilities : Text

Text Utilities classes, contains various text properties, such as, text alignment, text wrapping, text overflow, text transformation, font weight, italics, monospace, resetting color of text, removing text decorations.

1. Text alignment :

  • .class text-justify
  • .class text-left
  • .class text-center
  • .class text-right
  • .class text-sm|md|lg|xl-left

2. Text wrapping and overflow :

  • .class text-wrap
  • .class text-nowrap
  • .class text-truncate

3. Word break :

  • .class text-break

4. Text transform :

  • .class text-lowercase
  • .class text-uppercase
  • .class text-capitalize

5. Font weight and italics :

  • .class font-weight-bold
  • .class font-weight-bolder
  • .class font-weight-normal
  • .class font-weight-light
  • .class font-weight-lighter
  • .class font-italic

6. Monospace :

  • .class text-monospace

7. Reset color :

  • .class text-muted

8. Text decoration

  • .class text-decoration-none
Tagged : / / / / / / / / / / / / /

Bootstrap Utilities : Spacing

by vikashdev kBootstrapLeave a Comment on Bootstrap Utilities : Spacing

Spacing helpers are useful for modifying the padding and margin of an element.

Where property is one of:

  1. m–sets margin
  2. p-sets padding

Sides is one of:-

  • t-sets margin-padding “top“
  • b-sets margin-padding “bottom“
  • l-sets margin-padding “left“
  • r-sets margin-padding “right“
  • x-sets padding left|right or margin left|right
  • y-sets padding top|bottom or margin top|bottom
  • blank-sets margin padding on all sides of the element

Size is one of:-

  • 0-sets m|p to 0
  • 1-sets m|p to .25rem
  • 2-sets m|p to .5rem
  • 3-sets m|p to 1rem
  • 4-sets m|p to 1.5rem
  • 5-sets m|p to 3rem
  • auto-sets margin to auto

Negative margin :-

  • n1-sets margin to -.25rem
  • n2-sets margin to -.5rem
  • n3-sets margin to -1rem
  • n4-sets margin to -1.5rem
  • n5-sets margin to -3rem
Spacing simple exampleDownload
Tagged : / / / / / / / / / / / / / / /

Bootstrap Utilities : “Screenreaders”

by vikashdev kBootstrapLeave a Comment on Bootstrap Utilities : “Screenreaders”

.sr-only class is used to hide an element in all device except screenreader.

Screenreader simple example but effect Download
Tagged : / / / / / / / / / / / /

Bootstrap utilities : “Position”

by vikashdev kBootstrapLeave a Comment on Bootstrap utilities : “Position”

Arrange the elements easily with the positioning utilities.

  • .fixed-top class is use to fix the element in the top position of the page.
  • .fixed-bottom class is use to fix the element in the bottom position of the page.
  • .sticky-top class is use to stick the element at the top of the page when you scroll past it.
Position fix element in page simple exampleDownload
Tagged : / / / / / / / / / /

hosts “Access Denied” C:\Windows\System32\drivers\etc\hosts

by vikashdev kUncategorisedLeave a Comment on hosts “Access Denied” C:\Windows\System32\drivers\etc\hosts

Step 01 : Copy hosts file

Copy hosts file and past in another local Disk E or F.

Step 02 : Open hosts file

Edit file and save in txt extension.

Step 03 : Change file name

Like hosts.txt -> hosts.file

Step 04 : In hosts file

Change hosts.file -> file name into -> hosts .

#file created successfully

Tagged : / / / / / / /

Bootstrap: Utilities “Image replacement”

by vikashdev kBootstrapLeave a Comment on Bootstrap: Utilities “Image replacement”

Bootstrap 4 image replacement is used to replace an element text content with a background image.

<h1 class="text-hide">Text declare </h1>  

<h1 class="text-hide" style="background-image: url('image link'); 
         background-repeat: no-repeat; 
         width: 500px; height: 500px; ">
    google
  </h1>
image replacement exampleDownload
Tagged : / / / / / / / /