3

I was wondering if anyone could provide me with some advice on implementing bootstrap in D7 with the a Zen subtheme.

I'm really only using it for the responsive div sizing at the moment - I've got a 3 column layout on my homepage that uses col-sm-4 so that it stacks the columns when you're looking at it on a phone-width browser. I've done quite a lot of customization in my Zen subtheme, so I don't really want to install an entirely new theme (the Drupal bootstrap theme, or Zenstrap, for example).

I've tried a couple of approaches to this. First time around, I just copied the bootstrap css file into my theme's css directory, then included it in the normalize.css file, at the top. This worked pretty well, but it occurred to me that if I wanted to use any of the JavaScript features I wouldn't be able to.

Second time around I tried using the Drupal Bootstrap library module. This is also pretty good, and includes the css and js files on all the site pages.

However, I note that it overrides quite a lot of my existing styles. For example, I've got a number of linked headings on the homepage. I don't really want them to use the link style, but whatever I do in the normalize.css stylesheet, I can't stop my homepage picking up the Bootstrap styles. I guess maybe the theme stylesheet loads before the bootstrap stylesheet.

So I'd like some advice, please. Which of the two approaches is the better way to use Bootstrap? Is there another way that is better than either of those approaches? Is using Bootstrap even the best way to make my site responsive?

Thanks very much.

Improve this question

1 Answer 1

Reset to default
5

In your_theme.info do the following:

stylesheets[all][] = bootstrap.css
stylesheets[all][] = yourstyles.css

This should load both Bootstrap first and your own CSS files afterwards.

Improve this answer
5
  • Thanks. In the end, I went for a hybrid solution. I used an import into the Zen subtheme's css/styles.css sheet, then moved all my custom styling into the styles.css sheet beneath the import. I've referenced the js parts of bootstrap in the subtheme.info file, as you suggested, and that seems to be working pretty well.
    – jamesdesq
    Commented Sep 19, 2014 at 13:34
  • Yea that would also work. My answser is the proper drupal way though :) you could accept my answer ;)
    – Akko
    Commented Sep 20, 2014 at 17:59
  • I agree - your way seemed to be the best way, and I wanted to do it that way, but I couldn't get the stylesheet to load that way.
    – jamesdesq
    Commented Sep 23, 2014 at 16:14
  • The media type is missing, it should be e.g. stylesheets[all][]...
    – Kari Kääriäinen
    Commented Apr 23, 2015 at 23:03
  • @Akko How to show user picture with dropdown instead of user menu in a zen sub theme?
    – Umair
    Commented Aug 1, 2018 at 13:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.