Bootstrap to Develop Responsive page.

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

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.

<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>

<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>

Suchith

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:

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.

Hi cike ,

Sure, I got the examples. 

In my case using the default out of the box Bootstrap 4 CSS library affects the CSS styles of many standards out of the box community components. Below this message are "before" and "after" screenshots of the out of the box Lithium's standard "New solutions", "Community Board List" and "Groups" components. So, in my opinion, that can be easily called "dramatically affects" if we are talking about the UX/UI.

It is all about the default bootstrap.min.css. So I just removed the link to it from the community wrapper and tried to dig deeply into the Lithium communities responsive developer documentation as well as into the sass files of the default responsive skin to figure out the way how I can use custom Lithium's bootstrap based CSS framework instead of the default Bootstrap CSS library.

My personal experience is that you can't just use the default Bootstrap 4 CSS library to customize your community.

"New solutions" standard component before I linked the default Bootstrap 4 CSS library

"New solutions" standard component AFTER I linked the default Bootstrap 4 CSS library

 "Community Board List" and "Groups" standard components before I linked the default Bootstrap 4 CSS library

 "Community Board List" and "Groups" standard components AFTER I linked the default Bootstrap 4 CSS library

cike I was able to exactly repeat this effect without changing any community wrapper's CSS just injecting the Bootstrap 4 default bootstrap.min.css into the custom component using the:

<style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</style>

So I think this is definitely is not the side effect regarding my header/footer style definitions.

Myko_P I also added the bootstrap CSS stuff to one of our test environments and there are side effects, too.  Not that heavy like your ones, but also visible to users.

Maybe Lithium Support can help you out in this case, maybe they have some best practices for such cases.

Well, while Lithium uses Bootstrap as well under the hood, it is a good practice to use Lithium CSS classes in your custom code. So you are able to use some the advantages and predefined styles of the platform.

Regards,

Christian

cike We are currently on our way to responsive upgrade so Lithium frontend team helped us to fix the issue. 

But it would be great to have some more in-depth section in the Responsive Developer Documentation site or in the Lithosphere related to how exactly make your vanilla Bootstrap 4 header and footer in line with the Lithium responsive CSS framework. For example: you should use these Lithium's CSS library wrapper classes and these prefixes and you should avoid using these standard Bootstrap 4 classes but you can use those etc.

That kind of guide also could save the Lithium frontend team a lot of time. Maybe it worth to make a new idea about that?

Myko_P Definitively!

I think the provided documentation can still be improved for all topics. Some things came up by trial and error in our cases. :smileyvery-happy:

Discussions like ours should be a good entry point to get started reviewing current documents and put some more stuff to them.