{"id":16765,"date":"2018-01-19T19:16:56","date_gmt":"2018-01-19T13:46:56","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16765"},"modified":"2026-01-20T14:36:29","modified_gmt":"2026-01-20T09:06:29","slug":"mobile-responsive-dashboard-bootstrap","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/","title":{"rendered":"How to Build Mobile Responsive Dashboards with Bootstrap 2026"},"content":{"rendered":"How frequently do you use the internet while traveling, grabbing a quick lunch at your favorite restaurant, or unwinding after dinner? Isn&#8217;t that true quite often? And it is not always on the laptop that you access the internet.\r\n\r\nWith a lifestyle that requires you to be constantly on the move while also looking up information, having access to the internet on a variety of devices becomes essential. We previously discussed how internet usage has shifted from being limited to a laptop\/desktop to <a href=\"https:\/\/www.fusioncharts.com\/blog\/creating-responsive-dashboards-interactive-charts-bootstrap\/\" target=\"_blank\" rel=\"noopener noreferrer\">devices like tablets and smartphones<\/a>. in a blog post. The requirement for such accessibility also necessitates that websites be designed in such a way that browsing and navigation are not hampered when accessed via various devices. As a result, responsive web design has become popular.\r\n\r\nIn this post, we&#8217;ll go over the fundamentals of responsive web design as well as how to create <a href=\"https:\/\/www.fusioncharts.com\/dashboards\/google-analytics-web-dashboard\">Dashboard Creation<\/a> on mobile apps with bootstrap and fusioncharts.\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#What_is_Responsive_Web_Design\" title=\"What is Responsive Web Design?\">What is Responsive Web Design?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Advantages_of_Responsive_Web_Design\" title=\"Advantages of Responsive Web Design\">Advantages of Responsive Web Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Challenges_of_Responsive_Web_Design\" title=\"Challenges of Responsive Web Design\">Challenges of Responsive Web Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#FusionCharts_and_Responsive_Web_Design_Using_Bootstrap\" title=\"FusionCharts and Responsive Web Design [Using Bootstrap]\">FusionCharts and Responsive Web Design [Using Bootstrap]<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#The_Real-Time_Twitter_Hashtag_Tracker_Dashboard\" title=\"The Real-Time Twitter Hashtag Tracker Dashboard\">The Real-Time Twitter Hashtag Tracker Dashboard<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Technical_Implementation_of_the_Twitter_Hashtag_Tracker_Dashboard\" title=\"Technical Implementation of the Twitter Hashtag Tracker Dashboard\">Technical Implementation of the Twitter Hashtag Tracker Dashboard<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Twitter_Standard_Search_API\" title=\"Twitter Standard Search API\">Twitter Standard Search API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#TwitterOAuth_Library\" title=\"TwitterOAuth Library\">TwitterOAuth Library<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Stepwise_Documentation_for_Creating_Twitter_tag_Grabber\" title=\"Stepwise Documentation for Creating Twitter #tag Grabber\">Stepwise Documentation for Creating Twitter #tag Grabber<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Step_1\" title=\"Step 1\">Step 1<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Step_2\" title=\"Step 2\">Step 2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Step_3\" title=\"Step 3\">Step 3<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Step_4\" title=\"Step 4\">Step 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Step_5\" title=\"Step 5\">Step 5<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#Rendering_the_Real-Time_Twitter_Hashtag_Tracker_Dashboard_on_Other_Devices\" title=\"Rendering the Real-Time Twitter Hashtag Tracker Dashboard on Other Devices\">Rendering the Real-Time Twitter Hashtag Tracker Dashboard on Other Devices<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_Responsive_Web_Design\"><\/span>What is Responsive Web Design?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nResponsive web design is designing and coding websites in such a way that they can be viewed optimally on any device. A responsive website adjusts itself according to the screen resolution of the user\u2019s screen so that the user\u2019s experience is not hampered in any way.\r\n\r\nGiven how much internet usage is spread across devices, it comes as no surprise that responsive web design has now become an industry standard. Adopting responsive web design becomes even more essential when your digital marketing strategy strongly focuses on SEO.\r\n<h2><span class=\"ez-toc-section\" id=\"Advantages_of_Responsive_Web_Design\"><\/span>Advantages of Responsive Web Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nCustomer is king and if something guarantees a good user experience, then nothing like it. After all, user experience plays an important role in retaining existing and procuring new customers. But this isn\u2019t the only advantage that responsive web design has to offer.\r\n\r\nResponsive web design is a one-size-fits-all approach. This means it is not only simplified consumption for end users but also simplified development and management for developers.\r\n\r\nStudies show that users navigate away from a website that takes more than three seconds to load. Web page loading time improves considerably by using techniques like responsive image display and caching along with responsive web design.\r\n<h2><span class=\"ez-toc-section\" id=\"Challenges_of_Responsive_Web_Design\"><\/span>Challenges of Responsive Web Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nResponsive dashboard design, as said earlier, is a more simplified approach when compared to designing multiple websites for different platforms. That said, it still has certain challenges that developers have to face when creating a responsive website.\r\n\r\nContent\/element prioritization is one of the biggest challenges designers of responsive websites face. Therefore, it is important to figure out what needs to change and how it will be changed.\r\n\r\nGiven the limited real estate on mobile devices, rendering complex UI elements, navigation and layouts, and image scaling need a lot of planning. Although responsiveness reduces loading time, adding too many complex elements can slow it down, given that mobile internet is slower.\r\n\r\nTo summarize, when creating responsive websites, sensitivity towards what the user is looking for when browsing the website increases. Development takes more time as the smallest of details are considered and testing rounds are added to check every feature on every device.\r\n<h2><span class=\"ez-toc-section\" id=\"FusionCharts_and_Responsive_Web_Design_Using_Bootstrap\"><\/span>FusionCharts and Responsive Web Design [Using Bootstrap]<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<a href=\"https:\/\/www.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">FusionCharts Suite XT<\/a> is a JavaScript-based charting library that offers several different types of charts, widgets, maps, and dashboards. The suite includes standard charts that can be used across domains as well as charts suited for specific domains. In short, the charts and features that come with FusionCharts Suite XT will suit all your visualization requirements.\r\n\r\nFusionCharts can be easily integrated with Bootstrap to adopt responsive web design that takes your visualization experience a notch higher. An open-source, front-end framework, Bootstrap\u2019s most significant feature is its responsiveness to the client\u2019s screen resolution.\r\n\r\nLet\u2019s take a look at an example of a responsive dashboard\u2014FusionCharts\u2019 Real-Time Twitter Hashtag Tracker dashboard.\r\n<h2><span class=\"ez-toc-section\" id=\"The_Real-Time_Twitter_Hashtag_Tracker_Dashboard\"><\/span>The Real-Time Twitter Hashtag Tracker Dashboard<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe landing page of this dashboard, when rendered on a laptop\/desktop looks as shown below:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dshboard-landing-page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16773\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dshboard-landing-page.png\" alt=\"\" width=\"1366\" height=\"640\" srcset=\"\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dshboard-landing-page.png 1366w, \/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dshboard-landing-page-150x70.png 150w\" sizes=\"auto, (max-width: 1366px) 100vw, 1366px\" \/><\/a>\r\n\r\nIn the type #Hashtag to search field, enter the required hashtag. Press Enter or click the search icon button.\r\n\r\nThe Real-Time Twitter Hashtag Tracker dashboard looks as shown below:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-landing-page-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16770\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-landing-page-1.png\" alt=\"\" width=\"1348\" height=\"864\" srcset=\"\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-landing-page-1.png 1348w, \/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-landing-page-1-150x96.png 150w\" sizes=\"auto, (max-width: 1348px) 100vw, 1348px\" \/><\/a>\r\n\r\nThe Real-Time Twitter Hashtag Tracker dashboard is created using charts and maps from the FusionCharts library and Bootstrap 3 and 4 along with the Twitter Standard Search API and the TwitterOAuth Library. This dashboard displays the number of tweets tweeted with the searched hashtag at an instance in time.\r\n\r\nWe create this dashboard using charts and maps from the FusionCharts library and Bootstrap 3 and 4 along with the Twitter Standard Search API and the TwitterOAuth Library. This dashboard displays the number of tweets tweeted with the searched hashtag at an instance in time.\r\n\r\nThe dashboard shows:\r\n<ul>\r\n \t<li>The number of tweets for a hashtag in real-time using a spline chart<\/li>\r\n \t<li>Also, the number of people reached<\/li>\r\n \t<li>The number of original tweets and retweets for this hashtag using a doughnut chart<\/li>\r\n \t<li>Origin and location-wise percentage of tweets (worldwide) using the world map<\/li>\r\n<\/ul>\r\n<h2><span class=\"ez-toc-section\" id=\"Technical_Implementation_of_the_Twitter_Hashtag_Tracker_Dashboard\"><\/span>Technical Implementation of the Twitter Hashtag Tracker Dashboard<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h3><span class=\"ez-toc-section\" id=\"Twitter_Standard_Search_API\"><\/span><strong>Twitter Standard Search API<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nThe Twitter Standard Search API returns tweets that match a specific search query. To read more about this API, please visit the <a href=\"https:\/\/developer.twitter.com\/en\/docs\/tweets\/search\/api-reference\/get-search-tweets\">developer page<\/a>.\r\n<h3><span class=\"ez-toc-section\" id=\"TwitterOAuth_Library\"><\/span><strong>TwitterOAuth Library<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nTwitterOAuth Library is a PHP-based library and the most popularly used one for Twitter&#8217;s OAuth REST API. To know more about this library, please visit https:\/\/twitteroauth.com\/\r\n<h2><span class=\"ez-toc-section\" id=\"Stepwise_Documentation_for_Creating_Twitter_tag_Grabber\"><\/span>Stepwise Documentation for Creating Twitter #tag Grabber<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_1\"><\/span><strong>Step 1<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nGet the OAuth authentication access for the owner of the application. Click <a href=\"https:\/\/developer.twitter.com\/en\/docs\/basics\/authentication\/guides\/access-tokens\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to know about the authentication process.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_2\"><\/span><strong>Step 2<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nCreate a PHP file (tweet.php in our implementation) and provide the authentication token for a user\u2019s credentials there.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_3\"><\/span><strong>Step 3<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nAdd the search query given below in tweet.php for fetching information in the JSON format for the hashtag searched by the user.\r\n<pre class=\"lang:js decode:true\">$data = json_encode((array)$twitter-&gt;get('https:\/\/api.twitter.com\/1.1\/search\/tweets.json?q=%23'.$val.'&amp;result_type=recent&amp;count=100&amp;include_entities=true'), true);<\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Step_4\"><\/span><strong>Step 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nFrom the dashboard.js file, perform the AJAX call for fetching the resultant Twitter JSON data so that it can be consumed and relevant information can be visualized using the charts and maps supported by FusionCharts.\r\n<h3><span class=\"ez-toc-section\" id=\"Step_5\"><\/span><strong>Step 5<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nFetch the values from the Twitter JSON data source and convert them into the prescribed <a href=\"https:\/\/www.fusioncharts.com\/dev\/fusioncharts-aspnet-visualization\/getting-started\/create-first-chart-using-fusioncharts-net#converting-your-tabular-data-to-fusioncharts-suite-xt-jsonxml-format\" target=\"_blank\" rel=\"noopener noreferrer\">JSON structure<\/a> for FusionCharts for rendering <a href=\"https:\/\/www.fusioncharts.com\/charts\" target=\"_blank\" rel=\"noopener noreferrer\">different types of charts<\/a>.\r\n<h2><span class=\"ez-toc-section\" id=\"Rendering_the_Real-Time_Twitter_Hashtag_Tracker_Dashboard_on_Other_Devices\"><\/span>Rendering the Real-Time Twitter Hashtag Tracker Dashboard on Other Devices<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe images here show how the dashboard looks when rendered on different mobile devices.\r\n\r\nThe search page, as rendered on an iPad:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-ipad.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16767\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-ipad.png\" alt=\"\" width=\"1999\" height=\"1399\" srcset=\"\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-ipad.png 1999w, \/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-ipad-150x105.png 150w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><\/a>\r\n\r\nHere&#8217;s the dashboard, as rendered on an iPad:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-ipad-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16766\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-ipad-1.png\" alt=\"\" width=\"1999\" height=\"1399\" srcset=\"\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-ipad-1.png 1999w, \/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-ipad-1-150x105.png 150w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><\/a>\r\n\r\nThe search page, as rendered on an iPhone 8:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-iphone-8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16768\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-iphone-8.png\" alt=\"\" width=\"1758\" height=\"862\" srcset=\"\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-iphone-8.png 1758w, \/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-iphone-8-150x74.png 150w\" sizes=\"auto, (max-width: 1758px) 100vw, 1758px\" \/><\/a>\r\n\r\nNow, here&#8217;s the dashboard, as rendered on an iPhone 8:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-iphone-8-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16769\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-iphone-8-1.png\" alt=\"\" width=\"861\" height=\"1753\" srcset=\"\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-iphone-8-1.png 861w, \/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-iphone-8-1-74x150.png 74w\" sizes=\"auto, (max-width: 861px) 100vw, 861px\" \/><\/a>\r\n\r\nThe search page, as rendered on a Nexus:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-nexus.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16772\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-nexus.png\" alt=\"\" width=\"1999\" height=\"976\" srcset=\"\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-nexus.png 1999w, \/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-nexus-150x73.png 150w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\" \/><\/a>\r\n\r\nHere&#8217;s the dashboard, as rendered on a Nexus:\r\n<a href=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-nexus-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16771\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-nexus-1.png\" alt=\"\" width=\"971\" height=\"1999\" srcset=\"\/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-nexus-1.png 971w, \/blog\/wp-content\/uploads\/2018\/01\/fusioncharts-twitter-dashboard-nexus-1-73x150.png 73w\" sizes=\"auto, (max-width: 971px) 100vw, 971px\" \/><\/a>","protected":false},"excerpt":{"rendered":"<p>How frequently do you use the internet while traveling, grabbing a quick lunch at your favorite restaurant, or unwinding after dinner? Isn&#8217;t that true quite often? And it is not always on the laptop that you access the internet. With a lifestyle that requires you to be constantly on the move while also looking up [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16780,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"coauthors":[675,650],"class_list":["post-16765","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-showcase"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Build Mobile Responsive Dashboard Using Bootstrap<\/title>\n<meta name=\"description\" content=\"Build a responsive Twitter Hashtag Tracker. Use Bootstrap and FusionCharts to create a modern 2026 dashboard for real-time social analytics. Start today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Build Mobile Responsive Dashboard Using Bootstrap\" \/>\n<meta property=\"og:description\" content=\"Build a responsive Twitter Hashtag Tracker. Use Bootstrap and FusionCharts to create a modern 2026 dashboard for real-time social analytics. Start today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-19T13:46:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:06:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2016\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jonathan, Soumya Dutta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan, Soumya Dutta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Jonathan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\"\n\t            },\n\t            \"headline\": \"How to Build Mobile Responsive Dashboards with Bootstrap 2026\",\n\t            \"datePublished\": \"2018-01-19T13:46:56+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:29+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/\"\n\t            },\n\t            \"wordCount\": 1115,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png\",\n\t            \"articleSection\": [\n\t                \"Showcase\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/\",\n\t            \"name\": \"How To Build Mobile Responsive Dashboard Using Bootstrap\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png\",\n\t            \"datePublished\": \"2018-01-19T13:46:56+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:06:29+00:00\",\n\t            \"description\": \"Build a responsive Twitter Hashtag Tracker. Use Bootstrap and FusionCharts to create a modern 2026 dashboard for real-time social analytics. Start today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png\",\n\t            \"width\": 2016,\n\t            \"height\": 750,\n\t            \"caption\": \"responsive dashboard design in bootstrap\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Build Mobile Responsive Dashboards with Bootstrap 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\",\n\t            \"name\": \"Jonathan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"caption\": \"Jonathan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Build Mobile Responsive Dashboard Using Bootstrap","description":"Build a responsive Twitter Hashtag Tracker. Use Bootstrap and FusionCharts to create a modern 2026 dashboard for real-time social analytics. Start today.","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:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"How To Build Mobile Responsive Dashboard Using Bootstrap","og_description":"Build a responsive Twitter Hashtag Tracker. Use Bootstrap and FusionCharts to create a modern 2026 dashboard for real-time social analytics. Start today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2018-01-19T13:46:56+00:00","article_modified_time":"2026-01-20T09:06:29+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png","type":"image\/png"}],"author":"Jonathan, Soumya Dutta","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Soumya Dutta","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Build Mobile Responsive Dashboards with Bootstrap 2026","datePublished":"2018-01-19T13:46:56+00:00","dateModified":"2026-01-20T09:06:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/"},"wordCount":1115,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png","articleSection":["Showcase"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/","url":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/","name":"How To Build Mobile Responsive Dashboard Using Bootstrap","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png","datePublished":"2018-01-19T13:46:56+00:00","dateModified":"2026-01-20T09:06:29+00:00","description":"Build a responsive Twitter Hashtag Tracker. Use Bootstrap and FusionCharts to create a modern 2026 dashboard for real-time social analytics. Start today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png","contentUrl":"\/blog\/wp-content\/uploads\/2018\/01\/Twitter-Dashboard.png","width":2016,"height":750,"caption":"responsive dashboard design in bootstrap"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/mobile-responsive-dashboard-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build Mobile Responsive Dashboards with Bootstrap 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb","name":"Jonathan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","caption":"Jonathan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16765"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16765\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16780"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16765"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}