Bootstrap to Develop Responsive page.
Hi All, We are building a web page for our community and we are planning to use bootstrap for responsiveness. My question is, will Lithium supports bootstrap tags? Thanks, Suchith
Forum Discussion
Hi cike !
I am trying to use my custom community header and footer made with the Bootstrap 4 and it looks like in my case it dramatically affects Lithium's default components and layout.
Š”ould you please describe in more detail the process of injecting the pre-made Bootstrap 4 code (custom community header and footer in my case) into the default responsive community skin?
Below is the approach I am using with no luck.
Page Head Bottom Content section aka head.ftl in SDK plugin:
<link rel="stylesheet" href='${asset.get("/html/assets/bootstrap.min.css")}'/>
<link rel="stylesheet" href='${asset.get("/html/assets/header-footer.css")}'/>
<script src='${asset.get("/html/assets/jquery-3.3.1.slim.min.js")}'></script>
<script src='${asset.get("/html/assets/popper.min.js")}'></script>
<script src='${asset.get("/html/assets/bootstrap.min.js")}'></script>Page header section aka content_wrapper.ftl:
<div class="header-wrapper">
<!-- Responsive Header -->
<!--custom header html code goes here -->
<!-- Responsive header end -->
</div>
<@liaBody />
<div class="footer-wrapper">
<!-- Responsive Footer -->
<!-- custom footer html code goes here -->
<!-- Responsive footer end -->
</div>Thanks!
Lithium has its own default classes based on quilt and component wrapper.
Under the covers, Lithium Responsive leverages Twitter Bootstrap and Sass (SCSS), a CSS preprocessor that lets developers use variables, mixins, inheritance, nesting, and other useful features that extend and enhance traditional CSS. Lithium responsive solution enables developers to work with the latest framework and technologies to provide the most nimble and exciting community design.
Here is the document, this will helps you to have some more information related to Lithium responsiveness.
Parshant thanks! I already spent a couple of days trying to find the answer to my case inside the Responsive Communities Docs. In my opinion, the Documentation section lacks real examples/cases and not always so helpful.
I spent almost two years administrating our online community. And I learned that Lithium platform definitely is not conceived as a DIY tool. That actually is why I think that the Lithosphere is the best part of the services. And I hope to find some more in-depth help here in the community.
So my experience is like if you try to load the entire bootstrap it is heavy affects the platform. And I would really appreciate any help with that.
How about to write the community-driven guide "Customizing community main header and footer using Bootstrap"? :robotwink:
