{"id":181243,"date":"2024-04-30T09:59:00","date_gmt":"2024-04-30T08:59:00","guid":{"rendered":"https:\/\/datascientest.com\/en\/?p=181243"},"modified":"2024-03-03T10:10:52","modified_gmt":"2024-03-03T09:10:52","slug":"bootstrap-what-is-it-how-do-you-create-your-web-page-with-it","status":"publish","type":"post","link":"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it","title":{"rendered":"Bootstrap: What is it? How do you create your web page with it?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"181243\" class=\"elementor elementor-181243\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7d9bd62 e-flex e-con-boxed e-con\" data-id=\"7d9bd62\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab1f2d6 elementor-widget elementor-widget-heading\" data-id=\"ab1f2d6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Developing a website requires knowledge of HTML, CSS and JavaScript. You need programming and integration skills in each of these three languages to master the creation of web applications. There are collections of tools containing HTML and CSS code and JavaScript plugins to facilitate the development and integration of an application. Today, we're going to take a look at Bootstrap, the most popular collection, whose latest version Bootstrap 5 was released a year ago.<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f428e01 e-flex e-con-boxed e-con\" data-id=\"f428e01\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b3d425e elementor-widget elementor-widget-heading\" data-id=\"b3d425e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What is Bootstrap?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f484f6 elementor-widget elementor-widget-text-editor\" data-id=\"4f484f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Bootstrap is a <a href=\"https:\/\/datascientest.com\/en\/front-end-what-are-the-skills-and-tools\">Front-End Framework<\/a> containing a collection of useful tools for creating and designing front-end web sites and applications. It contains<strong> HTML and CSS code,<\/strong> as well as optional JavaScript extensions, enabling the creation of forms, buttons, navigation tools and other interactive elements to be integrated into an application. This <a href=\"https:\/\/datascientest.com\/en\/flask-one-of-the-most-popular-python-frameworks\">framework<\/a> is designed to develop interactive designs adaptable to any type of screen, especially smartphones.<\/p><p>This platform was created by two developers who gravitated around the Twitter ecosystem, Mark Otto and Jacob Thornton, under the first name of Twitter Blueprint in 2010.<\/p><p>It was opened up to the general public during the first hackweek organized by Twitter, and in August 2011, they placed <strong>Bootstrap under an open source license.<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4645b05 e-flex e-con-boxed e-con\" data-id=\"4645b05\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5cc3dc4 elementor-widget elementor-widget-heading\" data-id=\"5cc3dc4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Why use Bootstrap?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3210be1 elementor-widget elementor-widget-text-editor\" data-id=\"3210be1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Bootstrap is easy to use, so anyone with a basic knowledge of HTML and CSS can understand it. What&#8217;s more, this framework is a &#8220;responsive&#8221; solution that adapts to phones, tablets and computers. Finally, the latest version of Bootstrap is compatible with all modern browsers (Firefox, Chrome, Safari, Edge (formerly Internet Explorer) and Opera).<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e7edd65 e-flex e-con-boxed e-con\" data-id=\"e7edd65\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-438671c elementor-widget elementor-widget-heading\" data-id=\"438671c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How to download Bootstrap<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-121e7ca elementor-widget elementor-widget-text-editor\" data-id=\"121e7ca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>There are several ways to <strong>download bootstrap<\/strong>. You can visit the official website and download the latest version online. You can also install Bootstrap via npm, Composer or Meteor, for example by executing one of the following command lines in a console:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1102c08 elementor-widget elementor-widget-shortcode\" data-id=\"1102c08\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/b13d930b26de0573a1bad99b040bb590.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-539c80a elementor-widget elementor-widget-text-editor\" data-id=\"539c80a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>If you don&#8217;t want to <strong>download Bootstrap yourself,<\/strong> you can include it from a CDN (Content Delivery Network). You can use jsDelivr to do this as follows:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9cf677b elementor-widget elementor-widget-shortcode\" data-id=\"9cf677b\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/38aea9fd6212002370e2d0b7e1fdd3be.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3f72660 e-flex e-con-boxed e-con\" data-id=\"3f72660\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c9b20c6 elementor-widget elementor-widget-heading\" data-id=\"c9b20c6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">How do I use Bootstrap?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a0a2ff elementor-widget elementor-widget-text-editor\" data-id=\"1a0a2ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We&#8217;re now going to look at how to create a basic template for an application or web page using Bootstrap. The first step is to create a basic HTML file to work with, such as :<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11dca38 elementor-widget elementor-widget-shortcode\" data-id=\"11dca38\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/caf8a4d6f15fa9de744dddca64320abb.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-82cd191 elementor-widget elementor-widget-text-editor\" data-id=\"82cd191\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<blockquote><p><strong>Note<\/strong>: try to always include the tagged in the to enable touch zoom and ensure smartphone-friendly performance.<\/p><p>The next step is to transform our HTML file into a Bootstrap template. Here, we prefer the CDN method as it gives us better performance by reducing loading times, being hosted on multiple servers around the globe.<\/p><\/blockquote>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ecc2e6f elementor-widget elementor-widget-shortcode\" data-id=\"ecc2e6f\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/630b4a663f09e5358abfe7d3fde2219d.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e1b1251 elementor-widget elementor-widget-text-editor\" data-id=\"e1b1251\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We can now create our first Bootstrap objects: containers. Containers are Bootstrap&#8217;s most basic layout elements and are required to use the grid system. They are essentially used to wrap content with a certain amount of padding. They are also used to align content horizontally at the center of the page in the case of a fixed-width layout. There are three types of container:<\/p><ul><li>container, which has a maximum width for each breakpoint<\/li><li>container-fluid, which has a width of 100% for all breakpoints<\/li><li>container-{breakpoint}, which has a width of 100% up to the specified breakpoint.<\/li><\/ul><p>Here&#8217;s an example of container syntax:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c11a819 elementor-widget elementor-widget-shortcode\" data-id=\"c11a819\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/4132d328d0b6bb66fa75a4437cc5dd1a.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9590f56 elementor-widget elementor-widget-text-editor\" data-id=\"9590f56\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\tYou now know how to create your first HTML page using Bootstrap. The possibilities are numerous and you can find many templates on the net, for example creative commons on <a href=\"https:\/\/www.bootstrapdash.com\/product-category\/free-bootstrap-admin-templates\/creative-commons-license\/\">bootstrapdash<\/a>.\n\nIt&#8217;s up to you!\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae5421f elementor-widget elementor-widget-html\" data-id=\"ae5421f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [{\n    \"@type\": \"Question\",\n    \"name\": \"What is Bootstrap?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Bootstrap is one of those \"Front-End Frameworks\" containing a collection of tools useful for the creation and design of front-end web sites and applications. It contains HTML and CSS code, as well as optional JavaScript extensions, enabling the creation of forms, buttons, navigation tools and other interactive elements to be integrated into an application. This framework is designed to develop interactive designs adaptable to any type of screen, especially smartphones.\"\n    }\n  },{\n    \"@type\": \"Question\",\n    \"name\": \"Why use Bootstrap?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Bootstrap is easy to use; anyone with a basic knowledge of HTML and CSS can understand it. What's more, this framework is a \"responsive\" solution that adjusts to phones, tablets and computers. Finally, the latest version of Bootstrap is compatible with all modern browsers (Firefox, Chrome, Safari, Edge formerly Internet Explorer and Opera).\"\n    }\n  },{\n    \"@type\": \"Question\",\n    \"name\": \"How do I download Bootstrap?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"There are several ways to download Bootstrap, you can go to the official website and download the latest version online. You can also install Bootstrap via npm, Composer or Meteor, for example by executing one of the following command lines in a console.\"\n    }\n  }]\n}\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Developing a website requires knowledge of HTML, CSS and JavaScript. You need programming and integration skills in each of these three languages to master the creation of web applications. There are collections of tools containing HTML and CSS code and JavaScript plugins to facilitate the development and integration of an application. Today, we&#8217;re going to [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":181244,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"content-type":"","inline_featured_image":false},"categories":[2421],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v21.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap: What is it? How do you create your web page with it?<\/title>\n<meta name=\"description\" content=\"Learn all about Bootstrap, the popular front-end framework, and how to leverage its powerful features to create stunning and responsive web pages. Discover step-by-step instructions for implementing Bootstrap&#039;s pre-designed components, grid system, and CSS utilities to streamline your web development process.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap: What is it? How do you create your web page with it?\" \/>\n<meta property=\"og:description\" content=\"Developing a website requires knowledge of HTML, CSS and JavaScript. You need programming and integration skills in each of these three languages to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it\" \/>\n<meta property=\"og:site_name\" content=\"Data Science Courses | DataScientest\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataScientestEN\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-30T08:59:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-03T09:10:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/datascientest.com\/en\/files\/2024\/03\/image_bootstrap-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"562\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Melanie\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:site\" content=\"@DataScientest__\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Melanie\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated 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:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it#article\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it\"},\"author\":{\"name\":\"Melanie\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/person\/19d5f7ade9407eb69af3bf6d1ae1731d\"},\"headline\":\"Bootstrap: What is it? How do you create your web page with it?\",\"datePublished\":\"2024-04-30T08:59:00+00:00\",\"dateModified\":\"2024-03-03T09:10:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it\"},\"wordCount\":566,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/en\/#organization\"},\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/datascientest.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it\",\"url\":\"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it\",\"name\":\"Bootstrap: What is it? How do you create your web page with it?\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/en\/#website\"},\"datePublished\":\"2024-04-30T08:59:00+00:00\",\"dateModified\":\"2024-03-03T09:10:52+00:00\",\"description\":\"Learn all about Bootstrap, the popular front-end framework, and how to leverage its powerful features to create stunning and responsive web pages. Discover step-by-step instructions for implementing Bootstrap's pre-designed components, grid system, and CSS utilities to streamline your web development process.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/datascientest.com\/en\/#website\",\"url\":\"https:\/\/datascientest.com\/en\/\",\"name\":\"Data Science Courses | DataScientest\",\"description\":\"Leader in Data Science Courses\",\"publisher\":{\"@id\":\"https:\/\/datascientest.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/datascientest.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/datascientest.com\/en\/#organization\",\"name\":\"DataScientest\",\"url\":\"https:\/\/datascientest.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"contentUrl\":\"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png\",\"width\":301,\"height\":301,\"caption\":\"DataScientest\"},\"image\":{\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/DataScientestEN\",\"https:\/\/twitter.com\/DataScientest__\",\"https:\/\/www.linkedin.com\/school\/datascientest\/mycompany\/\",\"https:\/\/www.tiktok.com\/@datascientest\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/person\/19d5f7ade9407eb69af3bf6d1ae1731d\",\"name\":\"Melanie\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/datascientest.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d3d660a0698de06f13ecf4823519da1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8d3d660a0698de06f13ecf4823519da1?s=96&d=mm&r=g\",\"caption\":\"Melanie\"},\"url\":\"https:\/\/datascientest.com\/en\/author\/melaniekrause\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap: What is it? How do you create your web page with it?","description":"Learn all about Bootstrap, the popular front-end framework, and how to leverage its powerful features to create stunning and responsive web pages. Discover step-by-step instructions for implementing Bootstrap's pre-designed components, grid system, and CSS utilities to streamline your web development process.","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:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it","og_locale":"en_GB","og_type":"article","og_title":"Bootstrap: What is it? How do you create your web page with it?","og_description":"Developing a website requires knowledge of HTML, CSS and JavaScript. You need programming and integration skills in each of these three languages to","og_url":"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it","og_site_name":"Data Science Courses | DataScientest","article_publisher":"https:\/\/www.facebook.com\/DataScientestEN","article_published_time":"2024-04-30T08:59:00+00:00","article_modified_time":"2024-03-03T09:10:52+00:00","og_image":[{"width":1024,"height":562,"url":"https:\/\/datascientest.com\/en\/files\/2024\/03\/image_bootstrap-1.png","type":"image\/png"}],"author":"Melanie","twitter_card":"summary_large_image","twitter_creator":"@DataScientest__","twitter_site":"@DataScientest__","twitter_misc":{"Written by":"Melanie","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it#article","isPartOf":{"@id":"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it"},"author":{"name":"Melanie","@id":"https:\/\/datascientest.com\/en\/#\/schema\/person\/19d5f7ade9407eb69af3bf6d1ae1731d"},"headline":"Bootstrap: What is it? How do you create your web page with it?","datePublished":"2024-04-30T08:59:00+00:00","dateModified":"2024-03-03T09:10:52+00:00","mainEntityOfPage":{"@id":"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it"},"wordCount":566,"commentCount":0,"publisher":{"@id":"https:\/\/datascientest.com\/en\/#organization"},"articleSection":["Dev"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/datascientest.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it","url":"https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it","name":"Bootstrap: What is it? How do you create your web page with it?","isPartOf":{"@id":"https:\/\/datascientest.com\/en\/#website"},"datePublished":"2024-04-30T08:59:00+00:00","dateModified":"2024-03-03T09:10:52+00:00","description":"Learn all about Bootstrap, the popular front-end framework, and how to leverage its powerful features to create stunning and responsive web pages. Discover step-by-step instructions for implementing Bootstrap's pre-designed components, grid system, and CSS utilities to streamline your web development process.","inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/datascientest.com\/en\/bootstrap-what-is-it-how-do-you-create-your-web-page-with-it"]}]},{"@type":"WebSite","@id":"https:\/\/datascientest.com\/en\/#website","url":"https:\/\/datascientest.com\/en\/","name":"Data Science Courses | DataScientest","description":"Leader in Data Science Courses","publisher":{"@id":"https:\/\/datascientest.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/datascientest.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/datascientest.com\/en\/#organization","name":"DataScientest","url":"https:\/\/datascientest.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png","contentUrl":"https:\/\/datascientest.com\/en\/wp-content\/blogs.dir\/9\/files\/2024\/02\/DataScientest_icon_blue-2.png","width":301,"height":301,"caption":"DataScientest"},"image":{"@id":"https:\/\/datascientest.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataScientestEN","https:\/\/twitter.com\/DataScientest__","https:\/\/www.linkedin.com\/school\/datascientest\/mycompany\/","https:\/\/www.tiktok.com\/@datascientest"]},{"@type":"Person","@id":"https:\/\/datascientest.com\/en\/#\/schema\/person\/19d5f7ade9407eb69af3bf6d1ae1731d","name":"Melanie","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/datascientest.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8d3d660a0698de06f13ecf4823519da1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d3d660a0698de06f13ecf4823519da1?s=96&d=mm&r=g","caption":"Melanie"},"url":"https:\/\/datascientest.com\/en\/author\/melaniekrause"}]}},"_links":{"self":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts\/181243"}],"collection":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/comments?post=181243"}],"version-history":[{"count":0,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/posts\/181243\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/media\/181244"}],"wp:attachment":[{"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/media?parent=181243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/categories?post=181243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datascientest.com\/en\/wp-json\/wp\/v2\/tags?post=181243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}