{"id":7594,"date":"2019-11-01T08:09:32","date_gmt":"2019-11-01T08:09:32","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=7594"},"modified":"2022-04-28T09:15:25","modified_gmt":"2022-04-28T09:15:25","slug":"bootstrap-tutorial","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/bootstrap-tutorial\/","title":{"rendered":"Bootstrap Tutorial"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">What is Bootstrap?<\/h3>\n\n\n\n<p>Bootstrap is a open-source framework for building websites and web applications. That means the bootstrap is fully responsive framework and support any devices which contains HTML, CSS and JavaScript. With the help of bootstrap we can create a forms, buttons,navigation and other interface components.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Use Bootstrap?<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Advantages of using bootstrap<\/li><li>Supports responsible design<\/li><li>Saves lot of development time<\/li><li>Consistency<\/li><li>Customization<\/li><li>Support<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"> There are two ways to start using Bootstrap 4 on your own web site.<\/h4>\n\n\n\n<p>You can:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Include Bootstrap 4 from a CDN<\/li><li>Download Bootstrap 4 from getbootstrap.com<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to download  and   setup <\/h2>\n\n\n\n<p> If you want to download and host Bootstrap 4 yourself, go to https:\/\/getbootstrap.com\/, and follow the instructions there.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is Responsive Web Design?<\/strong><\/h2>\n\n\n\n<p>Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is Container and  container-fluid <\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>The&nbsp;<code>.container<\/code>&nbsp;class provides a responsive&nbsp;<strong>fixed width container<\/strong><\/li><li>The&nbsp;<code>.container-fluid<\/code>&nbsp;class provides a&nbsp;<strong>full width container<\/strong>, spanning the entire width of the viewport<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Container Example:<\/h3>\n\n\n\n<p> &lt;div&nbsp;class=&#8221;container&#8221;&gt;<br>&nbsp;&nbsp;&lt;h1&gt;My First Bootstrap Page&lt;\/h1&gt;<br>&nbsp;&nbsp;&lt;p&gt;This is some text.&lt;\/p&gt;<br>&lt;\/div&gt;<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Container Fluid Example:<\/h3>\n\n\n\n<p> &lt;div&nbsp;class=&#8221;container-fluid&#8221;&gt;<br>&nbsp;&nbsp;&lt;h1&gt;My First Bootstrap Page&lt;\/h1&gt;<br>&nbsp;&nbsp;&lt;p&gt;This is some text.&lt;\/p&gt;<br>&lt;\/div&gt; <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bootstrap 4 Grid System<\/h3>\n\n\n\n<p>Bootstrap&#8217;s grid system is built with flexbox and allows up to 12 columns across the page.<\/p>\n\n\n\n<p>If you do not want to use all 12 columns individually, you can group the columns together to create wider columns.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">  <strong> Example <\/strong><\/h3>\n\n\n\n<p><strong> Three equal width columns<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/0c519665d55de1aa2d1962dfb09a6ae6.js\"><\/script>\n\n\n\n<p><strong>Responsive Columns<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/f95e097cc2bdd05f87aac34621251050.js\"><\/script>\n\n\n\n<p>Two Unequal Responsive Columns<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/91f11a1fa2c9edaa7264442ac3a63118.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">Bootstrap 4 Text\/Typography<\/h4>\n\n\n\n<h4 class=\"wp-block-heading\">Bootstrap Heading<\/h4>\n\n\n\n<h6 class=\"wp-block-heading\">Bootstrap 4 styles HTML headings (h1 to h6)  with a bolder font-weight and an increased font-size.<\/h6>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/ecf24bef8ebfff6cdf36b7a81d7af1a8.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">Display Headings<\/h4>\n\n\n\n<p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1, .display-2, .display-3, .display-4.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/f65366f0d37eb38902849265cbed73b3.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">Small heading <\/h4>\n\n\n\n<p>The small element is used to create a lighter, secondary text in any heading.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/05f97c51206e425a510d178562fff9af.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">&lt;Mark&gt;<\/h4>\n\n\n\n<p>Bootstrap 4 will style the HTML  element with a yellow background color and some padding.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/c96682c89ab97df5a1eebbb26fc971e6.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">&lt;abbr&gt;<\/h4>\n\n\n\n<p>The abbr element is used to mark up an abbreviation or acronym.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/ecf6a6b5f235c73692ac00543a84a89d.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">&lt;blockquote&gt;<\/h4>\n\n\n\n<p>The blockquote element is used to present content from another source.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/c3db97c077ca18ed85648c2028302fd6.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">&lt;dl&gt;<\/h4>\n\n\n\n<p>The dl element indicates a description list.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/8d4b73c96ce944b282fa36fc43f3b269.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">&lt;code&gt;<\/h4>\n\n\n\n<p>The following HTML elements: span, section, and div defines a section in a document.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/27a30cb7faf30c1e0b95960920223c24.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">&lt;kkd&gt;<\/h4>\n\n\n\n<p>To indicate input that is typically entered via the keyboard, use the kbd element.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/29f7cfbfbac6b9427ba8a45d02891761.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">&lt;pre&gt;<\/h4>\n\n\n\n<p>For multiple lines of code, use the pre element.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Teamcitytraining\/cee1bee58697e5886c6869ef30572bc3.js\"><\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Bootstrap? Bootstrap is a open-source framework for building websites and web applications. That means the bootstrap is fully responsive framework and support any devices which contains HTML, CSS&#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5687],"tags":[5689,5690],"class_list":["post-7594","post","type-post","status-publish","format-standard","hentry","category-bootstrap","tag-container-fluid","tag-grid-system"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=7594"}],"version-history":[{"count":0,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7594\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=7594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=7594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=7594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}