May Meetup

Trebor's picture
2016-05-09 17:30 - 18:30 America/Vancouver
Event type: 
User group meeting

Location: Western City Center (the first floor of the Herald Building) - 1155 North State St.

Time: 2016-05-09 at 5:30pm-6:30pm


  • Spend a few minutes to troubleshoot any Drupal prolbems folks may have, then move into the main topic.

  • Bootstrap 3 Theme overview, including subtheming using the LESS Starterkit. Will show some of the benefits of using the Bootstrap "mobile-first" framework ( and how the Less CSS preprocessor can help with more complex styling. Will also show how you can customize the Bootstrap framework build to include only the features you need for a given project/site.

Bootstrap 3 Theme project:

Bootstrap 3 Theme Docs:

LESS Starterkit for D7:

LESS Starterkit for D8:


Links from 2016-05-09 talk

Trebor's picture

Some links that may be useful from the 2016-05-09 Bootstrap talk:

Create your own custom build of Bootstrap, useful if you only need a subset of what it offers and are trying to ensure best performance:

The Drupal Bootstrap Theme Docs for both D7 & D8:

A package for Sublime Text 2/3 for Bootstrap 3 snippets to aid in quick Bootstrap construct creation:

A large list of Bootstrap-related resources (for Drupal and other Bootstrap-related installs):

A Bootstrap linter (Bootlint) to help catch errors and warnings:

List of Bootlint errors and warnings:

Trebor's picture

The callout CSS that appears on the main Bootstrap site (e.g. on that is not part of Bootstrap proper, you need to save this as a separate CSS and call it as needed:

.bs-callout {
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
.bs-callout h4 {
    margin-top: 0;
    margin-bottom: 5px;
.bs-callout p:last-child {
    margin-bottom: 0;
.bs-callout code {
    border-radius: 3px;
} {
    margin-top: -5px;
.bs-callout-default {
    border-left-color: #777;
.bs-callout-default h4 {
    color: #777;
.bs-callout-primary {
    border-left-color: #428bca;
.bs-callout-primary h4 {
    color: #428bca;
.bs-callout-success {
    border-left-color: #5cb85c;
.bs-callout-success h4 {
    color: #5cb85c;
.bs-callout-danger {
    border-left-color: #d9534f;
.bs-callout-danger h4 {
    color: #d9534f;
.bs-callout-warning {
    border-left-color: #f0ad4e;
.bs-callout-warning h4 {
    color: #f0ad4e;
.bs-callout-info {
    border-left-color: #5bc0de;
.bs-callout-info h4 {
    color: #5bc0de;