Forum Discussion

Suchith's avatar
Suchith
Ace
7 years ago

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

  • cike's avatar
    cike
    Champion
    7 years ago

    Hi Suchith,

    in order to use Bootstrap within Lithium, you have to include the necessary files (*.css, *.js) as described on the Bootstrap pages.

    If you did this, you can use the CSS classes and the other within your customisations. Lithium's default components and layout won't be affected and can't be styled/handled with Bootstrap.

     

    Regards,

    Christian

    • Myko_P's avatar
      Myko_P
      Expert
      7 years ago

      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!
       
       
       
      • cike's avatar
        cike
        Champion
        7 years ago

        Hi Myko_P,

        do you have an example what shows the "dramatically affects Lithium's default components and layout"?

        While Lihtium under the hood uses Bootstrap too, maybe the there are some side effects regarding your header/footer style definitions. These maybe overrides Lithium designs and/or layout settings.