Posts

Showing posts with the label Bootstrap-4

Hide Show Password in Bootstrap

Image
 Hide Show Password   This tutorial teaches you how to create a password preview button in bootstrap login form . When the user clicks the preview button, the jQuery snippet captures the click event and changes the password type to text. In case if it is in text mode, it changes its type to password. Copy the code, save the file with index.html and preview it in Browser. Then you will see the output as shown in below image. Now click the preview button and check how it is working. If any question pleases comment below.   index.html <!DOCTYPE html> <html lang= "en" > <head> <title>Toggle password Example </title>   <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" >   <link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > <link rel= 'stylesheet' h...
Post a Comment
Read more

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim....
Post a Comment
Read more

How to center form using Bootstrap 4

Image
Learn How to center Form using Bootstrap 4       It is common for every designer, while creating a form, to align it in Center. To align Form in center using Bootstrap 4 , there are many ways. Method one  is, you can use bootstrap’s inbuilt classes, or you can create your own CSS class to center align the form. Here in this article, we are going to use an inbuilt class  to center align a form in Bootstrap 4. You can check out the following example. There is an inbuilt class called,  justify-content-center . Just add this class to the form div block, as shown in the given code below.  Method-1 center-form.html <!DOCTYPE html> <html> <head> <title>Coding-zon Demo How to center form in Bootstrap 4</title> <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" > </head> <body> <div class = "container" > <div class = "row justify-content-center"...
Post a Comment
Read more

Develop Bootstrap-4 Signup Form in PHP

Image
 How to Develop Bootstrap-4 Signup Form in PHP and MySQL   This article teaches you how to use bootstrap 4 in developing signup form. Bootstrap supports HTML form controls such as textbox, password, email, radio buttons, checkboxes, textarea, buttons and other controls available in html5. So Using some of these controls we are developing a signup form. This code also has MySQL code to store form data in a database. If needed, can enable those commented lines.          bs4-registration-form.php <!doctype html> <html lang= "en" > <head> <!-- Required meta tags --> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" > <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script...
Post a Comment
Read more

Embeding GoogleDrive-PDF In BloggerPost

Image
  How to embed PDF in web page or in Blogger Post It is common to share documents online. Sometimes it is needed to show the content of a document in the current webpage. For this you need to use the embed tag of HTML. In this tutorial we will follow a step-by-step procedure to get it done. In this article you are going to learn how to display Google Drive PDF in webpage. For embedding Google Drive PDF document in blogger or blog spot post or in HTML webpage . You need to change some settings of the document. So first… First Right-click the PDF document . Click on the " Share " option. Next choose share with Anyone option - by default it is selected to restricted access.  If you wish the document to be accessible to everyone, then  click Change to Anyone with the link as shown in the first picture  Click on Done button.  Long story short… Step-1 Go to Google Drive, select the PDF file you want to embed.   Right Click  >...
Post a Comment
Read more