{"id":416,"date":"2024-10-25T09:45:59","date_gmt":"2024-10-25T09:45:59","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=416"},"modified":"2025-04-05T10:47:55","modified_gmt":"2025-04-05T10:47:55","slug":"create-responsive-dashboard-with-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/","title":{"rendered":"Create responsive dashboard in html, css and javascript"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"416\" class=\"elementor elementor-416\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d10aad e-flex e-con-boxed e-con e-parent\" data-id=\"5d10aad\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c6b8e5c elementor-widget elementor-widget-text-editor\" data-id=\"c6b8e5c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Creating a <a href=\"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/\"><strong>responsive dashboard with Bootstrap 4<\/strong><\/a> can make a tremendous difference in how users interact with the data on your website. In this guide, we&#8217;ll dive into creating a simple, interactive dashboard layout using HTML, CSS, and JavaScript with Bootstrap 4. By the end, you will have a strong foundation for building more dynamic and functional web applications. Let&#8217;s start by understanding the main components of this dashboard and the benefits of each.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dccd100 elementor-widget elementor-widget-heading\" data-id=\"dccd100\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why use Bootstrap 4 for Dashboard?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57e2147 elementor-widget elementor-widget-text-editor\" data-id=\"57e2147\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Bootstrap 4 is one of the most popular CSS frameworks for responsive web development. With its predefined grid system, reusable components, and responsive design, Bootstrap simplifies the creation of complex layouts, including dashboards. Here are some benefits:<\/p><ul><li><strong>Responsive by Default<\/strong>: Automatically adjusts the layout for various screen sizes.<\/li><li><strong>Predefined Components<\/strong>: Contains components like navigation bars, buttons, and forms that enhance functionality.<\/li><li><strong>Customizable<\/strong>: Easily integrates with custom CSS to tailor the look of your dashboard.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42e2513 elementor-widget elementor-widget-heading\" data-id=\"42e2513\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Structure of the Dashboard Layout<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ede98d0 elementor-widget elementor-widget-text-editor\" data-id=\"ede98d0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Our HTML structure is divided into two main parts:<\/p><ul><li><strong>Sidebar<\/strong>: Acts as a navigation menu with links for different dashboard sections.<\/li><li><strong>Main Content Area<\/strong>: Contains the header, navigation bar, and the main interactive components, including forms and text areas.<\/li><\/ul><p>Here\u2019s a breakdown of each section.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1af71b elementor-widget elementor-widget-heading\" data-id=\"c1af71b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Creating the Sidebar<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94f16d6 elementor-widget elementor-widget-text-editor\" data-id=\"94f16d6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The sidebar provides a fixed menu on the left side of the dashboard. In our example, we use a dark background to make it stand out from the main content area. We also add navigation links for different sections like Users, Reports and Settings. Here is the sidebar code snippet:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd00781 elementor-widget elementor-widget-code-highlight\" data-id=\"dd00781\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"bg-dark border-right\" id=\"sidebar-wrapper\">\n    <div class=\"sidebar-heading text-white\">Dashboard<\/div>\n    <div class=\"list-group list-group-flush\">\n        <a href=\"#\" class=\"list-group-item list-group-item-action bg-dark text-white\">Dashboard<\/a>\n        <a href=\"#\" class=\"list-group-item list-group-item-action bg-dark text-white\">Users<\/a>\n        <a href=\"#\" class=\"list-group-item list-group-item-action bg-dark text-white\">Reports<\/a>\n        <a href=\"#\" class=\"list-group-item list-group-item-action bg-dark text-white\">Settings<\/a>\n    <\/div>\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9013849 elementor-widget elementor-widget-heading\" data-id=\"9013849\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Main Content Area<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bb05ede elementor-widget elementor-widget-code-highlight\" data-id=\"bb05ede\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div id=\"page-content-wrapper\">\n    <!-- Navbar -->\n    <nav class=\"navbar navbar-expand-lg navbar-light bg-light border-bottom\">\n        <button class=\"btn btn-primary\" id=\"menu-toggle\"><i class=\"fa fa-bars\"><\/i><\/button>\n        <div class=\"navbar-brand ml-3\">Dashboard<\/div>\n        <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" \n                aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            <span class=\"navbar-toggler-icon\"><\/span>\n        <\/button>\n        <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\n            <ul class=\"navbar-nav ml-auto mt-2 mt-lg-0\">\n                <li class=\"nav-item active\">\n                    <a class=\"nav-link\" href=\"#\">Home<\/a>\n                <\/li>\n                <li class=\"nav-item\">\n                    <a class=\"nav-link\" href=\"#\">Profile<\/a>\n                <\/li>\n                <li class=\"nav-item\">\n                    <a class=\"nav-link\" href=\"#\">Settings<\/a>\n                <\/li>\n            <\/ul>\n        <\/div>\n    <\/nav>\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5ffb1b elementor-widget elementor-widget-heading\" data-id=\"d5ffb1b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Form Section<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-739b305 elementor-widget elementor-widget-text-editor\" data-id=\"739b305\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the form area, users can submit data along with title input and a message box. We&#8217;ve also integrated CKEditor for a rich text editing experience, making it ideal for inputting detailed content.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dce9bb8 elementor-widget elementor-widget-code-highlight\" data-id=\"dce9bb8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><div class=\"container pt-5\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-lg-5\">\n            <form action=\"<?php $_SERVER[\"PHP_SELF\"]?>\" method=\"POST\" onsubmit=\"return(Myfunction())\">\n                <div class=\"form-group\">\n                    <label>Enter Title<\/label>\n                    <input type=\"text\" name=\"title\" class=\"form-control\" placeholder=\"Title\">\n                <\/div>\n                <div class=\"form-group\">\n                    <textarea name=\"message\" id=\"newsletter\" rows=\"10\" cols=\"40\" class=\"form-control\" required placeholder=\"Write Message here\"><\/textarea>\n                <\/div>\n                <input type=\"submit\" name=\"submit\" class=\"btn btn-primary\" value=\"Submit\">\n            <\/form>\n        <\/div>\n    <\/div>\n<\/div><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd42098 elementor-widget elementor-widget-text-editor\" data-id=\"fd42098\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>CKEditor<\/strong>: Provides users with a WYSIWYG (What You See Is What You Get) editor, giving them formatting options.<\/li><li><strong>onsubmit=&#8221;return(Myfunction())&#8221;<\/strong>: Calls a JavaScript function to validate inputs before submission.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5a2f79 elementor-widget elementor-widget-heading\" data-id=\"c5a2f79\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"> Adding Interactivity with JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6784548 elementor-widget elementor-widget-text-editor\" data-id=\"6784548\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To validate input, we use a JavaScript function that checks if all required fields are filled. Here\u2019s the script:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-baf9d09 elementor-widget elementor-widget-code-highlight\" data-id=\"baf9d09\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>function Myfunction() {\n    var emailInput = document.getElementById(\"emailInput\").value;\n    var newsletter = document.getElementById(\"newsletter\").value;\n    if (emailInput === \"\") {\n        alert(\"Please Fill Email\");\n        return false;\n    } else if (newsletter === \"\") {\n        alert(\"Please Fill Subject\");\n        return false;\n    } else {\n        return true;\n    }\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-744f418 elementor-widget elementor-widget-heading\" data-id=\"744f418\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Loading Necessary Libraries<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff1db16 elementor-widget elementor-widget-text-editor\" data-id=\"ff1db16\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To implement Bootstrap and Font Awesome icons, we link external libraries in the &lt;head&gt; section, increasing functionality and design flexibility.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28bcfd0 elementor-widget elementor-widget-code-highlight\" data-id=\"28bcfd0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-359c66b elementor-widget elementor-widget-text-editor\" data-id=\"359c66b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>To make sure interactive elements work as expected, we also add jQuery, Popper.js, and Bootstrap JavaScript files.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a0771e7 elementor-widget elementor-widget-heading\" data-id=\"a0771e7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5fd379f elementor-widget elementor-widget-text-editor\" data-id=\"5fd379f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Creating a dashboard with Bootstrap 4 can significantly improve the user experience on your website. With a responsive design, a clearly separated sidebar, interactive elements, and easy integration with tools like CKEditor, you can provide users with a robust interface to manage their data. This dashboard setup is just the beginning \u2013 explore more Bootstrap features and add-ons to further enhance the layout, functionality, and visual appeal of your dashboard.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a63e5f e-flex e-con-boxed e-con e-parent\" data-id=\"8a63e5f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a2c6bb1 elementor-widget elementor-widget-shortcode\" data-id=\"a2c6bb1\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode449-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode449-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode449-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode449-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">Dashboard Source Code Download<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"dashboards.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Creating a responsive dashboard with Bootstrap 4 can make a tremendous difference in how users interact with the<\/p>\n","protected":false},"author":1,"featured_media":417,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,4],"tags":[39,42,40],"class_list":["post-416","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-htmlcss","category-javascript","tag-create-dashboard","tag-html-css-and-javascript-dashboard","tag-html-dashboard"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create responsive dashboard with html css and javascript -<\/title>\n<meta name=\"description\" content=\"Are you looking best responsive dashboard who created in html css and javascript then you can use for your website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create responsive dashboard with html css and javascript -\" \/>\n<meta property=\"og:description\" content=\"Are you looking best responsive dashboard who created in html css and javascript then you can use for your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-25T09:45:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-05T10:47:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-25-151424.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1352\" \/>\n\t<meta property=\"og:image:height\" content=\"612\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create responsive dashboard with html css and javascript -","description":"Are you looking best responsive dashboard who created in html css and javascript then you can use for your website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Create responsive dashboard with html css and javascript -","og_description":"Are you looking best responsive dashboard who created in html css and javascript then you can use for your website.","og_url":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2024-10-25T09:45:59+00:00","article_modified_time":"2025-04-05T10:47:55+00:00","og_image":[{"width":1352,"height":612,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-25-151424.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"Create responsive dashboard in html, css and javascript","datePublished":"2024-10-25T09:45:59+00:00","dateModified":"2025-04-05T10:47:55+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/"},"wordCount":473,"commentCount":2,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-25-151424.webp","keywords":["Create Dashboard","HTML CSS and Javascript dashboard","HTML Dashboard"],"articleSection":["HTML&amp;CSS","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/","url":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/","name":"Create responsive dashboard with html css and javascript -","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-25-151424.webp","datePublished":"2024-10-25T09:45:59+00:00","dateModified":"2025-04-05T10:47:55+00:00","description":"Are you looking best responsive dashboard who created in html css and javascript then you can use for your website.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-25-151424.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/10\/Screenshot-2024-10-25-151424.webp","width":1352,"height":612,"caption":"Dashboard in html and css"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/create-responsive-dashboard-with-html-css-and-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"Create responsive dashboard in html, css and javascript"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":46,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/416\/revisions"}],"predecessor-version":[{"id":1621,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/416\/revisions\/1621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/417"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}