Bootstrap Tutorial - GeeksforGeeks

<!DOCTYPE html>    <html lang="en-US" prefix="og: http://ogp.me/ns#" >  <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0"> <link rel="shortcut icon" href="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_favicon.png" type="image/x-icon" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <meta name="theme-color" content="#308D46" /> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1' /> <meta name="image" property="og:image" content="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="200"> <meta property="og:image:height" content="200"> <meta name="facebook-domain-verification" content="xo7t4ve2wn3ywfkjdvwbrk01pvdond" /> <meta property="og:title" content="Bootstrap Tutorial - GeeksforGeeks" /> <meta name="description" content="Bootstrap is a widely-used front-end framework that facilitates the creation of responsive, mobile-first websites through pre-designed components, a flexible grid system, and extensive customization options." /> <meta property="og:url" content="https://www.geeksforgeeks.org/bootstrap/" /> <meta name="keywords" content="Bootstrap, front-end framework, responsive design, mobile-first websites, CSS components, JavaScript components, UI components, grid system, customizable, Bootstrap CDN, Bootstrap 5, form creation, JavaScript plugins, responsive typography, Bootstrap utilities" /> <meta property="og:site_name" content="GeeksforGeeks" /> <meta property="og:image" content="https://media.geeksforgeeks.org/wp-content/uploads/20240802165645/Bootstrap-Example-Output.PNG" /> <meta property="article:section" content="Web Technologies" /> <meta property="article:tag" content="Web-Tech Tutorials" /> <meta property="article:tag" content="Tutorials" /> <meta property="og:type" content="article" /> <meta property="og:locale" content="en_US" /> <meta property="article:published_time" content="2024-06-13 09:28:47+00:00" /> <meta property="article:modified_time" content="2024-12-14 19:08:02+00:00" /> <meta property="og:updated_time" content="2024-12-14 19:08:02+00:00" /> <meta property="og:image:secure_url" content="https://media.geeksforgeeks.org/wp-content/uploads/20240802165645/Bootstrap-Example-Output.PNG" /> <meta property="og:description" content="Bootstrap is a widely-used front-end framework that facilitates the creation of responsive, mobile-first websites through pre-designed components, a flexible grid system, and extensive customization options." /> <script src="https://cdnads.geeksforgeeks.org/synchronously_gfg_ads.min.js"></script> <script defer src="https://apis.google.com/js/platform.js"></script>        <script> var IHPWT={}; //Initialize Namespace var pbjs = pbjs || {}; pbjs.que = pbjs.que || []; var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; var gptRan = false; </script> <script defer src="https://ads.pubmatic.com/AdServer/js/pwt/162080/12331/pwt.js"></script> <script defer src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <script defer src="https://cdnads.geeksforgeeks.org/prebid.js?ver=0.1"></script> <script defer src="https://cdnads.geeksforgeeks.org/gfg_ads.min.js?ver=0.1"></script> <script> var quizData = JSON.parse("{}"); </script>  <script defer src="https://assets.geeksforgeeks.org/codetabs/v3/codetabs.js" environment="production" domain="gfg" no-scroll></script> <title>Bootstrap Tutorial - GeeksforGeeks</title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="" />     <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "id": "https://www.geeksforgeeks.org/bootstrap/" }, "headline": "Bootstrap Tutorial", "datePublished": "2024-06-13 09:28:47", "dateModified": "2024-12-14 07:08:02", "image": { "@type": "ImageObject", "url": "https://media.geeksforgeeks.org/wp-content/uploads/20240701151250/bootstrap-tutorial-copy-2.webp", "width": "1000", "height": "470" }, "author": { "@type": "Organization", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "logo": { "@type": "ImageObject", "url": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg", "width": "301", "height": "40" } }, "publisher": { "@type": "Organization", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "logo": { "@type": "ImageObject", "url": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg", "width": "301", "height": "40" } }, "description": "Bootstrap is a popular front-end framework for building responsive and mobile-first websites. It provides pre-designed CSS, JavaScript components, and utility classes to quickly create modern and consistent user interfaces.It Includes pre-built responsive grid systems for mobile-first design.Offers a wide range of UI components like buttons, modals, and navbars.Provides built-in support", "about": [ { "@type": "Thing", "name": "WebTechTutorials" }, { "@type": "Thing", "name": "Tutorials" }, { "@type": "Thing", "name": "Bootstrap" }, { "@type": "Thing", "name": "WebTechnologies" } ] }</script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "potentialAction": { "@type": "SearchAction", "target": "https://www.geeksforgeeks.org/search/{search_term_string}/", "query-input": "required name=search_term_string" } }</script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "GeeksforGeeks", "url": "https://www.geeksforgeeks.org/", "logo": "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png", "description": "A computer science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.", "founder": [ { "@type": "Person", "name": "Sandeep Jain", "url": "https://in.linkedin.com/in/sandeep-jain-b3940815" } ], "sameAs": [ "https://www.facebook.com/geeksforgeeks.org/", "https://twitter.com/geeksforgeeks", "https://www.linkedin.com/company/1299009", "https://www.youtube.com/geeksforgeeksvideos/" ] }</script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "What is Bootstrap used for?", "acceptedAnswer": { "@type": "Answer", "text": "Bootstrap is used for developing responsive and visually appealing web pages and applications. It offers a variety of pre-designed components, such as navigation bars, buttons, forms, and modals, that help developers quickly create consistent and functional user interfaces." } }, { "@type": "Question", "name": "What is Bootstrap CDN?", "acceptedAnswer": { "@type": "Answer", "text": "Bootstrap CDN (Content Delivery Network) is a service that allows developers to include Bootstrap’s CSS and JavaScript files in their projects without needing to host them locally." } }, { "@type": "Question", "name": "What is the current Bootstrap version?", "acceptedAnswer": { "@type": "Answer", "text": "As of the most recent update, the current stable version of Bootstrap is Bootstrap 5. Bootstrap 5 includes new features, enhancements, and changes compared to previous versions, such as the removal of jQuery dependency and improved customizability." } }, { "@type": "Question", "name": "Is Bootstrap a free framework?", "acceptedAnswer": { "@type": "Answer", "text": "Yes, Bootstrap is a free and open-source framework. It is available for anyone to use and modify, making it accessible to developers of all levels." } }, { "@type": "Question", "name": "Which is better, Tailwind or Bootstrap?", "acceptedAnswer": { "@type": "Answer", "text": "The choice between Tailwind and Bootstrap depends on your project needs and preferences.Bootstrap: Offers a comprehensive set of pre-styled components and a grid system, making it easier to quickly build and customize web pages with a consistent design.Tailwind CSS: Provides a utility-first approach, allowing for more granular and flexible customization of styles without predefined components." } }, { "@type": "Question", "name": "Can I customize Bootstrap?", "acceptedAnswer": { "@type": "Answer", "text": "Yes, Bootstrap is highly customizable. You can override default styles using custom CSS or modify Bootstrap’s SASS variables to change the look and feel of components globally." } } ] }</script> <script> var arrPostCat = new Array(); var arrPostCatName="Bootstrap"; arrPostCat.push('3616'); arrPostCat.push('2628'); var tIds = "3616,2628,7858,6527"; var termsNames = "Bootstrap,WebTechnologies,WebTechTutorials,Tutorials"; var tIdsInclusiveParents = "3616,2628,7858,6527"; var domain = 1; var arrPost = new Array(); var post_id = "1270247"; var post_type = "post"; var post_slug = window.location.href; var ip = "64.252.72.102"; var post_title = `Bootstrap Tutorial`; var post_status = "publish"; var practiceAPIURL="https://practiceapi.geeksforgeeks.org/"; var practiceURL="https://practice.geeksforgeeks.org/"; var post_date = "2024-06-10 16:40:01"; var commentSysUrl = "https://discuss.geeksforgeeks.org/commentEmbedV2.js"; //var postAdApiUrlString = ""; var link_on_code_run = ''; var link_search_modal_top = ''; var country_code_cf = "PK"; var postAdApiUrlString = '2628/3616/2628/7858/6527/'; </script>  <link rel="canonical" href="https://www.geeksforgeeks.org/bootstrap/" /> <script type='application/ld+json'>{"@context":"https:\/\/schema.org","@type":"Organization","url":"https:\/\/www.geeksforgeeks.org\/","sameAs":[],"@id":"https:\/\/www.geeksforgeeks.org\/#organization","name":"GeeksforGeeks","logo":"http:\/\/www.geeksforgeeks.org\/wp-content\/uploads\/gfg_200X200-1.png"}</script>  <link rel='dns-prefetch' href='//cdn.geeksforgeeks.org' /> <link rel='dns-prefetch' href='//s.w.org' /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/11\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.geeksforgeeks.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.8"}}; !function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55358,56760,9792,65039],[55358,56760,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='custom-style-css' href='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/css/gfg.min.css?ver=11.88' type='text/css' media='all' /> <script type='text/javascript' src='https://code.jquery.com/jquery-3.7.1.min.js?ver=3.7.1'></script> <script type='text/javascript' src='https://code.jquery.com/jquery-migrate-3.5.2.min.js?ver=3.5.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var gfgObject = {"authUrl":"https:\/\/auth.geeksforgeeks.org\/","writeApiUrl":"https:\/\/apiwrite.geeksforgeeks.org\/","writeUrl":"https:\/\/write.geeksforgeeks.org\/","utilUrl":"https:\/\/util.geeksforgeeks.org\/","apiUrl":"https:\/\/api.geeksforgeeks.org\/","cfApiUrl":"https:\/\/gfgapi.geeksforgeeks.org\/","baseCompilerURL":"https:\/\/codejudge.geeksforgeeks.org\/","idePageBaseUrl":"https:\/\/ide.geeksforgeeks.org\/","gfgApiScriptUrl":"https:\/\/apiscript.geeksforgeeks.org\/","gfgSiteUrl":"https:\/\/www.geeksforgeeks.org\/","curatedListId":"1","curatedListTitle":"SDE Sheet Problems","utilDjangoCfUrl":"https:\/\/utilapi.geeksforgeeks.org\/","premiumCheckoutSlug":"premium-plans-payment\/","premiumLandingSlug":"premium-plans\/","premiumCssUrl":"https:\/\/www.geeksforgeeks.org\/wp-content\/themes\/iconic-one\/css\/gfgpremium.min.css?ver=1.6","premiumJsUrl":"https:\/\/www.geeksforgeeks.org\/wp-content\/themes\/iconic-one\/js\/gfgpremium.min.js?ver=1.5","utilGoogleUrl":"https:\/\/ugprod.geeksforgeeks.org\/","communityApiUrl":"https:\/\/communityapi.geeksforgeeks.org\/","utilDjangoUrl":"https:\/\/gfgutil.geeksforgeeks.org\/","gfgPracticeUrl":"https:\/\/practiceapi.geeksforgeeks.org\/","gfgMediaUrl":"https:\/\/media.geeksforgeeks.org\/","authDjangoApiUrl":"https:\/\/authapi.geeksforgeeks.org\/","gfgMlApiUrl":"https:\/\/recommendations.geeksforgeeks.org\/","is_home":"","is_category":"","userlevelPremiumPlus":"2","practiceUrl":"https:\/\/practice.geeksforgeeks.org\/","gfgNotificationsApiUrl":"https:\/\/notificationsapi.geeksforgeeks.org\/"}; /* ]]> */ </script> <script type='text/javascript' async="async" src='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/js/gfg.min.js?ver=13.62'></script> <link rel='shortlink' href='https://www.geeksforgeeks.org/?p=1270247' /> <style> #wpadminbar{ background: #ff0000 !important; } </style> <style type="text/css" id="custom-background-css"> body.custom-background { background-color: #ffffff; } </style> <link rel="icon" href="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-100x100.png" sizes="32x32" /> <link rel="icon" href="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" /> <meta name="msapplication-TileImage" content="https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png" />  <style> #internal-promo-section{ display: none !important; } @media screen and (max-width:1500px) and (min-width:1280px){ body.single .article-page_flex .leftBar { flex-basis: calc(100% - 605px); max-width: calc(100% - 605px); min-width: calc(100% - 605px); } .sidebar_wrapper{ max-width: 300px; min-width: 300px; } div#secondary { min-width: 300px; max-width: 300px; } .widget-area{ padding: 0px; } .article-page_flex .rightBar{ padding: 20px 0px 0px 0px; } .article--viewer_content .a-wrapper .content { padding: 0px 10px 55px 20px; } .oinLeftbar { height: calc(100vh - 350px) !important; } } .autoLeftBar_oin_child{ height: 100% !important; } .autoLeftBar_oin_non_sticky{ height: unset !important; } .sideBar--wrap.newLeftbar > div[id^='GFG_AD_Leftsidebar_']:nth-of-type(1){ padding-top: 20px; } .sideBar--wrap.newLeftbar > div[id^='GFG_AD_Leftsidebar_']{ padding: 5px 0; } @media (max-width:1043px) and (min-width:992px) { .hide-1043992 { display: none!important; } } .mobile-header-list-item{ padding-left:30px; padding-right:10px; margin-top:5px; } .mobile-header-list{ border-bottom: 1px solid rgba(158, 158, 158, 0.3) !important; } .mobile-header-list .dropdown-title{ border-bottom: none !important; font-size: 16px!important; padding: 0px!important; padding-left: 45px!important; font-weight: normal; } .mobile-header-list .upside::after{ transform: rotate(180deg); } </style>    </head> <body class="post-template-default single single-post postid-1270247 single-format-standard custom-background custom-background-white"> <script> // Dark mode script const gfgThemeList = Object.freeze({ LIGHT: "gfgThemeLight", DARK: "gfgThemeDark" }) const getThemeFromCookie = () => { let gfg_def_theme = ""; let cookies = document.cookie; let cooks = cookies.split(";"); for (let i = 0; i < cooks.length; i++) { let icook = cooks[i].split("="); if (icook[0].trim() == "gfg_theme") { gfg_def_theme = icook[1].trim(); } } return gfg_def_theme } if(!(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/'))){ var isDarkMode = getThemeFromCookie() == gfgThemeList.DARK ? true : false; document.querySelector("body").setAttribute("data-dark-mode", isDarkMode); } function setSearchBarFocus() { const myTimeout = setTimeout(searchBarFocus, 0); function searchBarFocus() { document.getElementById("gcse-search-input").focus(); } } </script>  <nav> <div class="header-main__wrapper"> <a class="gfg-stc" style="top:0" href="#main">Skip to content</a> <a href="https://www.geeksforgeeks.org/" aria-label="Logo" class="header-main__logo"> <div class="_logo">  <img class="gfg_logo_img" style="height: 30px; width: 80px; max-width: fit-content;" src="https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="geeksforgeeks"> </div> </a> <div class="header-main__container">   <ul class="header-main__list"><li class="header-main__list-item Header_1" data-parent="false" aria-expanded="true" data-expandable="true"><span>Courses</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/dsa-to-development-coding-guide?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">DSA to Development</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/data-science-live?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Machine Learning & Data Science</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/mastering-generative-ai-and-chat-gpt?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Generative AI & ChatGPT</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/search?query=AWS&itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Become AWS Certified</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>DSA Courses</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/dsa-self-paced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Data Structure & Algorithm(C++/JAVA)</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/Data-Structures-With-Python?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Data Structure & Algorithm(Python)</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/data-structures-and-algorithms-in-javascript?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Data Structure & Algorithm(JavaScript)</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Programming Languages</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/cpp-programming-basic-to-advanced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">CPP</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/Java-Programming-basic-to-advanced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Java</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/Python-Foundation?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/javascript?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">JavaScript</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses/c-Programming-basic-to-advanced?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">C</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/courses?itm_source=geeksforgeeks&itm_medium=main_header&itm_campaign=courses" target="_self">All Courses</a></li></ul></li><li class="header-main__list-item Header_2" data-parent="false" aria-expanded="true" data-expandable="true"><span>Tutorials</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Python</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-programming-language-tutorial/?ref=outind" target="_self">Python Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-programming-examples/?ref=outind" target="_self">Python Programs</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-quizzes/?ref=outind" target="_self">Python Quiz</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-projects-beginner-to-advanced/?ref=outind" target="_self">Python Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-interview-questions/?ref=outind" target="_self">Python Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-data-structures-and-algorithms/?ref=outind" target="_self">Python Data Structures</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Java</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java/?ref=outind" target="_self">Java Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/collections-in-java-2/?ref=outind" target="_self">Java Collections</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-8-features/?ref=outind" target="_self">Java 8 Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-programming-examples/?ref=outind" target="_self">Java Programs</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-multiple-choice-questions/?ref=outind" target="_self">Java Quiz</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-projects/?ref=outind" target="_self">Java Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/java-interview-questions/?ref=outind" target="_self">Java Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/advanced-java/?ref=outind" target="_self">Advanced Java</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Programming Languages</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/javascript/?ref=outind" target="_self">JavaScript</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/c-plus-plus/?ref=outind" target="_self">C++</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/r-tutorial/?ref=outind" target="_self">R Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sql-tutorial/?ref=outind" target="_self">SQL</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/php-tutorial/?ref=outind" target="_self">PHP</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/csharp-programming-language/?ref=outind" target="_self">C#</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/c-programming-language/?ref=outind" target="_self">C</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/scala-programming-language/?ref=outind" target="_self">Scala</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/perl-programming-language/?ref=outind" target="_self">Perl</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/golang/?ref=outind" target="_self">Go Language</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/kotlin-programming-language/?ref=outind" target="_self">Kotlin</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><a href="https://www.geeksforgeeks.org/data-structures/?ref=ghm" class="remove-anchor__decoration" target="_self" style="display: inline-flex; padding: 0;">System Design</a><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/system-design-tutorial/?ref=ghm" target="_self">System Design Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-design-patterns/?ref=outind" target="_self">Software Design Patterns</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/complete-roadmap-to-learn-system-design/?ref=outind" target="_self">System Design Roadmap</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-10-system-design-interview-questions-and-answers/?ref=outind" target="_self">Top 10 System Design Interview Questions and Answers</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Interview Corner</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/company-preparation/?ref=outind" target="_self">Company Preparation</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/interview-preparation-for-software-developer/?ref=outind" target="_self">Top Topics</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://practice.geeksforgeeks.org/company-tags/?ref=outind" target="_self">Practice Company Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/company-interview-corner/?ref=outind" target="_self">Interview Experiences</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/experienced-interview-experiences-company-wise/?ref=outind" target="_self">Experienced Interviews</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/internship-interview-experiences-company-wise/?ref=outind" target="_self">Internship Interviews</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=outind" target="_self">Competitive Programming</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/quiz-corner-gq/?ref=outind" target="_self">Multiple Choice Quizzes</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/aptitude-questions-and-answers/?ref=outind" target="_self">Aptitude for Placements</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Computer Science Subjects</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/operating-systems/?ref=outind" target="_self">Operating System</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/dbms/?ref=outind" target="_self">DBMS</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/computer-network-tutorials/?ref=outind" target="_self">Computer Networks</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/engineering-mathematics-tutorials/?ref=outind" target="_self">Engineering Mathematics</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/computer-organization-and-architecture-tutorials/?ref=outind" target="_self">Computer Organization and Architecture</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/theory-of-computation-automata-tutorials/?ref=outind" target="_self">Theory of Computation</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/compiler-design-tutorials/?ref=outind" target="_self">Compiler Design</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/digital-electronics-logic-design-tutorials/#blg/?ref=outind" target="_self">Digital Logic</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-engineering/?ref=outind" target="_self">Software Engineering</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>DevOps</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/git-tutorial/?ref=outind" target="_self">GIT</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/aws-tutorial/?ref=outind" target="_self">AWS</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/docker-tutorial/?ref=outind" target="_self">Docker</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/kubernetes-tutorial/?ref=outind" target="_self">Kubernetes</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/microsoft-azure/?ref=outind" target="_self">Microsoft Azure Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/google-cloud-platform-tutorial/?ref=outind" target="_self">Google Cloud Platform</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Linux</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-tutorial/?ref=outind" target="_self">Linux Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-commands/?ref=outind" target="_self">Linux Commands A-Z</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-commands-cheat-sheet/?ref=outind" target="_self">Linux Commands Cheatsheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/permissions-in-linux/?ref=outind" target="_self">File Permission Commands</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/beginners-guide-to-linux-system-administration/?ref=outind" target="_self">Linux System Administration</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-file-system/?ref=outind" target="_self">Linux File System</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-linux-shell-shell-scripting/?ref=outind" target="_self">Linux Shell Scripting</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/network-configuration-trouble-shooting-commands-linux/?ref=outind" target="_self">Linux Networking</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linux-interview-questions/?ref=outind" target="_self">Linux Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Software Testing</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-testing-tutorial/?ref=outind" target="_self">Software Testing Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-engineering/?ref=outind" target="_self">Software Engineering Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/software-testing-interview-questions/?ref=outind" target="_self">Testing Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/jira-tutorial/?ref=outind" target="_self">Jira</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Databases</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/dbms/?ref=outind" target="_self">DBMS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sql-tutorial/?ref=outind" target="_self">SQL Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/postgresql-tutorial/?ref=outind" target="_self">PostgreSQL Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mongodb-tutorial/?ref=outind" target="_self">MongoDB Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sql-interview-questions/?ref=outind" target="_self">SQL Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mysql-interview-questions/?ref=outind" target="_self">MySQL Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/pl-sql-interview-questions/?ref=outind" target="_self">PL/SQL Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Android</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/android-tutorial/?ref=outind" target="_self">Android Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/android-studio-tutorial/?ref=outind" target="_self">Android Studio Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/kotlin-android-tutorial/?ref=outind" target="_self">Kotlin For Android</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/android-projects-from-basic-to-advanced-level/?ref=outind" target="_self">Android Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-50-android-interview-questions-answers-sde-i-to-sde-iii/?ref=outind" target="_self">Android Interview Questions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/6-weeks-of-android-app-development-free-project-based-learning/?ref=outind" target="_self">6 Weeks of Android App Development</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Excel</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/excel-tutorial/?ref=outind" target="_self">MS Excel Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-ms-excel/?ref=outind" target="_self">Introduction to MS Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-analysis-in-excel/?ref=outind" target="_self">Data Analysis in Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/basic-excel-formulas-and-functions/?ref=outind" target="_self">Basic Excel Formulas & Functions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/instant-data-analysis-in-advanced-excel/?ref=outind" target="_self">Data Analysis in Advanced Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/workbooks-in-microsoft-excel/?ref=outind" target="_self">Workbooks</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/statistical-functions-in-excel-with-examples/?ref=outind" target="_self">Statistical Functions</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-visualization-in-excel/?ref=outind" target="_self">Data Visualization in Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/pivot-tables-in-excel/?ref=outind" target="_self">Pivot Tables in Excel</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/working-with-excel-spreadsheets-in-python/?ref=outind" target="_self">Excel Spreadsheets in Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/basic-excel-shortcuts/?ref=outind" target="_self">Basic Excel Shortcuts</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Mathematics</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/number-theory/?ref=outind" target="_self">Number System</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/algebra/?ref=outind" target="_self">Algebra</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linear-algebra/?ref=outind" target="_self">Linear Algebra</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/math-trigonometry/?ref=outind" target="_self">Trigonometry</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/set-theory/?ref=outind" target="_self">Set Theory</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/statistics/?ref=outind" target="_self">Statistics</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/probability-in-maths/?ref=outind" target="_self">Probability</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/geometry/?ref=outind" target="_self">Geometry</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mensuration/?ref=outind" target="_self">Mensuration</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/logarithms/?ref=outind" target="_self">Logarithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/math-calculus/?ref=outind" target="_self">Calculus</a></li></ul></li></ul></li><li class="header-main__list-item Header_3" data-parent="false" aria-expanded="true" data-expandable="true"><span>DSA</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Structures</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/array-data-structure-guide/?ref=outind" target="_self">Arrays</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/matrix/?ref=outind" target="_self">Matrix</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/string-data-structure/?ref=outind" target="_self">Strings</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-linked-list-data-structure/?ref=ghm" target="_self">Linked List</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/stack-data-structure/?ref=outind" target="_self">Stack</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/queue-data-structure/?ref=outind" target="_self">Queue</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-tree-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Tree</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/heap-data-structure/?ref=outind" target="_self">Heap</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/hashing-data-structure/?ref=outind" target="_self">Hashing</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/graph-data-structure-and-algorithms/?ref=outind" target="_self">Graph</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-set-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Set Data Structure</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-map-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Map Data Structure</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/advanced-data-structures/?ref=outind" target="_self">Advanced Data Structure</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-data-structures/?ref=outind" target="_self">Data Structures Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Algorithms</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Analysis of Algorithms</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/design-and-analysis-of-algorithms/?ref=outind" target="_self">Design and Analysis of Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/asymptotic-notation-and-analysis-based-on-input-size-of-algorithms/?ref=outind" target="_self">Asymptotic Analysis</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/types-of-asymptotic-notations-in-complexity-analysis-of-algorithms/?ref=outind" target="_self">Asymptotic Notations</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/worst-average-and-best-case-analysis-of-algorithms/?ref=outind" target="_self">Worst, Average and Best Cases</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Searching Algorithms</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/linear-search/?ref=outind" target="_self">Linear Search</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/binary-search/?ref=outind" target="_self">Binary Search</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/searching-algorithms/?ref=outind" target="_self">Searching Algorithms Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Sorting Algorithms</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/selection-sort/?ref=outind" target="_self">Selection Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bubble-sort/?ref=outind" target="_self">Bubble Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/insertion-sort/?ref=outind" target="_self">Insertion Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/merge-sort/?ref=outind" target="_self">Merge Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/quick-sort/?ref=outind" target="_self">Quick Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/heap-sort/?ref=outind" target="_self">Heap Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/counting-sort/?ref=outind" target="_self">Counting Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/radix-sort/?ref=outind" target="_self">Radix Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bucket-sort-2/?ref=outind" target="_self">Bucket Sort</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-sorting-algorithm/?ref=outind" target="_self">Sorting Algorithms Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-greedy-algorithm-data-structures-and-algorithm-tutorials/?ref=outind" target="_self">Greedy Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-dynamic-programming-data-structures-and-algorithm-tutorials/?ref=outind" target="_self">Dynamic Programming</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-graphs-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Graph Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-pattern-searching-data-structure-and-algorithm-tutorial/?ref=outind" target="_self">Pattern Searching</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-recursion-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Recursion</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-backtracking-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Backtracking</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-divide-and-conquer-algorithm-data-structure-and-algorithm-tutorials/?ref=outind" target="_self">Divide and Conquer</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/mathematical-algorithms/?ref=outind" target="_self">Mathematical Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/geometric-algorithms/?ref=outind" target="_self">Geometric Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-bitwise-algorithms-data-structures-and-algorithms-tutorial/?ref=outind" target="_self">Bitwise Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/randomized-algorithms/?ref=outind" target="_self">Randomized Algorithms</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-branch-and-bound-data-structures-and-algorithms-tutorial/?ref=outind" target="_self">Branch and Bound</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-algorithms/?ref=outind" target="_self">Algorithms Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/learn-data-structures-and-algorithms-dsa-tutorial/?ref=outind" target="_self">DSA Tutorial</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Practice</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">All DSA Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/problem-of-the-day?itm_source=geeksforgeeksitm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Problem of the Day</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Company Wise Coding Practice</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&company=Amazon&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Amazon</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&company=Microsoft&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Microsoft</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&company=Flipkart&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Flipkart</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sortBy=submissions&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Explore All</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&curated[]=1&sortBy=submissions&curated_names[]=SDE Sheet?itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">GfG SDE Sheet</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Practice Problems Difficulty Wise</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=School&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">School</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Basic&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Basic</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Easy&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Easy</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Medium&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Medium</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&difficulty=Hard&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Hard</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Language Wise Coding Practice</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&category=CPP&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">CPP</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&category=Java&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Java</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?category=python&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Python</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Curated DSA Lists</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=ca8ae412173dbd8346c26a0295d098fd&sortBy=submissions&sprint_name=Beginner's DSA Sheet&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Beginner's DSA Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=50746f92a895c22a50504ac0c1fb9c84&sortBy=submissions&sprint_name=Top 50 Array Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 Array Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=57184072610b884e5df3584cc534115d&sortBy=submissions&sprint_name=Top 50 String Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 String Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=93d672753b74440c7427214c8ebf866d&sortBy=submissions&sprint_name=Top 50 DP Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 DP Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=405e9db0f353691ad3b2d546b19145e9&sortBy=submissions&sprint_name=Top 50 Graph Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 Graph Problems</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/explore?page=1&sprint=5f24de84b65bf7c4f4399c8111e26b81&sortBy=submissions&sprint_name=Top 50 Tree Problems&itm_source=geeksforgeeks&itm_medium=main_header_outIndia&itm_campaign=DSA_Header" target="_self">Top 50 Tree Problems</a></li></ul></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=outind" target="_self">Competitive Programming</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Company Wise SDE Sheets</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/facebookmeta-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Facebook SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/amazon-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Amazon SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/apple-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Apple SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/netflix-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Netflix SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/google-sde-sheet-interview-questions-and-answers/?ref=outind" target="_self">Google SDE Sheet</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>DSA Cheat Sheets</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/sde-sheet-a-complete-guide-for-sde-preparation/?ref=outind" target="_self">SDE Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/most-asked-dsa-interview-problems-for-beginners/?ref=outind" target="_self">DSA Sheet for Beginners</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/must-do-coding-questions-for-companies-like-amazon-microsoft-adobe/?ref=outind" target="_self">FAANG Coding Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/must-do-coding-questions-for-product-based-companies/?ref=outind" target="_self">Product-Based Coding Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/must-coding-questions-company-wise/?ref=outind" target="_self">Company-Wise Preparation Sheet</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-100-data-structure-and-algorithms-dsa-interview-questions-topic-wise/?ref=outind" target="_self">Top Interview Questions</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Puzzles</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/puzzles/?ref=outind" target="_self">All Puzzles</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-100-puzzles-asked-in-interviews/?ref=outind" target="_self">Top 100 Puzzles Asked In Interviews</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-20-puzzles-commonly-asked-during-sde-interviews/?ref=outind" target="_self">Top 20 Puzzles Commonly Asked During SDE Interviews</a></li></ul></li></ul></li><li class="header-main__list-item Header_4" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Science</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-programming-language/?ref=outind" target="_self">Python Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/r-tutorial/?ref=outind" target="_self">R Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/machine-learning/?ref=outind" target="_self">Machine Learning</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-science-with-python-tutorial/?ref=outind" target="_self">Data Science using Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/r-programming-for-data-science/?ref=outind" target="_self">Data Science using R</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Science Packages</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/pandas-tutorial/?ref=outind" target="_self">Pandas Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/numpy-tutorial/?ref=outind" target="_self">NumPy Tutorial</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Visualization</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/python-data-visualization-tutorial/?ref=outind" target="_self">Python Data Visualization Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-visualization-in-r/?ref=outind" target="_self">Data Visualization with R</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Data Analysis</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-analysis-with-python/?ref=outind" target="_self">Data Analysis with Python</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/data-analysis-using-r/?ref=outind" target="_self">Data Analysis with R</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/deep-learning-tutorial/?ref=outind" target="_self">Deep Learning</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/natural-language-processing-nlp-tutorial/?ref=outind" target="_self">NLP Tutorial</a></li></ul></li><li class="header-main__list-item Header_5" data-parent="false" aria-expanded="true" data-expandable="true"><span>Web Tech</span><i class="gfg-icon gfg-icon_arrow-down gfg-icon_header"></i><ul class="mega-dropdown Screen_1"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/html-tutorial/?ref=outind" target="_self">HTML Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/css-tutorial/?ref=outind" target="_self">CSS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/javascript/?ref=outind" target="_self">JavaScript Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/php-tutorial/?ref=outind" target="_self">PHP Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/react-tutorial/?ref=outind" target="_self">ReactJS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/nodejs/?ref=outind" target="_self">NodeJS Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bootstrap/?ref=outind" target="_self">Bootstrap Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/typescript/?ref=outind" target="_self">Typescript</a></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Web Development Using Python</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Django</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/django-tutorial/?ref=outind" target="_self">Django Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/top-django-projects-for-beginners/?ref=outind" target="_self">Django Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/django-interview-questions/?ref=outind" target="_self">Django Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Flask</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_3"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/flask-tutorial/?ref=outind" target="_self">Flask Tutorial</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/flask-projects/?ref=outind" target="_self">Flask Projects</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/flask-interview-questions-and-answers/?ref=outind" target="_self">Flask Interview Questions</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/postman-tutorial/?ref=outind" target="_self">Postman</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/introduction-to-github/?ref=outind" target="_self">Github</a></li></ul></li><li class="mega-dropdown__list-item" data-parent="false" aria-expanded="true" data-expandable="true"><span>Cheat Sheets</span><i class="gfg-icon gfg-icon_arrow-right"></i><ul class="mega-dropdown Screen_2"><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/html-cheat-sheet-a-basic-guide-to-html/?ref=outind" target="_self">HTML Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/css-cheat-sheet-a-basic-guide-to-css/?ref=outind" target="_self">CSS Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/javascript-cheat-sheet-a-basic-guide-to-javascript/?ref=outind" target="_self">JavaScript Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/react-cheat-sheet/?ref=outind" target="_self">React Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/angular-cheat-sheet-a-basic-guide-to-angular/?ref=outind" target="_self">Angular Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/jquery-cheat-sheet-a-basic-guide-to-jquery/?ref=outind" target="_self">jQuery Cheat Sheet</a></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/bootstrap-cheatsheet-a-basic-guide-to-bootstrap/?ref=outind" target="_self">Bootstrap Cheat Sheet</a></li></ul></li><li class="mega-dropdown__list-item" data-child="true" aria-expanded="false" data-expandable="false"><a href="https://www.geeksforgeeks.org/web-development/?ref=outind" target="_self">Learn Complete Web Development</a></li></ul></li></ul>  <ul class="header-main__left-list" data-nl="false"> <li class="header-main__left-list-item gcse-search_li p-relative" aria-expanded="false" data-expandable="false"> <div class="gcse-form-search-suggestion_wrapper"> <form id="gcse-form" class="gcse-form_class p-relative closeChatScreen" data-sm="false"> <span class="front-search-icon"><i class="gfg-icon gfg-icon_search gfg-icon_white gcse-search__icon gcse-search-icon_grey"></i> </span> <input class="gcse-search-input__wrapper" id="gcse-search-input" aria-expanded="false" placeholder="Search..." autocomplete="off" /> <i class="gfg-icon gfg-icon_times gfg-icon_white hide-search"></i> <button aria-label="search" type="submit" class="gcse-search__btn not-expanded"> <i class="gfg-icon gfg-icon_search gfg-icon_white gcse-search__icon"></i> </button> </form> <div class="gfg-search-suggestion_wrapper" style="display:none"></div> <div> </li> <li> <div class="darkMode-wrap" data-mode="Switch to Dark Mode"> <button aria-label="toggle theme" data-gfg-action="toggleGFGTheme"> <div id="darkMode-wrap-red-dot" style="height:12px;width:12px;background-color:#EB2222;border-radius:999999px;position:absolute;top:4px;right:0;display:none;"></div> <i class="gfg-icon gfg-icon_dark-mode"></i> </button> <span id="darkModeTooltipText"></span> </div> </li> <li class="header-main__left-list-item google-translate-parent-element" aria-expanded="false" data-expanded="true"> <div class="translate" id="g_translater"> <div id="google_translate_element" data-show="false"></div> </div> <i class ="gfg-icon gfg-icon_translate googleTranslateToggle" data-gfg-action="google_translate_element"></i>   </li> <li id="userProfileId" class="header-main__left-list-item p-relative" aria-expanded="false" data-expandable="false">  </li> </ul> </div>   </div> </nav> <div class="header-main__slider"> <button aria-label="sub header slider previous" class="header-main__slider-arrow previous hideIt"> <i class="gfg-icon gfg-icon_arrow-left gicon-centered"></i> </button>  <ul id="hslider"> <li><a href="https://www.geeksforgeeks.org/bootstrap-5/?ref=shm">BS5 Tutorial</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap-interview-questions-and-answers/?ref=shm">BS5 Interview Questions</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap-5-layout-complete-reference/?ref=shm">BS5 Layout</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap-5-content-complete-reference/?ref=shm">BS5 Content</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap-5-components-reference/?ref=shm">BS5 Components</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap-5-helpers-reference/?ref=shm">BS5 Helpers</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap-5-utility-reference/?ref=shm">BS5 Utilities</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap/?ref=shm">BS4 Tutorial</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap/?ref=shm">BS Tutorial</a></li><li><a href="https://www.geeksforgeeks.org/bootstrap-cheatsheet-a-basic-guide-to-bootstrap/?ref=shm">Bootstrap Cheatsheet</a></li><li><a href="https://www.geeksforgeeks.org/tailwind-css/?ref=shm">Tailwind</a></li><li><a href="https://www.geeksforgeeks.org/css-framework/?ref=shm">CSS Frameworks</a></li><li><a href="https://www.geeksforgeeks.org/html-formatter/?ref=shm">HTML Formatter</a></li> </ul> <button aria-label="sub header slider next" class="header-main__slider-arrow next hideIt"> <i class="gfg-icon gfg-icon_arrow-right gicon-centered"></i> </button> </div> <button id="scrollTopBtn" title="Scroll to Top" type="button" class="btn btn-success">▲</button>  <div id="main" class="wrapper single-page"> <script> if(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/')){ $(".header-main__slider").remove(); } //getting tags for the page type data let mobileView = false; let pageTags = JSON.parse('null'); let allTags = JSON.parse('["Bootstrap","WebTechnologies","WebTechTutorials","Tutorials"]'); </script> <script> window.have_dsa_term = false; // var practiceTab = ; </script> <style> .wrapper { flex-direction: column !important; } /* spinner css */ @keyframes spinner { to {transform: rotate(360deg);} } .spinner:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #000; animation: spinner .6s linear infinite; } .report-loader{ position: relative; } .report-loader.spinner{ margin-left: 16px; } .badges{ display: flex; align-items: center; position: relative; } .badges .gfg-badge-icon.md::after{ transform: scale(0.25); position:relative; top: 2px; left: -2px; } .sep{ margin: 0px 5px; font-size: 20px; color: var(--badge-name-color); } .pub-count{ font-size: 14px; font-family: var(--font-secondary); } .badge-details{ display:none; } .badges{ cursor: pointer; position: relative; /* width: 0px; height: 20px; top: -32px; */ } .badge-icon{ display: flex; align-items: center; } .badge-content{ margin-left: 9px; } .badge-name{ color: var(--badge-nam-color); font-weight: 600; font-size: 16px; text-transform: capitalize; } .badge-data{ color: #A5A4A4; font-size: 10px; } .badges:hover .badge-details{ display: block; background: var(--badge-bg); padding: 10px 18px 10px 18px; position: absolute; width: 175px; top: -10px; z-index: 10; left: 112%; box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px; border-radius: 5px; /* transform-origin: top right; */ } .badge-details::before { content: ""; position: absolute; transform: rotate(90deg); /* transform-origin: right; */ left: -6px; top: 50%; margin-left: -17px; border-width: 12px; border-style: solid; border-color: var(--badge-bg) transparent transparent transparent; margin-top: -12px; } .badge-icon .icon{ border: 1px solid var(--icon-border-color); padding: 4px 3px; border-radius: 4px; width: 22px; height: 24px; position: relative; } .b-icon-pos{ position: relative; top: -34px; left: -34px; } /* article viewer */ .article--viewer .a-wrapper{ margin-top: 0px !important; } .content{ padding-top: 10px !important; } .u-name{ font-size: 14px; } .article--viewer_content .a-wrapper .content{ padding-bottom: 10px !important; } .likeTooltipBottom{ font-size: 14px; } @media (max-width: 434px) { .article-buttons.show-bg{ margin-top: 56px !important; } } @media (max-width: 730px), ((min-width: 992px) and (max-width:1100px)) { .article--viewer .media{ position: relative; } .article--viewer .media{ margin-bottom: 0px !important; } .badges:hover .badge-details{ top: -56px; left: 62px; } .badge-details::before{ transform: rotate(0deg); left: 10%; top: 117%; } .article-buttons.show-bg{ margin-top: 22px; top: 0px !important; } } @media ((min-width:731px) and (max-width:1223px)) { .article-buttons.show-bg{ top: 18px; } } @media ((min-width:993px) and (max-width:1190px)) { .article--viewer .media{ position: relative; } .article--viewer .media{ margin-bottom: 25px !important; } } </style>  <script> function getCookie(name) { function escape(s) { return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, '\\$1'); } var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)')); return match ? match[1] : null; } </script>    <div id='openInApp-modal' class='openInApp'> <a href = 'https://geeksforgeeksapp.page.link/?link=https://www.geeksforgeeks.org/bootstrap/?type%3Darticle%26id%3D1270247&apn=free.programming.programming&isi=1641848816&ibi=org.geeksforgeeks.GeeksforGeeksDev&efr=1' class='openInAppLink'> <span style='color: #fff;'>Open In App</span> </a> </div> <script> var consentValue = localStorage.getItem("gfg_cc"); var isIOS = !!navigator.platform && /iPad|iPhone|iPod|MacIntel/.test(navigator.platform) && navigator.maxTouchPoints > 0; const isSafari = navigator.userAgent.indexOf("Safari") > -1; const isMozilla = navigator.userAgent.indexOf("Mozilla") > -1; if(consentValue){ if(window.innerHeight > window.innerWidth && navigator.maxTouchPoints > 1 && (isSafari || isMozilla || navigator.userAgentData.mobile)){ $('.openInApp').css({ display: "block" }); $('#scrollTopBtn').css({ bottom: "44px" }); //adding a new class to check stats for clicks on iOS and Android isIOS ? jQuery('.openInAppLink').addClass("oia-iOS") : $('.openInAppLink').addClass("oia-android"); //for openInApp Link } } </script> <style> .openInApp{ display: none; bottom: 0px; width: 100%; position: fixed; z-index: 1025; opacity: 0.93; } .openInAppLink{ height: 44px; background: var(--color-gfg); font-weight: bold; display: block; text-align: center; padding: 12px; font-size: large; } .openInAppLink, .openInAppLink:hover, .openInAppLink:active, .openInAppLink:visited, .openInAppLink:focus { text-decoration:none; } </style>  <script> companyTagsArray = JSON.parse('[]'); categoryTagsArray = JSON.parse('[]'); </script> <div class="container-fluid bg-light" id="home-page" style="position: relative; max-width:100%;"> <div class="article-page_flex"> <div class="sidebar_wrapper manual_leftbar "> <a href="https://www.geeksforgeeks.org/bootstrap-5/?ref=next_article_top" class="next_article_leftbar_container"> <div class="next_article_leftbar_content"> <span class="next_article_text">Next Article:</span> <div class="next_article_title">Bootstrap 5 Tutorial</div> </div> <img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/ep_right.svg" alt="Next article icon" /> </a> <div class="sideBar " style="height: unset !important">  <div class="sideBar--wrap newLeftbar "> <div id="GFG_AD_Leftsidebar_300x250_chained_1"></div> <div id="GFG_AD_Leftsidebar_300x250_chained_2"></div> <div id="GFG_AD_Leftsidebar_300x250_chained_3"></div> <div id="GFG_AD_Leftsidebar_300x600_chained_1"></div> </div> </div> <div id="GFG_AD_Desktop_LeftSideBar_Docked_160x600" style="max-width:160px; max-height:600px"></div> </div> <div class="leftBar"> <div class="article--viewer"> <div class="article--viewer_content"> <div class="a-wrapper"> <div class="" style="z-index:9999 !important;position:relative;"> </div> <article class="content post-1270247 post type-post status-publish format-standard hentry category-bootstrap category-web-technologies tag-tutorials tag-web-tech-tutorials" id="post-1270247">  <div class="main_wrapper" style="display:flex;"> <div style="width: 100%;"> <div class="article-title"> <h1>Bootstrap Tutorial</h1> </div> <div class="last_updated_parent"> <div> <span class="strong">Last Updated : </span> <span>14 Dec, 2024</span> </div>  <div class="three_dot_dropdown"> <div style="display: flex;"> <div pid="1270247" ptitle="Bootstrap Tutorial" class="top-summary-icon-div "> <div class="three_dot_dropdown_div tooltip"> <span class="summary_tooltiptext">Summarize</span> <div class="summarize_header"> <i class= "summary_button" style="position: relative;"></i> </div> </div> </div> <div pid="1270247" ptitle="Bootstrap Tutorial" class="article--viewer_comment tooltip top-comment-icon-div"> <span class="comment_tooltiptext">Comments</span> <div class="three_dot_dropdown_div" data-gfg-action='loadComments'> <div class="comment_header"> <i class= "discussion_button" style="position: relative; transform: scale(0.9);"></i> </div> </div> </div> <div pid="1270247" ptitle="Bootstrap Tutorial" class="article--viewer_improve tooltip"> <span class="improve_tooltiptext">Improve</span> <div class="three_dot_dropdown_div three_dot_dropdown_improve" onclick="improveArticleCall()"> <div class="improve_wrapper_top"> <i class="gfg-icon gfg-icon-pencil gfg-icon_edit" style="position: relative; z-index: 3;"></i> </div> </div>  </div>  <ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()"> <li> </li> <li></li> <li></li> </ul> </div> </div> </div> </div> </div>  <div id="myDropdown" class="three_dot_dropdown_content"> <div class="article-buttons drop" onmouseleave="closeKebabMenu()">  <div pid="1270247" ptitle="Bootstrap Tutorial" class="improve_article--viewer tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_improve" onclick="suggestionArticleCall()" style="margin-top: 1px;"> <div class="three_dot_dropdown_inner_div improve_dot_dropdown_inner_div"> <i class="gfg-icon gfg-icon_suggest_changes gfg-icon_edit"></i> <span>Suggest changes</span> </div> </div> </div> <div pid="1270247" class="article--viewer_like tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_likearticle" onmouseleave='toggleLikeElementVisibility("showLikesContainer", false)' onmouseenter='toggleLikeElementVisibility("showLikesContainer", true)'> <div class="showLikesContainer"> <span class="likeTooltip">Like Article</span> </div> <div class="three_dot_dropdown_inner_div" data-gfg-action="like-article" data-bookmark-value="0"> <i class="gfg-icon gfg-icon_thumbs"></i> <span>Like</span> </div> </div>  </div> <div pid="1270247" class="article--viewer_share tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_share" onmouseleave="closeShareModal()" onmouseenter="openShareModal()"> <div style="display: flex;align-items: center;" class="three_dot_dropdown_inner_div" data-gfg-action="share-article" data-bookmark-value="0"> <i class="gfg-share-icon"></i> <span>Share</span> </div> </div> </div> <div class="article--viewer_report tooltip"> <div class="three_dot_dropdown_div three_dot_dropdown_reportarticle"> <div class="three_dot_dropdown_inner_div" data-gfg-action="report-article" onclick="report_article();"> <i class="gfg-icon gfg-icon_report"></i> <span>Report</span> </div> </div>  </div> <div class="article--viewer_Gnews tooltip"> <a class="three_dot_dropdown_inner_div Gnews_wrapper" href ='https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen' target="_blank"> <img class="gfg-icon_Gnews no-zoom-in-cursor" src=https://media.geeksforgeeks.org/auth-dashboard-uploads/Google-news.svg loading="lazy" alt="News"></img> <span class='kebab_menu_news_text'>Follow</span> </a> </div> </div> </div> <div class="text"> <p dir="ltr"><span>Bootstrap is a popular front-end framework for building responsive and mobile-first websites. It provides pre-designed </span><a href="https://www.geeksforgeeks.org/css-tutorial/" target="_blank" rel="noopener"><span>CSS</span></a><span>, </span><a href="https://www.geeksforgeeks.org/javascript/" target="_blank" rel="noopener"><span>JavaScript </span></a><span>components, and utility classes to quickly create modern and consistent user interfaces.</span></p><ul><li value="1"><span>It Includes pre-built responsive grid systems for mobile-first design.</span></li><li value="2"><span>Offers a wide range of UI components like buttons, modals, and navbars.</span></li><li value="3"><span>Provides built-in support for responsive typography, spacing, and utilities.</span></li><li value="4"><span>Extensively customizable via Sass variables and Bootstrap's configuration.</span></li></ul><p dir="ltr"><span>To start with Bootstrap, you need to install it on your project or use the CDN link. Follow these articles to install depending on your system:</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/how-to-install-bootstrap-5/" target="_blank" rel="noopener"><span>How to install Bootstrap 5?</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/how-to-add-bootstrap-in-a-project/" target="_blank" rel="noopener"><span>How to Add Bootstrap in a Project?</span></a></li></ul><p dir="ltr"><span>Let us now take a look at our first code example.</span></p><gfg-tabs allow-code-exec=true data-run-ide="true" data-mode="light"> <gfg-tab slot="tab">HTML</gfg-tab> <gfg-panel slot="panel" data-code-lang="html" data-main-code-start="None" data-main-code-end="None"> <code class="language-html"><div class=highlight><pre><span></span><span class=p><</span><span class=nt>html</span><span class=p>></span> <span class=p><</span><span class=nt>head</span><span class=p>></span> <span class=p><</span><span class=nt>link</span> <span class=na>href</span><span class=o>=</span><span class=s>"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"</span> <span class=na>rel</span><span class=o>=</span><span class=s>"stylesheet"</span> <span class=na>integrity</span><span class=o>=</span><span class=s>"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"</span> <span class=na>crossorigin</span><span class=o>=</span><span class=s>"anonymous"</span><span class=p>></span> <span class=p><</span><span class=nt>script</span> <span class=na>src</span><span class=o>=</span><span class=s>"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"</span> <span class=na>integrity</span><span class=o>=</span><span class=s>"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"</span> <span class=na>crossorigin</span><span class=o>=</span><span class=s>"anonymous"</span><span class=p>></</span><span class=nt>script</span><span class=p>></span> <span class=p></</span><span class=nt>head</span><span class=p>></span> <span class=p><</span><span class=nt>body</span><span class=p>></span> <span class=p><</span><span class=nt>div</span> <span class=na>class</span><span class=o>=</span><span class=s>"container text-center"</span><span class=p>></span> <span class=p><</span><span class=nt>h1</span> <span class=na>class</span><span class=o>=</span><span class=s>"text-success"</span><span class=p>></span> Welcome to GeeksforGeeks <span class=p></</span><span class=nt>h1</span><span class=p>></span> <span class=p><</span><span class=nt>p</span><span class=p>></span>A Simple Example of Bootstrap<span class=p></</span><span class=nt>p</span><span class=p>></span> <span class=p></</span><span class=nt>div</span><span class=p>></span> <span class=p></</span><span class=nt>body</span><span class=p>></span> <span class=p></</span><span class=nt>html</span><span class=p>></span> </pre></div></code> </gfg-panel></gfg-tabs><p dir="ltr"><b><strong>Output</strong></b></p><figure class="image"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240802165645/Bootstrap-Example-Output.PNG" alt="Bootstrap-Example-Output" width="753" height="130" srcset="https://media.geeksforgeeks.org/wp-content/uploads/20240802165645/Bootstrap-Example-Output.PNG 753w,https://media.geeksforgeeks.org/wp-content/uploads/20240802165645/Bootstrap-Example-Output-100.PNG 100w,https://media.geeksforgeeks.org/wp-content/uploads/20240802165645/Bootstrap-Example-Output-200.PNG 200w,https://media.geeksforgeeks.org/wp-content/uploads/20240802165645/Bootstrap-Example-Output-300.PNG 300w,https://media.geeksforgeeks.org/wp-content/uploads/20240802165645/Bootstrap-Example-Output-660.PNG 660w"><figcaption>FIrst Bootstrap Example</figcaption></figure><p dir="ltr"><b><strong>In this example:</strong></b></p><ul><li value="1"><span>Bootstrap CSS and JavaScript files are included via CDNs with integrity attributes for security.</span></li><li value="2"><span>The </span><b><strong>container</strong></b><span> class ensures the content is responsive and aligned.</span></li><li value="3"><span>The </span><b><strong>text-center</strong></b><span> class centers the text within the </span><b><strong>div</strong></b><span>.</span></li><li value="4"><span>The</span><b><strong> text-success</strong></b><span> class adds a green color to the heading, using Bootstrap's built-in color utilities.</span></li></ul><h2><span>Why Learn Bootstrap?</span></h2><ul><li value="1"><span>Accelerates the development of modern web pages.</span></li><li value="2"><span>Ensures consistent design across devices and browsers.</span></li><li value="3"><span>Reduces the need for writing custom CSS.</span></li><li value="4"><span>Ideal for both beginners and professionals in web development.</span></li></ul><figure class="image"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20241214185225380087/Bootstrap-Tutorial.webp" alt="Bootstrap-Tutorial" width="1000" height="470" srcset="https://media.geeksforgeeks.org/wp-content/uploads/20241214185225380087/Bootstrap-Tutorial.webp 1000w,https://media.geeksforgeeks.org/wp-content/uploads/20241214185225380087/Bootstrap-Tutorial-100.webp 100w,https://media.geeksforgeeks.org/wp-content/uploads/20241214185225380087/Bootstrap-Tutorial-200.webp 200w,https://media.geeksforgeeks.org/wp-content/uploads/20241214185225380087/Bootstrap-Tutorial-300.webp 300w,https://media.geeksforgeeks.org/wp-content/uploads/20241214185225380087/Bootstrap-Tutorial-660.webp 660w,https://media.geeksforgeeks.org/wp-content/uploads/20241214185225380087/Bootstrap-Tutorial-768.webp 768w" loading="lazy"><figcaption>Bootstrap Tutorial</figcaption></figure><h3 id="bootstrap-layout"><a href="https://www.geeksforgeeks.org/bootstrap-5-layout-complete-reference/" target="_blank" rel="noopener"><b><strong>Bootstrap Layout</strong></b></a></h3><p dir="ltr"><span>Bootstrap layout is built on a flexible grid layout that adjusts seamlessly to different screen sizes. It uses a 12-column grid system to create responsive designs. You can control the width and positioning of columns by combining classes for different screen sizes (e.g., .col-md-6 for medium devices).</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/bootstrap-5-layout-breakpoints/" target="_blank" rel="noopener"><span>Breakpoints</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/bootstrap-5-layout-containers/" target="_blank" rel="noopener"><span>Containers</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/bootstarp-5-layout-grid-system/" target="_blank" rel="noopener"><span>Grid</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/bootstrap-5-columns/" target="_blank" rel="noopener"><span>Columns</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/bootstrap-5-gutters/" target="_blank" rel="noopener"><span>Gutters</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/bootstarp-5-utilities/" target="_blank" rel="noopener"><span>Utilities</span></a></li><li value="7"><a href="https://www.geeksforgeeks.org/bootstrap-5-z-index/" target="_blank" rel="noopener"><span>Z-index</span></a></li></ul><h3 id="bootstrap-content"><a href="https://www.geeksforgeeks.org/bootstrap-5-content-complete-reference/" target="_blank" rel="noopener"><span>Bootstrap Content</span></a></h3><p dir="ltr"><span>Bootstrap provides a range of classes to enhance and structure content. It includes typography classes for headings, paragraphs, and text alignment, as well as helper classes for spacing and text colors.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/bootstrap-5-reboot/" target="_blank" rel="noopener"><span>Reboot</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/bootstrap-5-typography/" target="_blank" rel="noopener"><span>Typography</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/bootstrap-5-images/" target="_blank" rel="noopener"><span>Images</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/bootstrap-5-tables/" target="_blank" rel="noopener"><span>Tables</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/bootstrap-5-figures/" target="_blank" rel="noopener"><span>Figures</span></a></li></ul><h3 id="bootstrap-forms"><a href="https://www.geeksforgeeks.org/bootstrap-forms-reference/" target="_blank" rel="noopener"><span>Bootstrap Forms</span></a></h3><p dir="ltr"><span>Bootstrap simplifies form creation with pre-styled components and layouts. It includes classes for form controls like text inputs, select menus, and checkboxes.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/bootstrap-5-forms/" target="_blank" rel="noopener"><span>Forms</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/bootstrap-5-form-controls/" target="_blank" rel="noopener"><span>Form Controls</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/bootstrap-5-select/" target="_blank" rel="noopener"><span>Select</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/bootstrap-5-checks-and-radios/" target="_blank" rel="noopener"><span>Checks and Radios</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/bootstrap-5-range/" target="_blank" rel="noopener"><span>Range</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/bootstrap-5-input-group/" target="_blank" rel="noopener"><span>Input group</span></a></li><li value="7"><a href="https://www.geeksforgeeks.org/bootstrap-5-floating-labels/" target="_blank" rel="noopener"><span>Floating labels</span></a></li><li value="8"><a href="https://www.geeksforgeeks.org/bootstrap-5-layout-forms/" target="_blank" rel="noopener"><span>Form Layout</span></a></li><li value="9"><a href="https://www.geeksforgeeks.org/bootstrap-5-layout-form-grid/" target="_blank" rel="noopener"><span>Form Grid</span></a></li><li value="10"><a href="https://www.geeksforgeeks.org/bootstrap-5-layout-horizontal-form/" target="_blank" rel="noopener"><span>Horizontal Form</span></a></li><li value="11"><a href="https://www.geeksforgeeks.org/bootstrap-5-validation/" target="_blank" rel="noopener"><span>Validation</span></a></li></ul><h3 id="bootstrap-components"><a href="https://www.geeksforgeeks.org/bootstrap-5-components-reference/" target="_blank" rel="noopener"><span>Bootstrap Components</span></a></h3><p dir="ltr"><span>Bootstrap offers a rich set of pre-designed components to streamline UI development. These include buttons, cards, modals, navbars, and more.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/bootstrap-5-accordion/" target="_blank" rel="noopener"><span>Accordion</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/bootstrap-5-alerts/" target="_blank" rel="noopener"><span>Alerts</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/bootstrap-5-badges/" target="_blank" rel="noopener"><span>Badges</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/bootstrap-5-breadcrumb/" target="_blank" rel="noopener"><span>Breadcrumb</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/bootstrap-5-buttons/" target="_blank" rel="noopener"><span>Buttons</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/bootstrap-5-button-group/" target="_blank" rel="noopener"><span>Button Group</span></a></li><li value="7"><a href="https://www.geeksforgeeks.org/bootstrap-5-card/" target="_blank" rel="noopener"><span>Card</span></a></li><li value="8"><a href="https://www.geeksforgeeks.org/bootstrap-5-carousel/" target="_blank" rel="noopener"><span>Carousel</span></a></li><li value="9"><a href="https://www.geeksforgeeks.org/bootstrap-5-close-button/" target="_blank" rel="noopener"><span>Close Button</span></a></li><li value="10"><a href="https://www.geeksforgeeks.org/bootstrap-5-collapse/" target="_blank" rel="noopener"><span>Collapse</span></a></li><li value="11"><a href="https://www.geeksforgeeks.org/bootstrap-5-dropdowns/" target="_blank" rel="noopener"><span>Dropdowns</span></a></li><li value="12"><a href="https://www.geeksforgeeks.org/bootstrap-5-list-group/" target="_blank" rel="noopener"><span>List Group</span></a></li><li value="13"><a href="https://www.geeksforgeeks.org/bootstrap-5-modal/" target="_blank" rel="noopener"><span>Modal</span></a></li><li value="14"><a href="https://www.geeksforgeeks.org/bootstrap-5-navbar-nav/" target="_blank" rel="noopener"><span>Navbar</span></a></li><li value="15"><a href="https://www.geeksforgeeks.org/bootstrap-5-offcanvas/" target="_blank" rel="noopener"><span>Offcanvas</span></a></li><li value="16"><a href="https://www.geeksforgeeks.org/bootstrap-4-pagination/" target="_blank" rel="noopener"><span>Popovers</span></a></li><li value="17"><a href="https://www.geeksforgeeks.org/bootstrap-4-pagination/" target="_blank" rel="noopener"><span>Pagination</span></a></li><li value="18"><a href="https://www.geeksforgeeks.org/bootstrap-5-progress/" target="_blank" rel="noopener"><span>Progress</span></a></li><li value="19"><a href="https://www.geeksforgeeks.org/bootstrap-5-scrollspy/" target="_blank" rel="noopener"><span>Scrollspy</span></a></li><li value="20"><a href="https://www.geeksforgeeks.org/bootstrap-5-spinners/" target="_blank" rel="noopener"><span>Spinners</span></a></li><li value="21"><a href="https://www.geeksforgeeks.org/bootstrap-5-toasts/" target="_blank" rel="noopener"><span>Toasts</span></a></li><li value="22"><a href="https://www.geeksforgeeks.org/bootstrap-5-tooltips/" target="_blank" rel="noopener"><span>Tooltips</span></a></li></ul><h3 id="bootstrap-helpers"><a href="https://www.geeksforgeeks.org/bootstrap-5-helpers-reference/" target="_blank" rel="noopener"><span>Bootstrap Helpers</span></a></h3><p dir="ltr"><span>Bootstrap helpers are utility classes that simplify common tasks and improve readability. They include classes for text alignment, visibility, display properties, and more.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/bootstrap-5-clearfix/" target="_blank" rel="noopener"><span>Clearfix</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/bootstrap-5-colored-links/" target="_blank" rel="noopener"><span>Colored links</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/bootstrap-5-ratios/" target="_blank" rel="noopener"><span>Ratios</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/bootstrap-5-position/" target="_blank" rel="noopener"><span>Position</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/bootstrap-5-visually-hidden/" target="_blank" rel="noopener"><span>Visually Hidden</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/bootstrap-5-stretched-link/" target="_blank" rel="noopener"><span>Stretched link</span></a></li><li value="7"><a href="https://www.geeksforgeeks.org/bootstrap-5-text-truncation/" target="_blank" rel="noopener"><span>Text truncation</span></a></li></ul><h3 id="bootstrap-utilities"><a href="https://www.geeksforgeeks.org/bootstrap-5-utility-reference/" target="_blank" rel="noopener"><span>Bootstrap Utilities</span></a></h3><p dir="ltr"><span>Bootstrap utilities are small, reusable classes that provide additional functionality and control. They include classes for spacing, alignment, borders, and background colors.</span></p><ul><li value="1"><a href="https://www.geeksforgeeks.org/bootstrap-5-background/" target="_blank" rel="noopener"><span>Background</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/bootstrap-5-borders/" target="_blank" rel="noopener"><span>Borders</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/bootstrap-5-colors/" target="_blank" rel="noopener"><span>Colors</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/bootstrap-5-display/" target="_blank" rel="noopener"><span>Display</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/bootstrap-5-flex/" target="_blank" rel="noopener"><span>Flex</span></a></li><li value="6"><a href="https://www.geeksforgeeks.org/bootstrap-5-float/" target="_blank" rel="noopener"><span>Float</span></a></li><li value="7"><a href="https://www.geeksforgeeks.org/bootstrap-5-interactions/" target="_blank" rel="noopener"><span>Interactions</span></a></li><li value="8"><a href="https://www.geeksforgeeks.org/bootstrap-5-overflow/" target="_blank" rel="noopener"><span>Overflow</span></a></li><li value="9"><a href="https://www.geeksforgeeks.org/bootstrap-5-position/" target="_blank" rel="noopener"><span>Position</span></a></li><li value="10"><a href="https://www.geeksforgeeks.org/bootstrap-5-shadows/" target="_blank" rel="noopener"><span>Shadows</span></a></li><li value="11"><a href="https://www.geeksforgeeks.org/bootstrap-5-sizing/" target="_blank" rel="noopener"><span>Sizing</span></a></li><li value="12"><a href="https://www.geeksforgeeks.org/bootstrap-5-spacing/" target="_blank" rel="noopener"><span>Spacing</span></a></li><li value="13"><a href="https://www.geeksforgeeks.org/bootstrap-5-text/" target="_blank" rel="noopener"><span>Text</span></a></li><li value="14"><a href="https://www.geeksforgeeks.org/bootstrap-5-vertical-alignment/" target="_blank" rel="noopener"><span>Vertical align</span></a></li><li value="15"><a href="https://www.geeksforgeeks.org/bootstrap-5-visibility/" target="_blank" rel="noopener"><span>Visibility</span></a></li></ul><h3><span>Bootstrap For Interview </span></h3><ul><li value="1"><a href="https://www.geeksforgeeks.org/bootstrap-interview-questions-and-answers/" target="_blank" rel="noopener"><span>Bootstrap Interview Questions And Answers</span></a></li><li value="2"><a href="https://www.geeksforgeeks.org/bootstrap-exercises/" target="_blank" rel="noopener"><span>Bootstrap Exercises, Practice Questions and Solutions</span></a></li><li value="3"><a href="https://www.geeksforgeeks.org/quizzes/bootstrap-quiz-set-1/" target="_blank" rel="noopener"><span>Bootstrap Quiz | Set-1</span></a></li><li value="4"><a href="https://www.geeksforgeeks.org/quizzes/bootstrap-quiz-set-2/" target="_blank" rel="noopener"><span>Bootstrap Quiz | Set-2</span></a></li><li value="5"><a href="https://www.geeksforgeeks.org/quizzes/bootstrap-quiz-set-3/" target="_blank" rel="noopener"><span>Bootstrap Quiz | Set-3</span></a></li></ul><h2 id="features-of-bootstrap"><span>Features of Bootstrap</span></h2><ul><li value="1"><b><strong>Grid System:</strong></b><span> Easily create responsive layouts with a flexible grid system that adjusts seamlessly to various screen sizes.</span></li><li value="2"><b><strong>Forms:</strong></b><span> Build user-friendly forms with diverse styles and functionalities, including validation.</span></li><li value="3"><b><strong>Buttons:</strong></b><span> Add customizable buttons of all shapes and sizes to enhance your website's interactivity.</span></li><li value="4"><b><strong>Navigation:</strong></b><span> Implement intuitive navigation menus, from simple dropdowns to advanced mega menus.</span></li><li value="5"><b><strong>Alerts:</strong></b><span> Effectively communicate with dismissible alerts, warnings, and success notifications.</span></li><li value="6"><b><strong>Images:</strong></b><span> Improve your website's visual appeal with responsive image handling.</span></li><li value="7"><b><strong>JavaScript Plugins:</strong></b><span> Integrate interactive features like modals, tooltips, and carousels using Bootstrap鈥檚 JavaScript plugins.</span></li></ul><h2 id="advantages-of-using-bootstrap"><span>Applications of Bootstrap</span></h2><ul><li value="1"><span>Creating Responsive Websites</span></li><li value="2"><span>Prototyping Web Applications</span></li><li value="3"><span>Developing Admin Dashboards</span></li><li value="4"><span>Building Landing Pages</span></li><li value="5"><span>Designing E-commerce Frontends</span></li></ul><h2><span>Bootstrap vs Other CSS Frameworks</span></h2><table><thead><tr><th><b><strong>Feature</strong></b></th><th><b><strong>Bootstrap</strong></b></th><th><b><strong>Tailwind CSS</strong></b></th><th><b><strong>Foundation</strong></b></th></tr></thead><tbody><tr><td><span>Design Philosophy</span></td><td><span>Pre-designed Components</span></td><td><span>Utility-first</span></td><td><span>Pre-designed Components</span></td></tr><tr><td><span>Learning Curve</span></td><td><span>Easy</span></td><td><span>Moderate</span></td><td><span>Moderate</span></td></tr><tr><td><span>Customization</span></td><td><span>Moderate</span></td><td><span>High</span></td><td><span>Moderate</span></td></tr><tr><td><span>Responsiveness</span></td><td><span>Built-in</span></td><td><span>Built-in</span></td><td><span>Built-in</span></td></tr><tr><td><span>Use Case</span></td><td><span>Quick Prototypes</span></td><td><span>Tailored Designs</span></td><td><span>Enterprise Websites</span></td></tr></tbody></table><div id="preFaqContent"></div><h2 id="faqs-bootstrap-tutorial"><span>Bootstrap Tutorial - FAQs</span></h2><h3 id="what-is-bootstrap-used-for"><b><strong>What is Bootstrap used for?</strong></b></h3><blockquote><p dir="ltr"><i><em class="GFGEditorTheme__textItalic">Bootstrap is used for developing responsive and visually appealing web pages and applications. It offers a variety of pre-designed components, such as navigation bars, buttons, forms, and modals, that help developers quickly create consistent and functional user interfaces. </em></i></p></blockquote><h3 id="what-is-bootstrap-cdn"><span>What is Bootstrap CDN?</span></h3><blockquote><p dir="ltr"><span>Bootstrap CDN (Content Delivery Network) is a service that allows developers to include Bootstrap鈥檚 CSS and JavaScript files in their projects without needing to host them locally. </span></p></blockquote><h3 id="what-is-the-current-bootstrap-version"><span>What is the current Bootstrap version?</span></h3><blockquote><p dir="ltr"><span>As of the most recent update, the current stable version of Bootstrap is Bootstrap 5. Bootstrap 5 includes new features, enhancements, and changes compared to previous versions, such as the removal of jQuery dependency and improved customizability. </span></p></blockquote><h3 id="is-bootstrap-a-free-framework"><b><strong>Is Bootstrap a free framework?</strong></b></h3><blockquote><p dir="ltr"><span>Yes, Bootstrap is a free and open-source framework. It is available for anyone to use and modify, making it accessible to developers of all levels. </span></p></blockquote><h3 id="which-is-better-tailwind-or-bootstrap"><span>Which is better, Tailwind or Bootstrap?</span></h3><blockquote><p dir="ltr"><span>The choice between Tailwind and Bootstrap depends on your project needs and preferences.</span></p><ul><li value="1"><b><strong>Bootstrap:</strong></b><span> Offers a comprehensive set of pre-styled components and a grid system, making it easier to quickly build and customize web pages with a consistent design.</span></li><li value="2"><b><strong>Tailwind CSS:</strong></b><span> Provides a utility-first approach, allowing for more granular and flexible customization of styles without predefined components.</span></li></ul></blockquote><h3 id="can-i-customize-bootstrap"><span>Can I customize Bootstrap?</span></h3><blockquote><p dir="ltr"><span>Yes, Bootstrap is highly customizable. You can override default styles using custom CSS or modify Bootstrap鈥檚 SASS variables to change the look and feel of components globally. </span></p></blockquote>  <div class='article_bottom_text'></div><br> <div id="video-tab-content" class="video-tab-content"> <div style="text-align: center; margin: 20px 0px;" id="GFG_AD_InContent_Desktop_728x280"></div> </div> <div class="d-row content-bw "style="margin-top: 20px;"> <div class="article-pgnavi_prev"><div class="comment_div" data-title="Comments"><button class="author_footer_btn" data-gfg-action="loadComments"> <div class='discussion_panel'> <i class='discussion_button'> </i> Comment </div></button></div><div class="trigger-div"><button class="author_footer_btn"><div class="more_info">More info<span class="more_info_uparrow gfg-icon gfg-icon_arrow-down-thin"></span></div></button></div> <a href="https://www.geeksforgeeks.org/about/contact-us/?listicles" target="_blank" class="advertise-with-us-div"><button class="advertise-with-us-btn"><span class="advertise-with-us-text">Advertise with us</span></button></a> </div> <div class="article-pgnavi_next"> <a href="https://www.geeksforgeeks.org/bootstrap-5/?ref=next_article" class="pg-head"> <span>Next Article</span> <span class="gfg-icon gfg-icon_next"></span> </a>  <div class="pg-main"> <a href="https://www.geeksforgeeks.org/bootstrap-5/?ref=next_article">Bootstrap 5 Tutorial</a> </div> </div> </div> <div class="more-info hidden-div"> <div class="article-meta-author-details "> <div class="article-meta-author-details-block"> <div class="article-meta-author-details-profile-display"> <div class="author_info"> <div class="article-meta-author-details-profile-display-icon"> <a href="https://www.geeksforgeeks.org/user/dharmendra_kumar/contributions/?itm_source=geeksforgeeks&itm_medium=article_author&itm_campaign=auth_user" style="text-decoration: none;"><div class="image-wrap" style="position: relative"><p class="profileCard-profile-picture" style="background-color:#FFC8AF; margin:0px;">D</p> <div style="position: absolute;top: -35px; left: -13px;"> <i class="gfg-badge-icon md master"></i> </div> </div> </a> </div> <div class="article-meta-author-details-profile-display-name" > <a aria-label="author profile" href="https://www.geeksforgeeks.org/user/dharmendra_kumar/contributions/?itm_source=geeksforgeeks&itm_medium=article_author&itm_campaign=auth_user" style="display: block;overflow: hidden;width: 65px;text-decoration: none;text-overflow: ellipsis;color: var(--gfg-title-color);font-weight: bold;white-space: nowrap;">dharmendra_kumar</a> </div> </div> <div class="author_follow_btn"><div class="article-meta-author-details-follow-button"> <div class="follow-container"> <div class="follow-btn" > <button id="followAuthor" type="button" onclick ="followOrUnfollowAuthor()" value="dharmendra_kumar"> <span role="img" aria-label="plus" class="plus-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span> <span>Follow</span></button></div></div></div></div> </div> </div> <div class="article_bottom_suggestion_wrapper"> <div class="article_bottom_suggestion" data-title="Follow"> <a href='https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen' target="_blank"> <img class="gfg-icon_Gnews no-zoom-in-cursor" src=https://media.geeksforgeeks.org/auth-dashboard-uploads/Google-news.svg loading="lazy" alt="News"></img> </a> </div> <div pid="1270247" class="article--viewer_like tooltip tooltipBottom" data-title="Like Article">  <button id="likeButton" aria-label="like article" data-gfg-action="like-article" data-bookmark-value="0" data-liked="false" style="color: #5B5A5A !important; display: flex; align-items: center; background-color: unset; margin: 0px !important; padding: 5px 0px;"> <i class="author-badge-like-button"></i> <figure id="likeCount" style="margin-left: 3px; margin-top: 4px; color: var(--like-count-color); font-size: 14px; font-weight: 600;" class="favoriteText"></figure> </button> </div> <div class="article_bottom_suggestion" onclick="improveArticleCall()" data-title="Improve"> <span class="improveTooltipBottom">Improve</span> <i class="author-badge-improvement-button"></i> </div> </div> </div> <div class="bottom-wrap" style="margin-top: 12px; margin-bottom: 25px;"> <div class="improved"> <div class="t-head">Article Tags : </div> <ul> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/category/web-technologies/bootstrap/?ref=article_category">Bootstrap</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/category/web-technologies/?ref=article_category">Web Technologies</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/tag/web-tech-tutorials/?ref=article_tag">Web-Tech Tutorials</a> </li> <li style="border-radius: 25px;" class=""> <a href="https://www.geeksforgeeks.org/tag/tutorials/?ref=article_tag">Tutorials</a> </li> </ul> </div> </div> </div> </article> <div class="article--recommended article--recommended_wrapper" id="similar-reads"> <h3 class="new-top-bar top-bar-title">Similar Reads</h3> <div class="gfg-similar-reads-list"> <ul class="similarReadLeftBarList"><div class="second"><li class="currentpage similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap Tutorial </div> <div class="gfg-similar-read-item-subheading">Bootstrap is a popular front-end framework for building responsive and mobile-first websites. It provides pre-designed CSS, JavaScript components, and utility classes to quickly create modern and consistent user interfaces. It Includes pre-built responsive grid systems for mobile-first design.Offers</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-5/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 5 Tutorial </div> <div class="gfg-similar-read-item-subheading">Bootstrap 5 is a front-end framework that helps developers create responsive and visually appealing websites quickly and efficiently. Bootstrap 5 simplifies the process of web development with its intuitive design system and extensive components. This version includes improved responsiveness, stream</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">7 min read</span> </div> </a></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-4-tutorial/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 4 Tutorial </div> <div class="gfg-similar-read-item-subheading">Bootstrap 4 is an open-source framework for creating responsive web applications. It is the most popular CSS framework for creating mobile-first websites. It is free to use we can directly integrate Bootstrap 4 into our project using CDN Links or with npm. Bootstrap 4 Tutorial is designed to help be</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a></li><div class="leftbar-dropdown"><h2 class="dropdown-title">Bootstrap 5<span class="gfg-icon gfg-icon_arrow-down-thin"></span></h2><ul style="display: none;"><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-5-introduction/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 5 Introduction </div> <div class="gfg-similar-read-item-subheading">Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-5-progress/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 5 Progress </div> <div class="gfg-similar-read-item-subheading">Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. You can add a progress bar o</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">5 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-5-buttons/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 5 Buttons </div> <div class="gfg-similar-read-item-subheading">Bootstrap 5 Buttons are pre-styled components in the Bootstrap framework, offering consistent design and functionality. They streamline development by providing ready-to-use button styles, sizes, and behaviors, ensuring a cohesive and responsive user interface across web applications with minimal CS</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-5-badges/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 5 Badges </div> <div class="gfg-similar-read-item-subheading">Bootstrap 5 Badges are small components used to highlight specific information, typically in lists or inline with other content. They provide visual cues through colored backgrounds and customizable text, helping to draw attention to key details or status indicators within a webpage or application.</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-5-alerts/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 5 Alerts </div> <div class="gfg-similar-read-item-subheading">Bootstrap 5 Alerts are customizable components used to convey important information to users. They come in various styles such as success, warning, danger, and info, providing visual feedback to users based on different actions or states within a web application. iframe { width: 100%; height: 450px;</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-5-modal/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 5 Modal </div> <div class="gfg-similar-read-item-subheading">Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. Theyâre positioned over eve</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">8 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li></ul></div><div class="leftbar-dropdown"><h2 class="dropdown-title">Bootstrap 4<span class="gfg-icon gfg-icon_arrow-down-thin"></span></h2><ul style="display: none;"><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-4-introduction/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 4 Introduction </div> <div class="gfg-similar-read-item-subheading">Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compati</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-4-grid-system/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 4 | Grid System </div> <div class="gfg-similar-read-item-subheading">Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. All combinations of values summing up to 12 can be used. Grid Classes: Bootstrap grid system contains five classes which are listed below: .col- It is used f</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-4-typography/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 4 | Typography </div> <div class="gfg-similar-read-item-subheading">Typography is a feature of Bootstrap for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles, and much more. Bootstrap support global settings for the font stack, Headings and Link</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-4-colors/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 4 | Colors </div> <div class="gfg-similar-read-item-subheading">Text Colors: Bootstrap provides many classes to set the text color of an element. All classes of text colors are listed below: Example: This example uses text color class to set the color of text content. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-4-tables/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 4 | Tables </div> <div class="gfg-similar-read-item-subheading">Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive. Simple Table: The .t</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">9 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-4-images/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap 4 Images </div> <div class="gfg-similar-read-item-subheading">Bootstrap 4 provides classes to style images responsively, including responsive images that automatically adjust the size based on screen width, image shapes such as rounded or circular, and image thumbnails with optional borders and captions, facilitating flexible and attractive image layouts. The</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li></ul></div><div class="leftbar-dropdown"><h2 class="dropdown-title">Bootstrap Questions<span class="gfg-icon gfg-icon_arrow-down-thin"></span></h2><ul style="display: none;"><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/how-to-design-bootstrap-fullscreen-select-feature-for-mobiles/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to design Bootstrap Fullscreen Select feature for Mobiles ? </div> <div class="gfg-similar-read-item-subheading">In this article, we will learn how to design Bootstrap fullscreen select feature for mobile devices. It provides advanced HTML full screen select functionality.It provides in and out animations.It provides open and close events function callbacks.It provides CSS3 animated buttons, dropdowns and text</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/how-to-use-top-navigation-with-left-navigation-bar-using-bootstrap/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to use Top Navigation with Left Navigation Bar using Bootstrap? </div> <div class="gfg-similar-read-item-subheading">Using Top Navigation with Left Navigation Bar in Bootstrap means creating a layout with a responsive top navigation bar (typically for global site navigation) and a left sidebar for additional links or menus. This combines Bootstrapâs grid system, navbar classes, and custom CSS for layout management</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/how-to-put-two-columns-one-below-other-in-sidebar-in-bootstrap/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to put two columns one below other in sidebar in Bootstrap? </div> <div class="gfg-similar-read-item-subheading">To place two columns one below the other in a sidebar using Bootstrap, you can use Bootstrap's grid system. By setting up a vertical stacking of columns within a sidebar container, you ensure that the columns appear one below the other. This is achieved by using a single column width and placing the</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">5 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/how-to-always-show-first-two-rows-in-dynamic-collapse-using-bootstrap/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to always show first two rows in dynamic collapse using Bootstrap ? </div> <div class="gfg-similar-read-item-subheading">Bootstrap is an open-source front-end CSS framework used widely for the development of interactive websites. Bootstrap with HTML and JavaScript adds interactivity to the user interface. jQuery is a JS library used for the manipulation of HTML DOM, event handling, CSS animations, and Ajax. jQuery is</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">6 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/how-to-add-a-black-hover-to-an-image-using-bootstrap/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to add a black hover to an image using bootstrap? </div> <div class="gfg-similar-read-item-subheading">Bootstrap is a popular CSS framework widely used by frontend developers to create interactive UI for web applications. Bootstrap is widely used because of its simplicity and ease to use. Bootstrap allows multiple utilities to make images interactive. One of these utilities can be changing the color</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/how-to-create-full-width-container-using-bootstrap/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to create full width container using bootstrap? </div> <div class="gfg-similar-read-item-subheading">Bootstrap offers two types of containers: fixed-width containers and full-width, fluid containers. The container-fluid class is used to create a full-width container that spans the entire width of the viewport, adjusting dynamically as the viewport size changes. Container Types in BootstrapFixed-Wid</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">3 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/how-to-fit-the-image-into-modal-popup-using-bootstrap/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">How to fit the image into modal popup using Bootstrap? </div> <div class="gfg-similar-read-item-subheading">Modal plugin allows us to add a dialog popup window that is displayed on top of the current page. Bootstrap provides an easy, yet effective way to incorporate modal into our web pages. Modal can consist of any content along with a header and footer. Images can be fitted in modal popup using Bootstra</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">2 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li><li class="similarReadDropdownItem"><a href="https://www.geeksforgeeks.org/bootstrap-examples/?ref=lbp"><div class="gfg-similar-read-item-content"> <div class="gfg-similar-read-item-heading">Bootstrap Examples </div> <div class="gfg-similar-read-item-subheading">The following Bootstrap section contains a wide collection of Bootstrap examples. These examples are categorized based on the topics including basics, directives, functions, and many more. Each example may contain multiple approaches to solve the problem. Table of Content CustomizeLayoutContentForms</div> </div> <div class="reading-time"> <i class="reading-time-icon" data-gfg-action="readingtime"></i> <span style="color: var(--recommendation-card-text-color);font-size: 14px;font-weight: 500;line-height: 17px;">4 min read</span> </div> </a><hr style="background:var(--gfg-selected-color); width:70%; margin: 0 auto;"></li></ul></div></div></ul> </div> </div> <div class="vote-wrap"> <div style="display:none;align-items:center;justify-content:center;width:100%;"> <button aria-label="like" data-type="like" class="vote-this" style="margin-right: 0; margin-left:0 ;"> <i class="gfg-icon gfg-icon_like favoriteIcon"></i> <span class="favoriteLike">Like</span> <figure class="favoriteText"></figure> </button> </div> </div> </div> <div class="article-meta"> <div class="bottom-wrap"> <div id="GFG_AD_InContent_Desktop_BTF_650x250" style="text-align:center;max-height: 300px;"></div> </div>  </div> </div> </div> </div> <div id="report_modal_content" class="report_modal_content" style="display:hidden;"></div> <div class="onopen-discussion-panel"> <div class="discussion-tab"> <div class="discussion_heading"> <div></div> <i class="gfg-icon close-tab-icon"></i> </div> <div class="discussion_content"> <div style="height:100%"> <div style="height:100%" id="comment-system"></div> </div> </div> </div> </div> <div class="rightBar" style="padding-right: 5px;"> <style> .article--container_content{ align-items: unset !important; } .sideBar { position: sticky !important; } .gfg-icon_switch::after { background-position: -40px -281px !important; } .gfg-icon_transaction::after { background-position: -40px -321px !important; } .header-main__profile.selected+.mega-dropdown{ width: 225px !important; } #courses-container .course-price{ display:none; } /* .side--container_wscard .card-content .content .meta:empty, .practiceBannerFromPlugin{ display:none !important; } */ .side--container_wscard .card-content .content .meta{ display:block !important; } .side--container_wscard .card-content .content .meta p{ background-color: rgba(254, 212, 91, 0.6); font-size: 10pt; font-weight: bold; display: inline-block; color: var(--color-black); margin-top: 15px; padding: 0px 5px; } #try-it{ display:initial !important; } #try-it .try-it-div{ line-height: 34px; } .gfg-icon_dark-mode::after { background-position: -40px -680px; } .side--container_wscard .head{ font-size: 14px !important; } .nineDot-menu, .gfg-icon_ndot{ display: none; } #text-15{ flex-direction: column; } .mtq_correct_marker, .mtq_wrong_marker{ display: none; } .sidebar_wrapper > :last-child{ margin: unset !important; margin-left: 5px !important; margin-top: 20px !important; top: 70px !important; } .darkMode-wrap{ bottom:1% !important; } #secondary .textwidget{ margin-left: auto; margin-right: 0; text-align: right; } #secondary .widget_text:last-child{ top: 70px !important; } @media(max-width:768px){ #scrollTopBtn{ display:none !important; } } .rightbar_loggedin_promo_cta{ display:flex; cursor:pointer; margin-bottom:20px; } </style> <div id="secondary" class="widget-area"> <div class='OINTechPromoRightBarBanner' id='rightBarSaleBanner' style='text-align:right; margin-bottom:5px;'><a href=https://www.geeksforgeeks.org/geeksforgeeks-premium-subscription?itm_source=geeksforgeeks&itm_medium=rightbar_oin&itm_campaign=premium><img src=https://media.geeksforgeeks.org/auth-dashboard-uploads/premium_oin_rbar_min.png alt='three90RightbarBannerImg' style='width:300px; height:250px;'></a></div>  <aside id="text-15" class="widget widget_text"> <div class="textwidget"> <div id="_GFG_ABP_Desktop_RightSideBar_ATF_300x600_2"></div> <div id="GFG_AD_Desktop_RightSideBar_ATF_300x250_2" style="min-width: 300px;margin-bottom:10px;"></div> <div id='GFG_AD_Desktop_RightSideBar_ATF_300x600' style='min-width: 300px; min-height: 600px;margin-bottom:10px;'></div> </div> </aside>  <aside id="text-16" class="widget widget_text"> <div class="textwidget"> <div id="_GFG_ABP_Desktop_RightSideBar_MTF_300x600"></div> <div id='GFG_AD_Desktop_RightSideBar_MTF_300x250' style='min-width: 300px;'></div> <div id="_GFG_ABP_Desktop_RightSideBar_BTF_300x600"></div> <div id="_GFG_ABP_Desktop_RightSideBar_BTF_300x600_3"></div> </div> </aside>    <aside id="text-18" class="widget widget_text"> <div class="textwidget"> <div id='GFG_AD_Desktop_RightSideBar_BTF_Sticky_300x250' style='min-width: 300px;margin-bottom:10px'></div> <div id='GFG_AD_Desktop_RightSideBar_Docked_160x600' style='min-width: 160px;'></div><div id='GFG_AD_Desktop_RightSideBar_BTFdocked_300x600' style='min-width: 300px;'></div> </aside>  <aside id="text-20" class="widget widget_text"> <div class="textwidget">  </div> </aside> </div> <div id="user-personal-note" style="display: none;"></div> </div> </div> <section class="disqus-section"> <div class="article-page_flex"> <div class="leftBar"> </div> </div> </section> </div> <div id="video-popup" style="display:none"></div> <link rel="stylesheet" href='https://www.geeksforgeeks.org/wp-content/themes/iconic-one/css/articleList.min.css?ver=1.7'> <script> $(document).ready(function() { var isfollowingApiCall = false; if ($('.follow-btn').length) { var articleRecommendedTop = $(".article--recommended").offset().top; var articleRecommendedBottom = articleRecommendedTop + $(".article--recommended").outerHeight(); $(window).scroll(function() { var top_of_element = $(".article--recommended").offset().top; var bottom_of_element = $(".article--recommended").offset().top + $(".article--recommended").outerHeight(); var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight(); var top_of_screen = $(window).scrollTop(); if ((bottom_of_screen > top_of_element && top_of_screen < bottom_of_element) || (bottom_of_screen > articleRecommendedTop && top_of_screen < articleRecommendedBottom) || (top_of_screen > articleRecommendedBottom)) { if (!isfollowingApiCall) { isfollowingApiCall = true; setTimeout(function(){ if (loginData && loginData.isLoggedIn) { if (loginData.userName !== $('#followAuthor').val()) { is_following(); } else { $('.profileCard-profile-picture').css('background-color', '#E7E7E7'); } } else { $('.follow-btn').removeClass('hideIt'); } }, 3000); } } }); } $(".accordion-header").click(function() { var arrowIcon = $(this).find('.bottom-arrow-icon'); arrowIcon.toggleClass('rotate180'); }); }); window.isReportArticle = false; function report_article(){ if (!loginData || !loginData.isLoggedIn) { const loginModalButton = $('.login-modal-btn') if (loginModalButton.length) { loginModalButton.click(); } return; } if(!window.isReportArticle){ //to add loader $('.report-loader').addClass('spinner'); jQuery('#report_modal_content').load(gfgSiteUrl+'wp-content/themes/iconic-one/report-modal.php', { PRACTICE_API_URL: practiceAPIURL, PRACTICE_URL:practiceURL },function(responseTxt, statusTxt, xhr){ if(statusTxt == "error"){ alert("Error: " + xhr.status + ": " + xhr.statusText); } }); }else{ window.scrollTo({ top: 0, behavior: 'smooth' }); $("#report_modal_content").show(); } } function closeShareModal() { const shareOption = document.querySelector('[data-gfg-action="share-article"]'); shareOption.classList.remove("hover_share_menu"); let shareModal = document.querySelector(".hover__share-modal-container"); shareModal && shareModal.remove(); } function openShareModal() { closeShareModal(); // Remove existing modal if any let shareModal = document.querySelector(".three_dot_dropdown_share"); shareModal.appendChild(Object.assign(document.createElement("div"), { className: "hover__share-modal-container" })); document.querySelector(".hover__share-modal-container").append( Object.assign(document.createElement('div'), { className: "share__modal" }), ); document.querySelector(".share__modal").append(Object.assign(document.createElement('h1'), { className: "share__modal-heading" }, { textContent: "Share to" })); const socialOptions = ["LinkedIn", "WhatsApp", "Copy Link"]; socialOptions.forEach((socialOption) => { const socialContainer = Object.assign(document.createElement('div'), { className: "social__container" }); const icon = Object.assign(document.createElement("div"), { className: `share__icon share__${socialOption.split(" ").join("")}-icon` }); const socialText = Object.assign(document.createElement("span"), { className: "share__option-text" }, { textContent: `${socialOption}` }); const shareLink = (socialOption === "Copy Link") ? Object.assign(document.createElement('div'), { role: "button", className: "link-container CopyLink" }) : Object.assign(document.createElement('a'), { className: "link-container" }); if (socialOption === "LinkedIn") { shareLink.setAttribute('href', `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`); shareLink.setAttribute('target', '_blank'); } if (socialOption === "WhatsApp") { shareLink.setAttribute('href', `https://api.whatsapp.com/send?text=${window.location.href}`); shareLink.setAttribute('target', "_blank"); } shareLink.append(icon, socialText); socialContainer.append(shareLink); document.querySelector(".share__modal").appendChild(socialContainer); //adding copy url functionality if(socialOption === "Copy Link") { shareLink.addEventListener("click", function() { var tempInput = document.createElement("input"); tempInput.value = window.location.href; document.body.appendChild(tempInput); tempInput.select(); tempInput.setSelectionRange(0, 99999); // For mobile devices document.execCommand('copy'); document.body.removeChild(tempInput); this.querySelector(".share__option-text").textContent = "Copied" }) } }); document.querySelector(".hover__share-modal-container").addEventListener("mouseover", () => document.querySelector('[data-gfg-action="share-article"]').classList.add("hover_share_menu")); } function toggleLikeElementVisibility(selector, show) { document.querySelector(`.${selector}`).style.display = show ? "block" : "none"; } function closeKebabMenu(){ document.getElementById("myDropdown").classList.toggle("show"); } </script>  <script> $(document).ready(function() { $("#showMoreTagsBtn").click(function() { $('.articles-hidden-tags').show(); $(this).hide(); }); $("#showMorePracticeTagsBtn").click(function() { $(".practice-tags li:nth-child(n+5)").show(); $(this).hide(); }); }); </script>  <style> .grecaptcha-badge { visibility: hidden !important; } .thank-you-message { height: 100%; display:flex; flex-direction: column; justify-content: center; align-items: center; } .thank-you-message-content { margin-top: 17px; font: 400 20px var(--font-secondary); color: var(--improve-modal-text); line-height: 180%; text-align: center; } .thank-you-message-content h2{ font-family: var(--font-secondary); } .all-footer-information{ width: 100% !important;; } .footer-wrapper_links-list{ margin-block-start: 0em !important; width: 16% !important; padding-inline-start: 18px !important; } .link-head{ margin-bottom: 0px; } @media only screen and (max-width:1340px) { .footer-wrapper_links-list{ overflow-wrap: break-word; } } @media screen and (min-width: 991px) { .all-footer-information{ padding-left:15px; } } @media only screen and (max-width:980px) { .footer-wrapper_branding-address{ padding-top: 10px; } } @media (max-width: 750px) { .thank-you-message-content{ font-size: 14px; line-height: 170%; } } /* CSS variable meant to handle the dark and light mode icon for three 90 event in header courses dropdown */ :root{ --three90headericon : url('https://media.geeksforgeeks.org/auth-dashboard-uploads/three90daylogocompressed.svg'); --three90headericonposition : 0px -40px; --three90leftbarimggrid : url('https://media.geeksforgeeks.org/auth-dashboard-uploads/three90leftbarspritecompressed.svg'); --three90leftbarimgposition : -5px -55px; --three90leftbarbgcolour : #b3abd0; } body[data-dark-mode="true"]{ --three90leftbarimgposition : -6px 1px; --three90headericonposition : 0px 0px; --three90leftbarbgcolour: #8c82b9; } .three90leftbarimg{ margin-left: -5px; height: 30px; background-image: var(--three90leftbarimggrid); background-repeat: no-repeat; background-position: var(--three90leftbarimgposition); background-size: 212px; } .courseTabShimmer{ position: absolute; height: 110%; width: 0; opacity: .7; -webkit-animation: courseShimmer 2s cubic-bezier(0,0,.07,.61) infinite; animation: courseShimmer 2s cubic-bezier(0,0,.07,.61) infinite; box-shadow: 0 0 25px 5px #dddcdc; -webkit-transform: rotate(90deg); transform: rotate(90deg); padding:0px !important; border:unset !important; } @keyframes courseShimmer{ 0% { left: 0; } 55% { left: 100%; } 99% { left: 110%; } } </style> </div> <div id="displayModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="error-message"></div>  <div class="modal-body" id="dmBody"> <div id="modal-dm-content"></div> <div class="modal-overlay" aria-hidden=true> <span class="loader__animation"></span> </div>  </div> </div> </div> </div> <div id="displayModalBackdrop" class="backdrop"></div>  <footer class="gfg-footer" id="gfg-footer"> <div class="footer-wrapper"> <div class="footer-wrapper_branding"> <a class="footer-wrapper_branding-anchor" aria-label="GeeksforGeeks Logo" href="https://www.geeksforgeeks.org/"> <img style="height: 32px; width: 230px; max-width: fit-content;" class="footer-wrapper_branding-nlogo" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/gfgFooterLogo.png" alt="geeksforgeeks-footer-logo"/> </a> <div class="footer-wrapper_branding-address"> <div class="address_section"> <div class="address-icon-wrapper"> <i class="gfg-icon gfg-icon_pin"></i> <div class="address_div"> <div class="address_name">Corporate & Communications Address:</div> <div class="footer-address"> A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305) </div> </div> </div> <div class="address-icon-wrapper"> <i class="gfg-icon gfg-icon_pin"></i> <div class="address_div"> <div class="address_name">Registered Address:</div> K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305 </div> </div> </div> </div> <div class="footer-wrapper_branding-social"> <a href="https://www.facebook.com/geeksforgeeks.org/" rel="noopener noreferrer" aria-label="GeeksforGeeks Facebook" target="_blank"> <div class="facebook"></div> </a> <a href="https://www.instagram.com/geeks_for_geeks/" rel="noopener noreferrer" aria-label="GeeksforGeeks Instagram" target="_blank"> <div class="instagram"></div> </a> <a href="https://in.linkedin.com/company/geeksforgeeks" rel="noopener noreferrer" aria-label="GeeksforGeeks LinkedIn" target="_blank"> <div class="linkedin"></div> </a> <a href="https://twitter.com/geeksforgeeks" rel="noopener noreferrer" aria-label="GeeksforGeeks Twitter" target="_blank"> <div class="twitter"></div> </a> <a href="https://www.youtube.com/geeksforgeeksvideos" rel="noopener noreferrer" aria-label="GeeksforGeeks YouTube" target="_blank"> <div class="youtube"></div> </a> </div> <div class="footer-wrapper_branding-app"> <a aria-label="GeeksforGeeks App Link" href="https://geeksforgeeksapp.page.link/gfg-app" target="_blank" ><img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/googleplay.png" alt="GFG App on Play Store" id="gplay" loading="lazy"></a> <a aria-label="GeeksforGeeks App Link" href="https://geeksforgeeksapp.page.link/gfg-app" target="_blank"><img src="https://media.geeksforgeeks.org/auth-dashboard-uploads/appstore.png" alt="GFG App on App Store" id="appstore" loading="lazy"></a> </div> <div class="footer_advertise_btn_box"> <a href="https://www.geeksforgeeks.org/advertise-with-us/?ref=footer" target="_blank" class="footer_advertise_btn">Advertise with us</a> </div> </div> <div class="all-footer-information"> <div class="footer-wrapper_links" style="justify-content: space-between; text-align: -webkit-left;"><ul class="footer-wrapper_links-list" ><li>Company</li><li><a href=https://www.geeksforgeeks.org/about/?ref=outindfooter>About Us</a></li><li><a href=https://www.geeksforgeeks.org/legal/?ref=outindfooter>Legal</a></li><li><a href=https://www.geeksforgeeks.org/legal/privacy-policy/?ref=outindfooter>Privacy Policy</a></li><li><a href=https://www.geeksforgeeks.org/press-release/?ref=outindfooter>In Media</a></li><li><a href=https://www.geeksforgeeks.org/about/contact-us/?ref=outindfooter>Contact Us</a></li><li><a href=https://www.geeksforgeeks.org/advertise-with-us/?ref=outindfooter>Advertise with us</a></li><li><a href=https://www.geeksforgeeks.org/gfg-corporate-solution/?ref=outindfooter>GFG Corporate Solution</a></li><li><a href=https://www.geeksforgeeks.org/campus-training-program/?ref=outindfooter>Placement Training Program</a></li><li><a href=https://www.geeksforgeeks.org/community/?ref=outindfooter>GeeksforGeeks Community</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/introduction-to-programming-languages/?ref=outindfooter>Languages</a></li><li><a href=https://www.geeksforgeeks.org/python-programming-language/?ref=outindfooter>Python</a></li><li><a href=https://www.geeksforgeeks.org/java/?ref=outindfooter>Java</a></li><li><a href=https://www.geeksforgeeks.org/c-plus-plus/?ref=outindfooter>C++</a></li><li><a href=https://www.geeksforgeeks.org/php-tutorials/?ref=outindfooter>PHP</a></li><li><a href=https://www.geeksforgeeks.org/golang/?ref=outindfooter>GoLang</a></li><li><a href=https://www.geeksforgeeks.org/sql-tutorial/?ref=outindfooter>SQL</a></li><li><a href=https://www.geeksforgeeks.org/r-tutorial/?ref=outindfooter>R Language</a></li><li><a href=https://www.geeksforgeeks.org/android-tutorial/?ref=outindfooter>Android Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/geeksforgeeks-online-tutorials-free/?ref=outindfooter>Tutorials Archive</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/learn-data-structures-and-algorithms-dsa-tutorial/?ref=outindfooter>DSA</a></li><li><a href=https://www.geeksforgeeks.org/data-structures/?ref=outindfooter>Data Structures</a></li><li><a href=https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=outindfooter>Algorithms</a></li><li><a href=https://www.geeksforgeeks.org/complete-guide-to-dsa-for-beginners/?ref=outindfooter>DSA for Beginners</a></li><li><a href=https://www.geeksforgeeks.org/basic-coding-problems-in-dsa-for-beginners/?ref=outindfooter>Basic DSA Problems</a></li><li><a href=https://www.geeksforgeeks.org/complete-roadmap-to-learn-dsa-from-scratch/?ref=outindfooter>DSA Roadmap</a></li><li><a href=https://www.geeksforgeeks.org/top-100-data-structure-and-algorithms-dsa-interview-questions-topic-wise/?ref=outindfooter>Top 100 DSA Interview Problems</a></li><li><a href=https://www.geeksforgeeks.org/dsa-roadmap-for-beginner-to-advanced-by-sandeep-jain/?ref=outindfooter>DSA Roadmap by Sandeep Jain</a></li><li><a href=https://www.geeksforgeeks.org/geeksforgeeks-master-sheet-list-of-all-cheat-sheets/?ref=outindfooter>All Cheat Sheets</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/ai-ml-ds/?ref=outindfooter>Data Science & ML</a></li><li><a href=https://www.geeksforgeeks.org/data-science-tutorial/?ref=outindfooter>Data Science With Python</a></li><li><a href=https://www.geeksforgeeks.org/data-science-for-beginners/?ref=outindfooter>Data Science For Beginner</a></li><li><a href=https://www.geeksforgeeks.org/machine-learning/?ref=outindfooter>Machine Learning</a></li><li><a href=https://www.geeksforgeeks.org/machine-learning-mathematics/?ref=outindfooter>ML Maths</a></li><li><a href=https://www.geeksforgeeks.org/python-data-visualization-tutorial/?ref=outindfooter>Data Visualisation</a></li><li><a href=https://www.geeksforgeeks.org/pandas-tutorial/?ref=outindfooter>Pandas</a></li><li><a href=https://www.geeksforgeeks.org/numpy-tutorial/?ref=outindfooter>NumPy</a></li><li><a href=https://www.geeksforgeeks.org/natural-language-processing-nlp-tutorial/?ref=outindfooter>NLP</a></li><li><a href=https://www.geeksforgeeks.org/deep-learning-tutorial/?ref=outindfooter>Deep Learning</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/web-technology/?ref=outindfooter>Web Technologies</a></li><li><a href=https://www.geeksforgeeks.org/html/?ref=outindfooter>HTML</a></li><li><a href=https://www.geeksforgeeks.org/css/?ref=outindfooter>CSS</a></li><li><a href=https://www.geeksforgeeks.org/javascript/?ref=outindfooter>JavaScript</a></li><li><a href=https://www.geeksforgeeks.org/typescript/?ref=outindfooter>TypeScript</a></li><li><a href=https://www.geeksforgeeks.org/learn-reactjs/?ref=outindfooter>ReactJS</a></li><li><a href=https://www.geeksforgeeks.org/nextjs/?ref=outindfooter>NextJS</a></li><li><a href=https://www.geeksforgeeks.org/bootstrap/?ref=outindfooter>Bootstrap</a></li><li><a href=https://www.geeksforgeeks.org/web-design/?ref=outindfooter>Web Design</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/python-programming-language/?ref=outindfooter>Python Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/python-programming-examples/?ref=outindfooter>Python Programming Examples</a></li><li><a href=https://www.geeksforgeeks.org/python-projects-beginner-to-advanced/?ref=outindfooter>Python Projects</a></li><li><a href=https://www.geeksforgeeks.org/python-tkinter-tutorial/?ref=outindfooter>Python Tkinter</a></li><li><a href=https://www.geeksforgeeks.org/python-web-scraping-tutorial/?ref=outindfooter>Web Scraping</a></li><li><a href=https://www.geeksforgeeks.org/opencv-python-tutorial/?ref=outindfooter>OpenCV Tutorial</a></li><li><a href=https://www.geeksforgeeks.org/python-interview-questions/?ref=outindfooter>Python Interview Question</a></li><li><a href=https://www.geeksforgeeks.org/django-tutorial/?ref=outindfooter>Django</a></li></ul></div><div class="footer-wrapper_links" style="justify-content: space-between; text-align: -webkit-left;"><ul class="footer-wrapper_links-list" style="margin-block-start: 0em; width:16%; padding-inline-start: 18px;"><li>Computer Science</li><li><a href=https://www.geeksforgeeks.org/operating-systems/?ref=outindfooter>Operating Systems</a></li><li><a href=https://www.geeksforgeeks.org/computer-network-tutorials/?ref=outindfooter>Computer Network</a></li><li><a href=https://www.geeksforgeeks.org/dbms/?ref=outindfooter>Database Management System</a></li><li><a href=https://www.geeksforgeeks.org/software-engineering/?ref=outindfooter>Software Engineering</a></li><li><a href=https://www.geeksforgeeks.org/digital-electronics-logic-design-tutorials/?ref=outindfooter>Digital Logic Design</a></li><li><a href=https://www.geeksforgeeks.org/engineering-mathematics-tutorials/?ref=outindfooter>Engineering Maths</a></li><li><a href=https://www.geeksforgeeks.org/software-development/?ref=outindfooter>Software Development</a></li><li><a href=https://www.geeksforgeeks.org/software-testing-tutorial/?ref=outindfooter>Software Testing</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/devops-tutorial/?ref=outindfooter>DevOps</a></li><li><a href=https://www.geeksforgeeks.org/git-tutorial/?ref=outindfooter>Git</a></li><li><a href=https://www.geeksforgeeks.org/linux-tutorial/?ref=outindfooter>Linux</a></li><li><a href=https://www.geeksforgeeks.org/aws-tutorial/?ref=outindfooter>AWS</a></li><li><a href=https://www.geeksforgeeks.org/docker-tutorial/?ref=outindfooter>Docker</a></li><li><a href=https://www.geeksforgeeks.org/kubernetes-tutorial/?ref=outindfooter>Kubernetes</a></li><li><a href=https://www.geeksforgeeks.org/microsoft-azure/?ref=outindfooter>Azure</a></li><li><a href=https://www.geeksforgeeks.org/google-cloud-platform-tutorial/?ref=outindfooter>GCP</a></li><li><a href=https://www.geeksforgeeks.org/devops-roadmap/?ref=outindfooter>DevOps Roadmap</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/system-design-tutorial/?ref=outindfooter>System Design</a></li><li><a href=https://www.geeksforgeeks.org/what-is-high-level-design-learn-system-design/?ref=outindfooter>High Level Design</a></li><li><a href=https://www.geeksforgeeks.org/what-is-low-level-design-or-lld-learn-system-design/?ref=outindfooter>Low Level Design</a></li><li><a href=https://www.geeksforgeeks.org/unified-modeling-language-uml-introduction/?ref=outindfooter>UML Diagrams</a></li><li><a href=https://www.geeksforgeeks.org/system-design-interview-guide/?ref=outindfooter>Interview Guide</a></li><li><a href=https://www.geeksforgeeks.org/software-design-patterns/?ref=outindfooter>Design Patterns</a></li><li><a href=https://www.geeksforgeeks.org/object-oriented-analysis-and-design/?ref=outindfooter>OOAD</a></li><li><a href=https://www.geeksforgeeks.org/system-design-interview-bootcamp-guide/?ref=outindfooter>System Design Bootcamp</a></li><li><a href=https://www.geeksforgeeks.org/most-commonly-asked-system-design-interview-problems-questions/?ref=outindfooter>Interview Questions</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/technical-interview-preparation/?ref=outindfooter>Inteview Preparation</a></li><li><a href=https://www.geeksforgeeks.org/competitive-programming-a-complete-guide/?ref=outindfooter>Competitive Programming</a></li><li><a href=https://www.geeksforgeeks.org/top-algorithms-and-data-structures-for-competitive-programming/?ref=outindfooter>Top DS or Algo for CP</a></li><li><a href=https://www.geeksforgeeks.org/company-wise-recruitment-process/?ref=outindfooter>Company-Wise Recruitment Process</a></li><li><a href=https://www.geeksforgeeks.org/company-preparation/?ref=outindfooter>Company-Wise Preparation</a></li><li><a href=https://www.geeksforgeeks.org/aptitude-questions-and-answers/?ref=outindfooter>Aptitude Preparation</a></li><li><a href=https://www.geeksforgeeks.org/puzzles/?ref=outindfooter>Puzzles</a></li></ul><ul class="footer-wrapper_links-list" ><li>School Subjects</li><li><a href=https://www.geeksforgeeks.org/maths/?ref=outindfooter>Mathematics</a></li><li><a href=https://www.geeksforgeeks.org/physics/?ref=outindfooter>Physics</a></li><li><a href=https://www.geeksforgeeks.org/chemistry/?ref=outindfooter>Chemistry</a></li><li><a href=https://www.geeksforgeeks.org/biology/?ref=outindfooter>Biology</a></li><li><a href=https://www.geeksforgeeks.org/social-science/?ref=outindfooter>Social Science</a></li><li><a href=https://www.geeksforgeeks.org/english-grammar/?ref=outindfooter>English Grammar</a></li><li><a href=https://www.geeksforgeeks.org/commerce/?ref=outindfooter>Commerce</a></li><li><a href=https://www.geeksforgeeks.org/tag/world-general-knowledge/?ref=outindfooter>World GK</a></li></ul><ul class="footer-wrapper_links-list" ><li><a class="link-head" href=https://www.geeksforgeeks.org/videos/?ref=outindfooter>GeeksforGeeks Videos</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/sde-sheet/?ref=outindfooter>DSA</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/python/?ref=outindfooter>Python</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/java-w6y5f4/?ref=outindfooter>Java</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/c/?ref=outindfooter>C++</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/web-development/?ref=outindfooter>Web Development</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/data-science/?ref=outindfooter>Data Science</a></li><li><a href=https://www.geeksforgeeks.org/videos/category/cs-subjects/?ref=outindfooter>CS Subjects</a></li></ul></div> </div> </div>  <style> :root{ --home-jobs-section-jf-logo: url('https://media.geeksforgeeks.org/auth-dashboard-uploads/JobFair2024Logo.svg'); } body[data-dark-mode="true"] { --home-jobs-section-jf-logo: url('https://media.geeksforgeeks.org/auth-dashboard-uploads/JobFair2024LogoDark.svg'); } .hp_job_section_jf_logo, .job-a-thon-jf-sticky-header-logo{ background: var(--home-jobs-section-jf-logo); height: 50px; background-repeat: no-repeat; width: 105px; background-size: 100px; } @keyframes challenge { 0%{ transform: scale(1); } 50%{ transform: scale(1.03); } 100%{ transform: scale(1); } } .job-a-thon-jf-sticky-header-logo{ height: 45px; } </style>  <div class="footer-strip" > <div class="copyright"> <a href="https://www.geeksforgeeks.org/" rel="noopener noreferrer" target="_blank">@GeeksforGeeks, Sanchhaya Education Private Limited</a><span>, <a href="https://www.geeksforgeeks.org/copyright-information/">All rights reserved</a></span> </div> <div class="social-links"> </div> </div> </footer> </div> <script type='text/javascript' src='https://www.geeksforgeeks.org/wp-includes/js/wp-embed.min.js?ver=4.9.8'></script>  <div class="cookie-consent hide-consent"> <span class="cookie-text"> We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our <a href="https://www.geeksforgeeks.org/cookie-policy/" target="_blank"><u>Cookie Policy</u></a> & <a href="https://www.geeksforgeeks.org/privacy-policy/" target="_blank"><u>Privacy Policy</u></a> </span> <button class="consent-btn"> Got It ! </button> </div>   <div class="lightbox-target"> <img id="lightbox-image" src="" alt="Lightbox"/> <span class="lightbox-close"></span> </div>   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet"> <script> if(post_slug.includes('premium-plans-payment/') || post_slug.includes('premium-plans/')){ $('.darkMode-wrap').remove(); $('.toggle-darkMode').remove(); } function setGoogleRecaptcha() { var captchaSiteKey = '6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY'; grecaptcha.ready(function() { grecaptcha.execute(captchaSiteKey).then(function(token) { document.getElementById('g-recaptcha-response-suggestion-form').value = token; suggestionCall(); }); }); } </script> <div class="improve-modal--overlay" style="display: none;"> <div class="improve-modal--improvement" status="locked"> <div class="improve-modal--improve-header"> <div class="improve-header-fst-child">Improvement</div> <div class="improve-header-sec-child"> <i class="gfg-icon improve-cross-icon"></i> </div> </div> <div class="locked-status--impove-modal"> <div class="improve-modal--improve-content error-message"></div> <div class="improve-modal--improve-bottom"> <button class="improve-bottom-btn" type="button">Suggest changes</button> </div> </div> <div class="unlocked-status--improve-modal-content"> <div class="suggest-change_wrapper"> <div class="suggest-change-content_wrapper"> <div class="suggest-change">Suggest Changes</div> <div class="suggest-changes-about">Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.</div> </div> <div class="suggest-change-icon_wrapper"> <img class="suggest-change-icon" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/suggestChangeIcon.png" alt="geeksforgeeks-suggest-icon"/> </div> </div> <div class="create-improvement_wrapper"> <div class="create-improvement-content_wrapper"> <div class="create-improvement">Create Improvement</div> <div class="create-improvements-about">Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.</div> </div> <div class="create-improvement-icon_wrapper"> <img class="create-improvement-icon" src="https://media.geeksforgeeks.org/auth-dashboard-uploads/createImprovementIcon.png" alt="geeksforgeeks-improvement-icon"/> </div> </div> <div class="error-status"></div> </div> </div> <div class="improve-modal--suggestion" style="display: none;">  <div class="improve-modal--improve-header"> <div class="left-arrow-icon_suggest_wrapper"> <div class="left-arrow-icon_wrapper"> <i class="gfg-icon improve-left-arrow-icon"></i> </div> <div class="improve-header-fst-child">Suggest Changes</div> </div> <div class="improve-header-sec-child"> <i class="gfg-icon improve-cross-icon"></i> </div> </div> <div class="suggestion-modal-section"> <form> <label for="suggestion-section">min 4 words, max CharLimit:2000</label> <textarea id="suggestion-section-textarea" name="suggestion-section" placeholder="Write your suggestions here"></textarea> <input type="hidden" name="g-recaptcha-suggestion-response" id="g-recaptcha-response-suggestion-form"> </form> </div>  <div class="improve-modal--improve-bottom suggestion-btn"> <p><span id="suggestion-modal-alert" style="display: none;"></span></p> <button class="suggest-bottom-btn" type="button"></button> </div> </div> <a href="#" style="visibility:hidden" class="create-improvement-redirection-to-write" target="_blank"></a> </div> <script> var lockedCasesHtml = `<span class="improve-modal--improve-content-modified"></span><span>You can suggest the changes for now and it will be under 'My Suggestions' Tab on Write.</span><br><br><span>You will be notified via email once the article is available for improvement. Thank you for your valuable feedback!</span>`; var badgesRequiredHtml = `<span>It seems that you do not meet the eligibility criteria to create improvements for this article, as only users who have earned specific badges are permitted to do so.</span><br><br><span>However, you can still create improvements through the <a href="https://write.geeksforgeeks.org/pick-improvements/pick" target='_blank'>Pick for Improvement</a> section.</span>`; jQuery('.improve-header-sec-child').on('click', function(){ jQuery('.improve-modal--overlay').hide(); $('.improve-modal--suggestion').hide(); }); $('.suggest-change_wrapper, .locked-status--impove-modal .improve-bottom-btn').on('click',function(){ // when suggest changes option is clicked $('#suggestion-section-textarea').val(""); $('.suggest-bottom-btn').html("Suggest changes"); $('.improve-modal--improvement').hide(); $('.improve-modal--suggestion').show(); }); $('.create-improvement_wrapper').on('click',function(){ // when create improvement option clicked then improvement reason will be shown if(loginData && loginData.isLoggedIn) { $('body').append('<div class="spinner-loading-overlay"></div>'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status) }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ } $('.improve-modal--improvement').show(); }); const showErrorMessage = (result,statusCode) => { if(!result) return; $('.spinner-loading-overlay:eq(0)').remove(); if(statusCode == 403) { $('.improve-modal--improve-content.error-message').html(result.message); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); return; } } function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `<p>${suggest_val}</p>`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = ` <div class="thank-you-message" style="text-align: center;"> <h2>Thank You!</h2> <div class="thank-you-message-content">Your suggestions are valuable to us.</div> </div> `; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('<div class="spinner-loading-overlay"></div>'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('<div class="spinner-loading-overlay"></div>'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status); }, }); }); </script> <script> var AdblockPlus = new function() { this.detect = function(px, callback) { var detected = false; var checksRemain = 2; var error1 = false; var error2 = false; if (typeof callback != "function") return; px += "?ch=*&rn=*"; function beforeCheck(callback, timeout) { if (checksRemain == 0 || timeout > 1E3) callback(checksRemain == 0 && detected); else setTimeout(function() { beforeCheck(callback, timeout * 2) }, timeout * 2) } function checkImages() { if (--checksRemain) return; detected = !error1 && error2 } var random = Math.random() * 11; var img1 = new Image; img1.onload = checkImages; img1.onerror = function() { error1 = true; checkImages() }; img1.src = px.replace(/\*/, 1).replace(/\*/, random); var img2 = new Image; img2.onload = checkImages; img2.onerror = function() { error2 = true; checkImages() }; img2.src = px.replace(/\*/, 2).replace(/\*/, random); beforeCheck(callback, 250) } }; /* AdblockPlus.detect("https://cdnads.geeksforgeeks.org/res/px.gif", function(abp){ window.googletag = window.googletag || {cmd: []}; window.abp=abp; var elms = [...document.querySelectorAll('div[id^=_GFG_ABP_]')]; const units=elms.map(elem=>elem.id) if(abp) { for(let curr_unit of units) { const iframe = document.createElement('iframe'); iframe.setAttribute('src',"https://aa.geeksforgeeks.org/iframe.html?code="+curr_unit.substr(1)) const elem = document.getElementById(curr_unit) const div = document.createElement('div'); div.setAttribute('id',curr_unit.substr(1)) let sizes = curr_unit.split("_"); sizes = sizes.filter(val => val.includes('x')); let [width, height] = sizes[0].split("x"); iframe.style.width = `${+width+20}px` iframe.style.height = `${+height+20}px` if(elem) { elem.appendChild(iframe); } } var gfgAdDivs = [...document.querySelectorAll('div[id^=GFG_AD_]')]; gfgAdDivs.forEach(gfgDiv => document.getElementById(gfgDiv.id).removeAttribute("style")); jQuery('#secondary .widget_text:last-child').css({"position": "unset"}); } });*/ AdblockPlus.detect("https://cdnads.geeksforgeeks.org/res/px.gif", function(abp){ window.googletag = window.googletag || {cmd: []}; window.abp=abp; var elms = [...document.querySelectorAll('div[id^=_GFG_ABP_]')]; //const units=elms.map(elem=>elem.id) const units = elms .filter(elem => !(window.innerWidth < 1500 && elem.id === "_GFG_ABP_Incontent_728x90")) .map(elem => elem.id); if(abp) { isAdBlockerPresent = true; for(let curr_unit of units) { const iframe = document.createElement('iframe'); iframe.addEventListener("load", () => { iframe.contentWindow.postMessage(JSON.stringify({host: window.location.host,category: window.arrPostCatName,parentWidth: window.innerWidth}),'https://aa.geeksforgeeks.org'); }); iframe.setAttribute('src',"https://aa.geeksforgeeks.org/iframe.html?code="+curr_unit.substr(1)) const elem = document.getElementById(curr_unit) const div = document.createElement('div'); div.setAttribute('id',curr_unit.substr(1)) let sizes = curr_unit.split("_"); sizes = sizes.filter(val => val.includes('x')); let [width, height] = sizes[0].split("x"); iframe.style.width = `${+width+20}px` iframe.style.height = `${+height+20}px` if(elem) { elem.appendChild(iframe); } } var gfgAdDivs = [...document.querySelectorAll('div[id^=GFG_AD_]')]; gfgAdDivs.forEach(gfgDiv => document.getElementById(gfgDiv.id).removeAttribute("style")); jQuery('#secondary .widget_text:last-child').css({"position": "unset"}); } else{ try { var isAdblockEnabled = t => fetch( new Request('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', { method: 'HEAD', mode: 'no-cors' }) ).catch(t); isAdblockEnabled(() => { // here goes modal pop-up code isAdBlockerPresent = true; }); } catch (err) {console.log(err);} } }); function closeAdBlockPopupModal(){ const modal = document.getElementById("adBlockerModal"); $('body').removeClass('body-for-ad-blocker'); $('#adBlockerModal').remove() localStorage.setItem('gfgAdBlockPopup',new Date()) } function showAdblockerModal(){ let randomNumberForButtonText = Math.round(Math.random()); let currTime = new Date(); let lastTime = new Date(localStorage.getItem('gfgAdBlockPopup')); if(((currTime-lastTime)/(1000*60*60))<1) { return; } const adBlockerModal = `<div id="adBlockerModal" class="ad-blocker-modal"> <div id="ad-blocker-modal-overlay"> <div id="ad-blocker-outer-div"> <div id="ad-blocker-div"> <p id="ad-blocker-div-warning" style="margin-bottom: 30px;">It seems that you are using an ad blocker.<br><span style="font-size: 22px;font-weight: normal;">Please disable it to support us!</span></p> <div id="ad-blocker-div-btns"> <button id="ad-blocker-div-button1" onclick="handleAdBlockerClick('disabled')"> I disabled my ad blocker </button> <a href="https://www.geeksforgeeks.org/geeksforgeeks-premium-subscription${randomNumberForButtonText === 1 ? "/?itm_source=geeksforgeeks&itm_medium=adblocker&itm_campaign=premium1" : "/?itm_source=geeksforgeeks&itm_medium=adblocker&itm_campaign=premium2"}" target="_blank"> <button id="ad-blocker-div-button2" style=" background: linear-gradient(45deg, #f0bd36, #bf873f); border: 1px solid transparent; color: white; " > ${randomNumberForButtonText === 1 ? "Go Ad-Free with Premium" : "Upgrade for No Ads"} </button> </a> </div> <div id="ad-blocker-div-continue-premium-promo-text"> "For an ad-free experience and exclusive features, subscribe to our Premium Plan!"<br> </div> <div id="ad-blocker-div-continue-btn-div"> <a id="ad-blocker-div-continue-btn" href="#" onclick="closeAdBlockPopupModal()">Continue without supporting</a> </div> </div> </div> </div> </div>`; $('body').append(adBlockerModal); $('body').addClass('body-for-ad-blocker'); const modal = document.getElementById("adBlockerModal"); modal.style.display = "block"; } function handleAdBlockerClick(type){ if(type == 'disabled'){ window.location.reload(); } else if(type == 'info'){ document.getElementById("ad-blocker-div").style.display = "none"; document.getElementById("ad-blocker-info-div").style.display = "flex"; handleAdBlockerIconClick(0); } } var lastSelected= null; //Mapping of name and video URL with the index. const adBlockerVideoMap = [ ['Ad Block Plus','https://media.geeksforgeeks.org/auth-dashboard-uploads/abp-blocker-min.mp4'], ['Ad Block','https://media.geeksforgeeks.org/auth-dashboard-uploads/Ad-block-min.mp4'], ['uBlock Origin','https://media.geeksforgeeks.org/auth-dashboard-uploads/ub-blocke-min.mp4'], ['uBlock','https://media.geeksforgeeks.org/auth-dashboard-uploads/U-blocker-min.mp4'], ] function handleAdBlockerIconClick(currSelected){ const videocontainer = document.getElementById('ad-blocker-info-div-gif'); const videosource = document.getElementById('ad-blocker-info-div-gif-src'); if(lastSelected != null){ document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.backgroundColor = "white"; document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.borderColor = "#D6D6D6"; } document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.backgroundColor = "#D9D9D9"; document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.borderColor = "#848484"; document.getElementById('ad-blocker-info-div-name-span').innerHTML = adBlockerVideoMap[currSelected][0] videocontainer.pause(); videosource.setAttribute('src', adBlockerVideoMap[currSelected][1]); videocontainer.load(); videocontainer.play(); lastSelected = currSelected; } </script>  <style> /* Temporary CSS for Three90 pop up modal (START)*/ .three90popup__container { width: 100vw; height: 100vh; position: fixed; top:0px; background: var(--job-tab-faded-background); z-index: 1024; display: flex; align-items: center; justify-content: center; } .three90modal__wrapper{ background-color: white; max-width: 350px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; } .three90modal__message-container { display: flex; flex-direction: column; align-items: center; font-family: var(--font-primary); } .three90modal__subheading { margin-top: 20px; font-size: 22px; font-weight: 600; } .three90modal__text-message { margin-top: 20px; font-size: 15px; font-weight: 400; text-align: center; padding: 0 5px; } .three90__modal__button-wrapper { width: 100%; padding: 20px 0px; display: flex; justify-content: space-evenly; } .three90__modal__button-wrapper > button { width: 105px; height: 35px; border-radius: 13px; border:none; font-weight: 600; cursor: pointer; } #three90__modal-close-btn:hover { background-color: #cacbcd; } #three90__modal-explore-btn { background-color: #0a0727; color: white } @media screen and (max-width: 441px) { .three90modal__wrapper { max-width: 300px; } } /* Temporary CSS for Three90 pop up modal (END)*/ </style> <script type="text/javascript" > const coursePromotionCities = JSON.parse(`{"NCR":{"LOCATIONS":["Noida","Greater Noida","Ghaziabad","Faridabad","Delhi","New Delhi"],"COURSES":[{"name":"GATE CS 2025 Classroom Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/gate-cs-self-paced"},{"name":"MERN Full Stack Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"},{"name":"DSA For Interview Preparation","url":" https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"JAVA Backend Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program"},{"name":"Data Analytics Programme","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"AWS Solutions Architect Certification","url":"https:\/\/www.geeksforgeeks.org\/courses\/aws-solutions-architect-certification-classroom-training"},{"name":"Explore All","url":"https:\/\/www.geeksforgeeks.org\/courses\/offline-courses"}]},"NON_NCR":{"Bengaluru":[{"name":"Data Science Classroom Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/data-science-classroom-program"},{"name":"System Design Classroom Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/system-design-classroom-program"},{"name":"MERN Full Stack Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"},{"name":"DSA For Interview Preparation","url":"https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"JAVA Backend Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program"},{"name":"Data Analytics Programme","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"AWS Solutions Architect Certification","url":"https:\/\/www.geeksforgeeks.org\/courses\/aws-solutions-architect-certification-classroom-training"},{"name":"Explore All","url":"https:\/\/www.geeksforgeeks.org\/courses\/offline-courses"}],"Pune":[{"name":"MERN Full Stack Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"},{"name":"DSA For Interview Preparation","url":"https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"Complete Data Analytics Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"Explore All","url":"https:\/\/www.geeksforgeeks.org\/courses\/offline-courses"}],"Hyderabad":[{"name":"Complete Data Analytics Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-data-analytics-program"},{"name":"Complete Backend Development Program","url":"https:\/\/www.geeksforgeeks.org\/courses\/complete-java-backend-development-program"},{"name":"DSA for Interview Preparation","url":"https:\/\/www.geeksforgeeks.org\/courses\/dsa-interview-preparation-classroom"},{"name":"MERN Full Stack Web Development","url":"https:\/\/www.geeksforgeeks.org\/courses\/mern-full-stack-development-classroom"}]}}`); const offlineCourseTermMapper = JSON.parse(`{"ALL_TERMIDS":["2058","6263","2628","1745","1789","2601","2057","5037","2971","2023","2162","2795"],"COURSE_TERMID_MAP":{"JAVA":["2058"],"DATA_ANALYTICS":["1745","1789","2601","2057","5037","2971","2023","2162","2795"],"DSA":["6263"],"MERN":["2628"]}}`); </script> <script async src="https://www.geeksforgeeks.org/wp-content/themes/iconic-one/js/event-promotion.min.js?ver=4.5"></script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KDVRCT5');</script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-DWCCJLKX3X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); // gtag('config', 'AW-474915276'); gtag('config', 'G-DWCCJLKX3X'); gtag('config', 'AW-796001856'); </script>  <div id="GFG_AD_Desktop_Stickyunit_1x1"></div>   <style> :root { --com-extra-icons-mobile-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/Com-Extra-Icons13.svg); --write-experience-card-1: #ECF5F5; --write-experience-card-icon-1: #21898C; --write-experience-card-2: #EAF2F7; --write-experience-card-icon-2: #3079AC; --write-experience-card-3: #FDEFE6; --write-experience-card-icon-3: #F5A572; --write-experience-card-4: #F1F8F5; --write-experience-card-icon-4: #91C4AD; --write-experience-card-5: #EEE7FF; --write-experience-card-icon-5: #8B72C9; --write-experience-card-6: #F2F8E6; --write-experience-card-icon-6: #78C57F; --editor-button-text-color: #6E6E73; --write-modal-background: #fefefe; --experience-sidebar: #000; --left-bar-background: #FFFFFF; --write-redirect-container:#EAF2F7; --write-redirect-container-hover:#d6e7f2; } /* Dark Mode */ body[data-dark-mode="true"] { --write-modal-background: #161c23; --experience-sidebar: #000; --left-bar-background: #F0F3F5; } .popup-main { padding: 20px 18px 20px 18px; border-radius: 8px; } .popup-main .popup-heading { display: flex; align-items: center; color: #E9E9EA; margin-bottom: 10px; justify-content: space-between; } .popup-main .close-icon { background-image: var(--com-extra-icons-mobile-image);background-position: -15px -1651px;height: 22px;width: 22px;transform: scale(1); margin-bottom: 12px; cursor: pointer; } .popup-main .experience-card { color: #000; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; /* margin-bottom:10px; */ } .popup-main a:hover, .popup-main a:active, .popup-main a:visited { color: inherit; text-decoration: none; } .popup-main .exp-card1, .popup-main .exp-card2, .popup-main .exp-card3, .popup-main .exp-card4, .popup-main .exp-card5, .popup-main .exp-card6 { display: flex; align-items: center; border-radius: 10px; cursor: pointer; } .popup-main .exp-card1 .icon1, .popup-main .exp-card2 .icon2, .popup-main .exp-card3 .icon3, .popup-main .exp-card4 .icon4, .popup-main .exp-card5 .icon5, .popup-main .exp-card6 .icon6 { width: 80px; height: 80px; border-radius: 10px 0px 0px 10px; display: flex; align-items: center; justify-content: center; background: var(--write-experience-card-icon-1); } .popup-main .exp-card1 .icon1, .popup-main .exp-card2 .icon2, .popup-main .exp-card3 .icon3, .popup-main .exp-card4 .icon4, .popup-main .exp-card5 .icon5, .popup-main .exp-card6 .icon6 { width: 80px; height: 80px; border-radius: 10px 0px 0px 10px; display: flex; align-items: center; justify-content: center; } .popup-main .exp-card1 .icon1 { background: var(--write-experience-card-icon-1); } .popup-main .exp-card2 .icon2 { background: var(--write-experience-card-icon-2); } .popup-main .exp-card3 .icon3 { background: var(--write-experience-card-icon-3); } .popup-main .exp-card4 .icon4 { background: var(--write-experience-card-icon-4); } .popup-main .exp-card5 .icon5 { background: var(--write-experience-card-icon-5); } .popup-main .exp-card6 .icon6 { background: var(--write-experience-card-icon-6); } .popup-main .exp-card6 .icon6-image { background-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/compass.svg); width: 46px; height: 30px; background-size: 30px; background-repeat: no-repeat; background-position: center; } .popup-main .exp-card1 .icon1-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -812px; } .popup-main .exp-card2 .icon2-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -888px; } .popup-main .exp-card3 .icon3-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 28px; background-position: -4px -848px; } .popup-main .exp-card4 .icon4-image { background-image: url(https://media.geeksforgeeks.org/auth-dashboard-uploads/competitive.svg); width: 46px; height: 30px; background-size: 30px; background-repeat: no-repeat; background-position: center; } .popup-main .exp-card5 .icon5-image { background-image: var(--com-extra-icons-mobile-image); width: 46px; height: 33px; background-position: -4px -1217px; } .popup-main .exp-card1 .exp-card1-text, .popup-main .exp-card2 .exp-card2-text, .popup-main .exp-card3 .exp-card3-text, .popup-main .exp-card4 .exp-card4-text, .popup-main .exp-card5 .exp-card5-text, .popup-main .exp-card6 .exp-card6-text { display: flex; align-items: center; border-radius: 0px 10px 10px 0px; height: 80px; width: calc(100% - 80px); } .popup-main .exp-card1 { justify-content: flex-start; background: var(--write-experience-card-1); } .popup-main .exp-card2 { justify-content: flex-start; background: var(--write-experience-card-2); } .popup-main .exp-card3 { justify-content: flex-start; background: var(--write-experience-card-3); } .popup-main .exp-card4 { justify-content: flex-start; background: var(--write-experience-card-4); } .popup-main .exp-card5 { justify-content: flex-start; background: var(--write-experience-card-5); } .popup-main .exp-card6 { justify-content: flex-start; background: var(--write-experience-card-6); } .popup-main span { font-family: var(--font-primary); font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; padding-left: 5px; padding-right: 5px; } #popup { display: none; background-color: var(--write-modal-background); padding: 20px; text-align: center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1026; width: min(650px, calc(100% - 20px)); } .link-container-write{ display:flex; flex-direction:column; } .link-container-write > a { margin:7px 0px; } .phrase__container{ color:var(--color-gfg); border-radius: 6px; width: 100%; background-color:var(--write-redirect-container); padding: 15px; text-align: justify; font-size:14px; } .phrase__container:hover { color:var(--color-gfg) !important; background-color:var(--write-redirect-container-hover); } </style> <div class="popup-container"> <div id="popup" accesskey="" class="popup-main"> <div class="popup-heading"> <h2>What kind of Experience do you want to share?</h2> <div class="close-icon share-experience-modal-close"></div> </div>  <div class="experience-card"> <a class="exp-card5" href= "https://write.geeksforgeeks.org/posts-new?cid=e8fc46fe-75e7-4a4b-be3c-0c862d655ed0" target="_blank"> <div class="icon5"> <div class="icon5-image"></div> </div> <div class="exp-card5-text"> <span style="color: #000;">Interview Experiences</span> </div> </a> <a class="exp-card1" href="https://write.geeksforgeeks.org/posts-new?cid=82536bdb-84e6-4661-87c3-e77c3ac04ede" target="_blank"> <div class="icon1"> <div class="icon1-image"></div> </div> <div class="exp-card1-text"> <span style="color: #000;">Admission Experiences</span> </div> </a> <a class="exp-card6" href= "https://write.geeksforgeeks.org/posts-new?cid=5219b0b2-7671-40a0-9bda-503e28a61c31" target="_blank"> <div class="icon6"> <div class="icon6-image"></div> </div> <div class="exp-card6-text"> <span style="color: #000;">Career Journeys</span> </div> </a> <a class="exp-card2" href="https://write.geeksforgeeks.org/posts-new?cid=22ae3354-15b6-4dd4-a5b4-5c7a105b8a8f" target="_blank"> <div class="icon2"> <div class="icon2-image"></div> </div> <div class="exp-card2-text"> <span style="color: #000;">Work Experiences</span> </div> </a> <a class="exp-card3" href= "https://write.geeksforgeeks.org/posts-new?cid=c5e1ac90-9490-440a-a5fa-6180c87ab8ae" target="_blank"> <div class="icon3"> <div class="icon3-image"></div> </div> <div class="exp-card3-text"> <span style="color: #000;">Campus Experiences</span> </div> </a> <a class="exp-card4" href= "https://write.geeksforgeeks.org/posts-new?cid=5ebb8fe9-b980-4891-af07-f2d62a9735f2" target="_blank"> <div class="icon4"> <div class="icon4-image"></div> </div> <div class="exp-card4-text"> <span style="color: #000;">Competitive Exam Experiences</span> </div> </a> </div>  </div> <div id="overlay" onclick="toggleExperiencePopup()" style="display: block;min-height: 100vh;min-width: 100vw;position: fixed;top: 0;bottom: 0;right: 0;left: 0;display: none;justify-content: center;align-items: center;background: rgba(0,0,0,.702);z-index: 1025 !important;backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);word-break: keep-all;"></div> </div> <script> $('.share-experience-modal').click(function(e){ e.preventDefault(); var link = $(this).attr('href'); toggleExperiencePopup(link); }); function toggleExperiencePopup(link) { var popup = document.getElementById("popup"); var overlay = document.getElementById("overlay"); if (window.innerWidth < 992) { window.location.href = link; } else { popup.style.display = (popup.style.display === "block") ? "none" : "block"; overlay.style.display = (overlay.style.display === "block") ? "none" : "block"; } } $('.share-experience-modal-close').click(function(e){ var popup = document.getElementById("popup"); popup.style.display = 'none'; var overlay = document.getElementById("overlay"); overlay.style.display = 'none'; }); </script> </div> </body> </html>

CINXE.COM

Bootstrap Tutorial - GeeksforGeeks