{"id":3422,"date":"2019-07-15T11:16:08","date_gmt":"2019-07-15T05:46:08","guid":{"rendered":"https:\/\/www.idslogic.com\/blog\/?p=3422"},"modified":"2025-02-24T17:54:37","modified_gmt":"2025-02-24T12:24:37","slug":"using-bootstrap-with-sitefinity-cms-a-guide","status":"publish","type":"post","link":"https:\/\/www.idslogic.com\/blog\/using-bootstrap-with-sitefinity-cms-a-guide","title":{"rendered":"Using Bootstrap with Sitefinity CMS: A Guide"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.idslogic.com\/blog\/using-bootstrap-with-sitefinity-cms-a-guide\/#Understanding_The_Bootstrap_Framework\" title=\"Understanding The Bootstrap Framework\">Understanding The Bootstrap Framework<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.idslogic.com\/blog\/using-bootstrap-with-sitefinity-cms-a-guide\/#How_Sitefinity_Development_Supports_This_Framework\" title=\"How Sitefinity Development Supports This Framework?\">How Sitefinity Development Supports This Framework?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.idslogic.com\/blog\/using-bootstrap-with-sitefinity-cms-a-guide\/#Design_of_Your_Project\" title=\"Design of Your Project:\">Design of Your Project:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.idslogic.com\/blog\/using-bootstrap-with-sitefinity-cms-a-guide\/#The_Community_and_Documentation\" title=\"The Community and Documentation:\u00a0\">The Community and Documentation:\u00a0<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><span style=\"font-size: 14pt;\">Whenever we talk about front-end development, Bootstrap CMS is the most popular work that the developers have heard of. CMS Bootstrap is one of the most well-known front end development frameworks that is created by Twitter and is said to be used by over 12 million websites and apps today.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">When Sitefinity Feather was released in the market, it gained much popularity among the users because of one of its major selling point, which was the integration of Bootstrap CMS into the templates and the widgets.<span style=\"color: #ff0000;\"> <a style=\"color: #ff0000;\" href=\"https:\/\/www.idslogic.com\/sitefinity-development\/\">Sitefinity CMS development<\/a> <\/span>comes with the Bootstrap package, which includes the capabilities of the respective Bootstrap frontend version.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Understanding_The_Bootstrap_Framework\"><\/span><span style=\"font-size: 18pt; color: #008000;\"><strong>Understanding The Bootstrap Framework<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">If you are not so much familiar with what Bootstrap actually is, then it is essentially a set of themed, pre-created, front end code that allows the developers immediate access to pre-styled components and the developers don\u2019t have to write the base front end code themselves.\u00a0 <\/span><\/p>\n<p><span style=\"font-size: 14pt;\">For example, instead of having to write the CSS for any button, they can now just link it to Bootstrap, use the CSS class and instantly have a styled button for their site without much effort.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><a href=\"https:\/\/www.idslogic.com\/bootstrap-development\/\"><span style=\"color: #ff0000;\">Bootstrap framework<\/span><\/a> is built on HTML, CSS and JavaScript to support the development of mobile first, responsive sites and apps. It includes user interface components, JS tools and layouts along with the framework for implementation.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_Sitefinity_Development_Supports_This_Framework\"><\/span><span style=\"font-size: 18pt; color: #008000;\"><strong>How Sitefinity Development Supports This Framework?<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-size: 14pt;\">Sitefinity CMS has the Bootstrap as its out of the box features and Progress has made Feather flexible to use any other framework with just a little bit of work. They also offer support if you start your project.\u00a0 This is a great reason why developers love Sitefinity CMS and it offers a front end flexibility that you need.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Now the question is, should you have Bootstrap installed in your application or not? Let\u2019s discuss some core aspects that will help you decide on the best option for your project.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Design_of_Your_Project\"><\/span><span style=\"font-size: 18pt; color: #003366;\"><strong>Design of Your Project: <\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\">If you are looking for something that is attractive, then your website should be appropriately designed. It should have something in it that can set it apart from other sites. At IDS Logic, we have our front end developers who can help to add innovative ideas to your project while meeting your exact needs. But bootstrap was not created to handle complex projects. For this, you have to write your own custom codes.<\/span><\/p>\n<blockquote><p><span style=\"font-size: 20pt; color: #000080;\">&#8220;Then when is Bootstrap an advantage for you?&#8221;<\/span><\/p><\/blockquote>\n<p><span style=\"font-size: 14pt;\">It is best for Sitefinity applications that don\u2019t have a pre-determined theme. It is great for developers with minimal front end experience who are interested in making a quick application using the basic design foundation that Bootstrap offers.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"The_Community_and_Documentation\"><\/span><span style=\"font-size: 18pt; color: #003366;\"><strong>The Community and Documentation:\u00a0<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-size: 14pt;\">Bootstrap websites offer a wide range of documentation that helps the developers a lot. Not only this, it also has an enormous community that helps to develop the Bootstrap code into your Sitefinity CMS website. Chances are high that you will find an answer on the site or on a quick Google Search.<\/span><\/p>\n<blockquote>\n<p style=\"box-shadow: 0 0 16px #cccccc; padding: 10px;\"><span style=\"font-size: 14pt;\"><strong>Also Read:\u00a0<\/strong><a href=\"\/blog\/how-to-super-secure-your-sitefinity-cms-website-and-be-safe\"><span style=\"color: #ff0000;\">How to Super Secure Your Sitefinity CMS Website and Be Safe<\/span><\/a><\/span><\/p>\n<\/blockquote>\n<p><span style=\"font-size: 14pt;\">Bootstrap is also used as out of the box in <a href=\"https:\/\/www.idslogic.com\/sitefinity-development\/\">Sitefinity development. <\/a>Any errors or bugs that come up related to this framework is easy to fix with it. This is also an added advantage of using it together with your CMS. Bootstrap documentation is very helpful when working with their codes. It is also useful while writing custom codes.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whenever we talk about front-end development, Bootstrap CMS is the most popular work that the developers have heard of. CMS Bootstrap is one of the most well-known front end development frameworks that is created by Twitter and is said to&#8230;<\/p>\n","protected":false},"author":1,"featured_media":3690,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[251],"tags":[252,226,284],"class_list":["post-3422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sitefinity","tag-sitefinity-cms-development","tag-sitefinity-development","tag-sitefinity-development-company"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/3422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/comments?post=3422"}],"version-history":[{"count":7,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/3422\/revisions"}],"predecessor-version":[{"id":10650,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/posts\/3422\/revisions\/10650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media\/3690"}],"wp:attachment":[{"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/media?parent=3422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/categories?post=3422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.idslogic.com\/blog\/wp-json\/wp\/v2\/tags?post=3422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}