Using bootstrap

less than 1 minute read

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Link : Bootstran Wiki

Link : Bootstrap 4.3 document

Link : w3school - Bootstrap4 document

Encoding/decoding example

The following example is one of the most commonly used encoding/decoding codes.

<!DOCTYPE html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>

        $(document).ready(function () {

            $("#base64encoding").click(function () {
            $("#base64decoding").click(function () {
            $("#urlencoding").click(function () {
            $("#urldecoding").click(function () {


    <div class="form-group">
        <textarea class="form-control" rows="2" id="strin" placeholder="Please input your text here."></textarea>
    <div id="strout" class="text-primary"></div>

    <div class="btn-group">
        <button type="button" class="btn btn-primary" id="base64encoding">Base64 Encode</button>
        <button type="button" class="btn btn-secondary" id="base64decoding">Decode</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary" id="urlencoding">URL Encode</button>
        <button type="button" class="btn btn-secondary" id="urldecoding">Decode</button>





Leave a comment