Combat bootstrap XL class

[animal]

I added this to my css to get an extra large grid option in home page for big screens, but I do not want this class in the rest of pages, just in the home.

Is there any way to get this class out without loading a new css file?, it is a waste of bandwidth just to load the same css file without those lines.

My colums are like these in home page:

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-4 col-xl-4">
content
</div>

and in the rest of them like:

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-4"> (no col-xl-4)
content
</div>

I am still learning, always learning, but I have no idea how to achieve this or if there is a way to do it without loading a new css file.

Thanks for any thoughts about it.

[Beverleyh]

You should be able to merge/add it into your main/existing stylesheet.

If the xl class is only present in the markup of the home page, then only the home page will be affected.

You can have the same stylesheet linked to all pages of a website, but only when a class (or other selector combo) appears in that page markup, will the associated CSS take effect.

[animal]

Thank you Beverleyh for your reply.

That is the problem, I have the same stylesheet linked to all pages, and even taking out the markup (col-xl-4) it still takes effect because of the @media and I cannot get rid of it.

Anyway your comment gave me an idea, I use bootstrap css from a cdn and then I make changes through a custom css file, my idea was to put those styles in the header straight away, not loaded from a file, I could take this class (XL) out depending on the template used. Not sure if this is a good idea.

Thanks again.

[Author]

Posts