{"id":1871,"date":"2020-01-07T05:34:43","date_gmt":"2020-01-07T05:34:43","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=1871"},"modified":"2020-01-07T06:36:05","modified_gmt":"2020-01-07T06:36:05","slug":"a-fast-paced-introduction-to-bootstrap","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/","title":{"rendered":"A fast-paced introduction to Bootstrap"},"content":{"rendered":"<h2>What is Bootstrap?<\/h2>\n<p><img decoding=\"async\" src=\"..\/wp-content\/uploads\/2020\/01\/bootstrap-01.png\" alt=\"bootstrap-01\"\/><\/p>\n<p>In today\u2019s era, we need responsive websites and web applications. Bootstrap does a great job in this field. Bootstrap is an open-source and free front-end framework for faster and easier web development. It includes the CSS (Cascading Style Sheets), and an optional <a href=\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-javascript-for-beginners\/\">JavaScript<\/a> supported design template (plug-ins) that deals with typography, implementation of buttons, forms and various other components for the user interface. It is known as \u201cOne framework, every device\u201d as the websites automatically scale between devices like mobile phones, tablets, desktop screens, laptop screen etc.<\/p>\n<p><strong>Ways to get it<\/strong><br \/>\nThe following two ways to start Bootstrap on your own web site:<br \/>\nYou can:<\/p>\n<ul>\n<li>Download it from <a href=\"https:\/\/getbootstrap.com\/\">https:\/\/getbootstrap.com\/<\/a><\/li>\n<li>Include it from a CDN<\/li>\n<\/ul>\n<p><strong>Why one should use Bootstrap?<\/strong><\/p>\n<ul>\n<li>\n<h4>Mobile-first approach:<\/h4>\n<p>In the Bootstrap 3 and above framework, there is a preexisting mobile-first style through all the library and not as separate files.<\/li>\n<li>\n<h4>Very Simple and easy to learn:<\/h4>\n<p> If you know HTML and CSS, you can quickly start working with Bootstrap, and its documentation is provided on the official site.<\/li>\n<li>\n<h4>Responsive look:<\/h4>\n<p>The web pages that are designed by using the Bootstrap framework has responsive CSS that can adjust to the screen according to the size of desktops, tablets, notebooks, and mobiles.<\/li>\n<li>\n<h4>Customization:<\/h4>\n<p> It provides some built-in components and functionalities that are helpful for customizing.<\/li>\n<li>\n<h4>Clean UI for Developers:<\/h4>\n<p> Bootstrap framework provides a new and consistent result for building user interfaces in web pages.<\/li>\n<\/ul>\n<h3>Example of code<\/h3>\n<p><strong>Code:<\/strong><br \/>\n<code><br \/>\n&lt;!DOCTYPE html><br \/>\n&lt;html lang=\"en\"><br \/>\n&lt;head><br \/>\n  &lt;title>Bootstrap Example<\/title><br \/>\n  &lt;meta charset=\"utf-8\"><br \/>\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><br \/>\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.0\/css\/bootstrap.min.css\"><br \/>\n  &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"><\/script><br \/>\n  &lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.0\/js\/bootstrap.min.js\"><\/script><br \/>\n&lt;\/head><br \/>\n&lt;body><\/p>\n<p>&lt;div class=\"container\"><br \/>\n  &lt;h1>h1 BS heading (36px)<\/h1>\n<p>  &lt;h2>h2 BS heading (30px)<\/h2>\n<p>  &lt;h3>h3 BS heading (24px)<\/h3>\n<p>  &lt;h4>h4 BS heading (18px)<\/h4>\n<p>  &lt;h5>h5 BS heading (14px)<\/h5>\n<p>  &lt;h6>h6 BS heading (12px)<\/h6>\n<p>&lt;\/div><br \/>\n&lt;\/body><br \/>\n&lt;\/html><br \/>\n<\/code><br \/>\n<strong>Output:<\/strong><\/p>\n<h2 style=\"font-size:36px;\">h1 BS heading (36px)<\/h2>\n<h2 style=\"font-size:30px;\">h2 BS heading (30px)<\/h2>\n<h3 style=\"font-size:24px;\">h3 BS heading (24px)<\/h3>\n<h4 style=\"font-size:18px;\">h4 BS heading (18px)<\/h4>\n<h5 style=\"font-size:14px;\">h5 BS heading (14px)<\/h5>\n<h6 style=\"font-size:12px;\">h6 BS heading (12px)<\/h6>\n<h3>Advantages<\/h3>\n<ul>\n<li>It produces a few cross-browser bugs.<\/li>\n<li>It is a consistent framework supported by all browsers (like IE,) plus CSS based compatibility fixes.<\/li>\n<li>It is a lightweight and widely used framework for creating responsive sites.<\/li>\n<li>Looks, structure, and styles can be customized as per work requirements.<\/li>\n<li>A simple and effective grid system.<\/li>\n<\/ul>\n<h3>Disadvantages<\/h3>\n<ul>\n<li>Since a framework has an inbuilt standard set of grids and selectors and other codes, it restricts your design. So for any new kind of design idea that you want to implement, you would have to learn a new framework.<\/li>\n<li>The extra code comes up from the list of predefined codes that come with the framework. You can choose not to use them through the frameworks you use.<\/li>\n<li>While we can build a responsive website with Bootstrap, the end results can be quite a bit heavy for the users in terms of slower loading times, as well as battery drain issues.<\/li>\n<\/ul>\n<p><small><em>StudySection provides a <a href=\"https:\/\/studysection.com\/windows-10-advanced\">Windows 10 certification<\/a> exam to help those with skills in Microsoft Windows 10 operating system. This exam is available for two different levels namely \u201cFoundation\u201d and \u201cAdvanced\u201d. This Windows 10 certification can help you land in a good job position when attached to your resume.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Bootstrap? In today\u2019s era, we need responsive websites and web applications. Bootstrap does a great job in this<\/p>\n","protected":false},"author":1,"featured_media":1872,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[162,189,39,331],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>StudySection Blog - A fast-paced introduction to Bootstrap<\/title>\n<meta name=\"description\" content=\"In today\u2019s era, we need responsive websites and web applications, so Bootstrap does a great job. Bootstrap is a free front-end framework.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"StudySection Blog - A fast-paced introduction to Bootstrap\" \/>\n<meta property=\"og:description\" content=\"In today\u2019s era, we need responsive websites and web applications, so Bootstrap does a great job. Bootstrap is a free front-end framework.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-07T05:34:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-07T06:36:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/01\/bootstrap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"A fast-paced introduction to Bootstrap\",\"datePublished\":\"2020-01-07T05:34:43+00:00\",\"dateModified\":\"2020-01-07T06:36:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/\"},\"wordCount\":473,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Bootstrap\",\"Framework\",\"introduction\",\"Typography\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/\",\"url\":\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/\",\"name\":\"StudySection Blog - A fast-paced introduction to Bootstrap\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2020-01-07T05:34:43+00:00\",\"dateModified\":\"2020-01-07T06:36:05+00:00\",\"description\":\"In today\u2019s era, we need responsive websites and web applications, so Bootstrap does a great job. Bootstrap is a free front-end framework.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A fast-paced introduction to Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"StudySection Blog - A fast-paced introduction to Bootstrap","description":"In today\u2019s era, we need responsive websites and web applications, so Bootstrap does a great job. Bootstrap is a free front-end framework.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"StudySection Blog - A fast-paced introduction to Bootstrap","og_description":"In today\u2019s era, we need responsive websites and web applications, so Bootstrap does a great job. Bootstrap is a free front-end framework.","og_url":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2020-01-07T05:34:43+00:00","article_modified_time":"2020-01-07T06:36:05+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/01\/bootstrap.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"A fast-paced introduction to Bootstrap","datePublished":"2020-01-07T05:34:43+00:00","dateModified":"2020-01-07T06:36:05+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/"},"wordCount":473,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Bootstrap","Framework","introduction","Typography"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/","url":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/","name":"StudySection Blog - A fast-paced introduction to Bootstrap","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2020-01-07T05:34:43+00:00","dateModified":"2020-01-07T06:36:05+00:00","description":"In today\u2019s era, we need responsive websites and web applications, so Bootstrap does a great job. Bootstrap is a free front-end framework.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/a-fast-paced-introduction-to-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A fast-paced introduction to Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":528,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/1871"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=1871"}],"version-history":[{"count":9,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/1871\/revisions"}],"predecessor-version":[{"id":1882,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/1871\/revisions\/1882"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/1872"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=1871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=1871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=1871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}