Live tutorial on using Bootstrap with Drupal today

Our old training site was looking a bit long in the tooth. It was not only Drupal 6, but also had an old Acquia design several versions behind the current main site. It was time for a major update.

Step by step tutorials

Dave Myburgh, lead developer for Acquia.com, recently gave two webinars about the experience. He shares specific tips on what modules he used to keep the development lightweight and flexible.

Webinar: Create a Drupal 8 Theme Using Bootstrap

DescriptIon: Watch this tech talk to learn how to create a Bootstrap theme for Drupal 8. 

WATCH NOW

The first recording is now available, and you can register for part 2, focusing on Bootstrap, which is today!

  • Part 1 (recording): All the site building configurations, module selection and custom code required to get the site working as needed.
  • Part 2 (sign up now!), 1pm EST: A deep-dive into theming with the Bootstrap framework/base theme developed originally by Twitter.

Easier to maintain and extend

For me, as a site builder on the site, I’m enjoying some awesome benefits from Bootstrap. Take for example this page which promotes our private training. On the old site, each of the sidebar items had to be created each as blocks, with visibility settings to control where they appeared.

Blocks are a great layout solution particularly where you're reusing them globally across the site. However, we had many cases where single blocks were used on some key landing pages.

old training site

 

    Get updates

    Receive the best content about the future of marketing, industry shifts, and other thought leadership.

    Now the new page takes advantage of Bootstrap’s Grid system and Components. This means to add the sidebar “panels” as they are called in Bootstrap, I add dividers with the appropriate classes. Here's an example:

    Looking for team training in Drupal?

    I also get components like the buttons, and larger “jumbotron” text at the top of the page. Of course it wouldn’t make sense if I was going to reuse those blocks across the site.

    This is a better solution in my case since I’m only displaying those blocks once. You do need to apply the appropriate tool to the job.

    With great power also comes responsibility.

    This of course means I require site building skills, HTML/CSS experience, and a safe staging environment to test all my changes on.

    The use case may be limited, but overall this works really well for the few one-off pages that we have on the site.

    training site example page

     

    Watch the webinar Part 2 today, 1pm EST: for detailed step-by-step and demos with Dave. He'll show you how to integrate Bootstrap with Drupal.

    • How to make a sub-theme with Bootstrap.
    • Altering it to work with SASS (instead of the default LESS)
    • Useful modules to make it easier to add Bootstrap classes
    Heather James

    Heather James

    Former Trainer and Learning Services ManagerAcquia