{"id":57,"date":"2022-12-23T18:12:57","date_gmt":"2022-12-23T18:12:57","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=57"},"modified":"2022-12-24T08:45:52","modified_gmt":"2022-12-24T08:45:52","slug":"bootstrap","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/bootstrap\/","title":{"rendered":"BOOTSTRAP"},"content":{"rendered":"\n<p class=\"has-medium-font-size\"><strong>What is bootstrap?<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\">Bootstrap is front end framework for web development. It includes HTML and CSS designed templates and optional javascript plugins. It is also used to create responsive designs.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>what are responsive designs?<\/strong><\/p>\n\n\n\n<p>It is all about creating websites which adjust themselves automatically depending on the device.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Why to use bootstrap?<\/strong><\/p>\n\n\n\n<p>It is compatible, easy to use, creates responsive designs.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Features:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bootstrap grid systems: It is responsive and columns will arrange automatically.<\/li>\n\n\n\n<li>xs- for phones &#8211; screens less than 768px wide<\/li>\n\n\n\n<li>sm- for tablets &#8211; screens equal to or greater than 768px wide<\/li>\n\n\n\n<li>md- for small laptops &#8211; screens equal to or greater than 992px wide<\/li>\n\n\n\n<li>lg- for laptops and desktops &#8211; screens equal to or greater than 1200px wide<\/li>\n<\/ul>\n\n\n\n<p>structure of grid:<\/p>\n\n\n\n<p>&lt;div&nbsp;class=&#8221;row&#8221;&gt;<br>&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;col-*-*&#8221;&gt;&lt;\/div&gt;<br>&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;col-*-*&#8221;&gt;&lt;\/div&gt;<br>&lt;\/div&gt;<br>&lt;div&nbsp;class=&#8221;row&#8221;&gt;<br>&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;col-*-*&#8221;&gt;&lt;\/div&gt;<br>&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;col-*-*&#8221;&gt;&lt;\/div&gt;<br>&nbsp;&nbsp;&lt;div&nbsp;class=&#8221;col-*-*&#8221;&gt;&lt;\/div&gt;<br>&lt;\/div&gt;<br>&lt;div&nbsp;class=&#8221;row&#8221;&gt;<br>&nbsp; &#8230;<br>&lt;\/div&gt;<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Pavaniysk\/265d5a63947f229f407c9ba8b0452a5c.js\"><\/script>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Bootstrap Containers:<\/strong> Bootstrap requires containers to pad the  site contents inside them. There are 2 types of containers .<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Containers: it is responsive fixed width container.<\/li>\n\n\n\n<li>Container-fluid:  it creates the full width of the container that span the entire width of the container.<\/li>\n<\/ol>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Bootstrap images:<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Pavaniysk\/71412189c20583454ba3959e318eab98.js\"><\/script>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Bootstrap buttongroups:<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Pavaniysk\/0d0d7e2a01fc367dc3d28310d641e4c6.js\"><\/script>\n\n\n\n<p>Use a &#8220;&lt;div&gt;&#8221;&nbsp;element with class&nbsp;.&#8221;btn-group&#8221;&nbsp;to create a button group<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Bootstrap dropdowns<\/strong><\/p>\n\n\n\n<p>The dropdown class is used to indicate a dropdown menu. Use the dropdown-menu class to actually build the dropdown menu. To open the dropdown menu, use a button or a link with a class of dropdown-toggle and data-toggle=&#8221;dropdown&#8221;.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Pavaniysk\/5cc271fb72176541302a88f8dd8a55e1.js\"><\/script>\n\n\n\n<p>The dropdown class indicates a dropdown menu.<\/p>\n\n\n\n<p>To open the dropdown menu, use a button or a link with a class of dropdown.togglw&nbsp;and the&nbsp;data-toggle=&#8221;dropdown&#8221;&nbsp;attribute.<\/p>\n\n\n\n<p>The&nbsp;caret&nbsp;class creates a caret arrow icon (v), which indicates that the button is a dropdown.<\/p>\n\n\n\n<p>Add the&nbsp;dropdown-mennu class to a&nbsp;&lt;ul&gt;&nbsp;element to actually build the dropdown menu.<\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Bootstrap Collapse:<\/strong><\/p>\n\n\n\n<p>Collapsibles are useful when you want to hide and show large amount of content.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Pavaniysk\/dfbadf8300e52fff251bc559b3cd789c.js\"><\/script>\n\n\n\n<p>The collapse class indicates a collapsible element. this is the content that will be shown or hidden with a click of a button. To control (show\/hide) the collapsible content, add the &lt;date-toggle=&#8221;collapse&#8221;&nbsp;&gt;attribute to an &lt;a&gt; or a &lt;button&gt; element. Then add the&nbsp;&lt;data-target=&#8221;#id&#8221;&gt;&nbsp;attribute to connect the button with the collapsible content (&lt;div id=&#8221;demo&#8221;&gt;).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is bootstrap? Bootstrap is front end framework for web development. It includes HTML and CSS designed templates and optional<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-57","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":6,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":71,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/57\/revisions\/71"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}