{"id":3520,"date":"2019-01-27T10:05:43","date_gmt":"2019-01-27T04:35:43","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=3520"},"modified":"2019-01-27T10:28:57","modified_gmt":"2019-01-27T04:58:57","slug":"how-to-section-counter-using-bootstrap-4","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/how-to-section-counter-using-bootstrap-4\/","title":{"rendered":"How TO &#8211; Section Counter using bootstrap 4"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">How TO &#8211; Section Counter using bootstrap 4<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Date posted :  27\/01\/2019<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog post,  learn how to create a &#8220;section counter&#8221; with CSS and BS4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">What is Section Counter?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A section counter is used to tell people how well their business is going, by displaying interesting numbers and its name differs according  to its applicable  scenes. If it is a college, it is known as &#8216;<strong>project counter<\/strong>&#8216; etc. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> Thus, below attached  snapshot  will clear you in understand the counters.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"236\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-27-at-9.02.31-AM-1024x236.png\" alt=\"\" class=\"wp-image-3521\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-27-at-9.02.31-AM-1024x236.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-27-at-9.02.31-AM-300x69.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-27-at-9.02.31-AM-768x177.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Using  Bs4 and css , we gone ah achieve this. <\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Source code for Html, Css, Jquery with Bootstrap 4<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Here, we are going to use a bootstrap 4 and style sheet for icons,Follow up or copy  the  below code and place it in a head tag.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted wp-block-syntaxhighlighter-code\">&lt;link href=\"\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.1.1\/css\/bootstrap.min.css\" rel=\"stylesheet\" id=\"bootstrap-css\"&gt;\n<a href=\"\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.1.1\/js\/bootstrap.min.js\">\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.1.1\/js\/bootstrap.min.js<\/a>\n<a href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\">\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js<\/a>\n&lt;!------ Include the above in your HEAD tag ----------&gt;\n<\/pre>\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\" &gt;\n   &lt;head&gt;\n      &lt;meta charset=\"UTF-8\"&gt;\n      &lt;title&gt;Project counter&lt;\/title&gt;\n      &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n      &lt;link rel='stylesheet' href='https:\/\/fonts.googleapis.com\/css?family=Open+Sans:400,700&amp;amp'&gt;\n      &lt;link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.4.0\/css\/font-awesome.min.css'&gt;\n      &lt;link rel=\"stylesheet\" href=\"css\/style.css\"&gt;\n   &lt;\/head&gt;\n   <div class=\"sectiontitle\">\n      <h2>Projects statistics<\/h2>\n   <\/div>\n   <div id=\"projectFacts\" class=\"sectionClass\">\n      <div class=\"fullWidth eight columns\">\n         <div class=\"projectFactsWrap \">\n            <div class=\"item wow fadeInUpBig animated animated\" data-number=\"12\">\n               <i class=\"fa fa-briefcase\"><\/i>\n               <p id=\"number1\" class=\"number\">12<\/p>\n               <span><\/span>\n               <p>Projects done<\/p>\n            <\/div>\n            <div class=\"item wow fadeInUpBig animated animated\" data-number=\"55\">\n               <i class=\"fa fa-smile-o\"><\/i>\n               <p id=\"number2\" class=\"number\">55<\/p>\n               <span><\/span>\n               <p>Happy professors<\/p>\n            <\/div>\n            <div class=\"item wow fadeInUpBig animated animated\" data-number=\"359\">\n               <i class=\"fa fa-coffee\"><\/i>\n               <p id=\"number3\" class=\"number\">359<\/p>\n               <span><\/span>\n               <p>Techie Students<\/p>\n            <\/div>\n            <div class=\"item wow fadeInUpBig animated animated\" data-number=\"246\">\n               <i class=\"fa fa-camera\"><\/i>\n               <p id=\"number4\" class=\"number\">100<\/p>\n               <span><\/span>\n               <p>Alumini survey<\/p>\n            <\/div>\n         &lt;\/div&gt;\n      &lt;\/div&gt;\n   &lt;\/div&gt;\n   <a href=\"http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js\" target=\"_blank\" rel=\"noopener\">http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js<\/a><\/pre>\n<p>\u00a0<\/p>\n<div class=\"sectiontitle\">\u00a0<\/div>\n<div id=\"projectFacts\" class=\"sectionClass\">\n<div class=\"fullWidth eight columns\">\n<div class=\"projectFactsWrap \">\u00a0<\/div>\n<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Adding <strong>attractive CSS<\/strong> property to it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url(https:\/\/fonts.googleapis.com\/css?family=PT+Sans+Narrow);\nbody {\n  font-family: Open Sans, \"Helvetica Neue\", \"Helvetica\", Helvetica, Arial,   sans-serif;\n  font-size: 13px;\n  color: #666;\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  margin: 0;\n}\n\n* {\n  -webkit-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\nbody, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {\n  margin: 0;\n  padding: 0;\n  font-size: 13px;\n  direction: ltr;\n}\n\n.sectionClass {\n  padding: 20px 0px 50px 0px;\n  position: relative;\n  display: block;\n}\n\n.fullWidth {\n  width: 100% !important;\n  display: table;\n  float: none;\n  padding: 0;\n  min-height: 1px;\n  height: 100%;\n  position: relative;\n}\n\n\n.sectiontitle {\n  background-position: center;\n  margin: 30px 0 0px;\n  text-align: center;\n  min-height: 20px;\n}\n\n.sectiontitle h2 {\n  font-size: 30px;\n  color: #222;\n  margin-bottom: 0px;\n  padding-right: 10px;\n  padding-left: 10px;\n}\n\n\n.headerLine {\n  width: 160px;\n  height: 2px;\n  display: inline-block;\n  background: #101F2E;\n}\n\n\n.projectFactsWrap{\n    display: flex;\n  margin-top: 30px;\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n\n#projectFacts .fullWidth{\n  padding: 0;\n}\n\n.projectFactsWrap .item{\n  width: 25%;\n  height: 100%;\n  padding: 50px 0px;\n  text-align: center;\n}\n\n.projectFactsWrap .item:nth-child(1){\n  background: rgb(16, 31, 46);\n}\n\n.projectFactsWrap .item:nth-child(2){\n  background: rgb(18, 34, 51);\n}\n\n.projectFactsWrap .item:nth-child(3){\n  background: rgb(21, 38, 56);\n}\n\n.projectFactsWrap .item:nth-child(4){\n  background: rgb(23, 44, 66);\n}\n\n.projectFactsWrap .item p.number{\n  font-size: 40px;\n  padding: 0;\n  font-weight: bold;\n}\n\n.projectFactsWrap .item p{\n  color: rgba(255, 255, 255, 0.8);\n  font-size: 18px;\n  margin: 0;\n  padding: 10px;\n  font-family: 'Open Sans';\n}\n\n\n.projectFactsWrap .item span{\n  width: 60px;\n  background: rgba(255, 255, 255, 0.8);\n  height: 2px;\n  display: block;\n  margin: 0 auto;\n}\n\n\n.projectFactsWrap .item i{\n  vertical-align: middle;\n  font-size: 50px;\n  color: rgba(255, 255, 255, 0.8);\n}\n\n\n.projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p{\n  color: white;\n}\n\n.projectFactsWrap .item:hover span{\n  background: white;\n}\n\n@media (max-width: 786px){\n  .projectFactsWrap .item {\n     flex: 0 0 50%;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Adding <strong>Jquery <\/strong>for counter <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n               $.fn.jQuerySimpleCounter = function( options ) {\n                   var settings = $.extend({\n                       start:  0,\n                       end:    100,\n                       easing: 'swing',\n                       duration: 400,\n                       complete: ''\n                   }, options );\n               \n                   var thisElement = $(this);\n               \n                   $({count: settings.start}).animate({count: settings.end}, {\n                     duration: settings.duration,\n                     easing: settings.easing,\n                     step: function() {\n                        var mathCount = Math.ceil(this.count);\n                        thisElement.text(mathCount);\n                     },\n                     complete: settings.complete\n                  });\n               };\n               \n               \n               $('#number1').jQuerySimpleCounter({end: 12,duration: 3000});\n               $('#number2').jQuerySimpleCounter({end: 55,duration: 3000});\n               $('#number3').jQuerySimpleCounter({end: 359,duration: 2000});\n               $('#number4').jQuerySimpleCounter({end: 246,duration: 2500});\n               \n               \n               \n               \/* AUTHOR LINK *\/\n                 $('.about-me-img').hover(function(){\n                        $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');\n                    }, function(){\n                        $('.authorWindowWrapper').stop().fadeOut('fast').find('p').removeClass('trans');\n                    });\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">By arranging all the above source code, you will get a end output in good manner and add your own icons for it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">End output:<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"206\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-27-at-9.56.08-AM-1024x206.png\" alt=\"\" class=\"wp-image-3524\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-27-at-9.56.08-AM-1024x206.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-27-at-9.56.08-AM-300x60.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-27-at-9.56.08-AM-768x155.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks for using pheonix solutions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How TO &#8211; Section Counter using bootstrap 4 Date posted : 27\/01\/2019 In this blog post, learn how to create [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[479,546,545,496,495,544],"class_list":["post-3520","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-bootstrap-4","tag-bs4","tag-counter","tag-css","tag-html","tag-section-counter","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-UM","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=3520"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3520\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=3520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=3520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=3520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}