Drupal Bootstrap

Version

In this series, we will go through together to build a complete Bootstrap website with Drupal to have a better understanding on how it works between the two. This is a course for the beginner. Especially for those who are new to building Bootstrap website with Drupal 7. However, I will expect you to know about Drupal installation and to have fair understanding about HTML, CSS and bootstrap framework, like the grid classes and columns. All of these will help you to follow along better and more beneficial with the tutorials. At the end of this course, you should be able to build a responsive bootstrap website with Drupal 7 easily.

Now, what will you learn in this series?

  • You will learn from the very beginning on how to install the Drupal bootstrap theme,
  • Creating the sub theme
  • Learning various useful modules like CKEditor, IMCE, pathauto, token filter and etc.
  • Inserting Glyphicon or fontawesome icons to the menu, the block, field and icon tag in the text area to insert your social media icons.
  • Selecting bootstrap navbar
  • Creating different bootstrap components like Carousel, Media object, Thumbnail, grid and table using powerful Views and modules.
  • Configuring the layout nicely with Display Suite module and turn it into a responsive layout.
  • Creating bootstrap tabs to hold different fields.
  • Creating Photo Gallery with bootstrap Modal.
  • Embedding Responsive video
  • Creating FAQ and display them nicely in accordion layout.
  • Creating a contact form with Webform
  • Changing template variable assignment

...and many more to be added as bonus...

What are the requirements?

  • Install Drupal 7 on your own PC or remote hosting
  • Fair knowledge of HTML, CSS, and Bootstrap framework

What am I going to get from this course?

  • Over 33 lectures and 4 hours of content!
  • Build a complete Bootstrap website with Drupal 7
  • Create Bootstrap components with Drupal Views

What is the target audience?

  • Beginners who are new to building bootstrap website with Drupal. No prior programming knowledge is needed.


+ This series is dedicated to the Lord of Divine Mercy and Mother Mary +

Videos
Video URL

NOTE: If you are using Drupal 8, you can still benefit from these tutorials.

Video URL

In this tutorial, we are going to install and configure some modules for ease of maintenance for our administration site.

Modules to install: 

Video URL

In this tutorial, we will install the bootstrap theme 3.0. As for newer version like 3.1 and above, the way of installation is the same.

Video URL

NOTE: This tutorial is meant for Bootstrap theme 3.0.

Video URL

NOTE: This tutorial is meant for Bootstrap theme 7.x-3.0.

Video URL

NOTE: This tutorial is meant for Bootstrap theme 7.x-3.0. If you install the newer version 7.x-3.1 and above, your template files should be stored inside the ./bootstrap/templates folder.

Video URL

This video showing you on how to work on Bootstrap Navbar. Enjoy ~

Video URL

In this tutorial we will create some basic pages and install "Special Menu Items" module for the menu that is not linking to any page of URL with nolink tag. 

Video URL

In this tutorial we will install and configure the pathauto module to auto generate the URL aliases for each of our content without doing it manually.

Video URL

Sites provide images for FREE download and use **
https://www.pexels.com


~~~~~~~~~~~~~~~

Video URL

In this tutorial, we will create a Views to sort the slides with draggableViews module.

Playlist: https://goo.gl/47TkI6

Video URL

This tutorial we will create a 3-column custom block in the front page. We will also turn on the custom formatting options in CKEditor for some adjustments.

Video URL

In this tutorial, we will get our article content type ready for inserting contents. To get multiple file upload ready, please follow the tutorial below:

Video URL

Please make sure you have installed the "Image URL Formatter" module which we have gone through in the earlier video.

Playlist: https://goo.gl/47TkI6

Video URL

To make the image larger on hovering, you can apply some CSS3 styles like this  :)

.col .dImage{ overflow: hidden; }

Video URL

In this tutorial, we will learn how to use Display Suite module to theme our node page. Display Suite is one of the nice module for creating responsive layout for your responsive website. 

Video URL

FREE IMAGES
Site provide images for free download and use

Video URL

NOTE:
If you are using Bootstrap theme 3.x (3.1 and above), please use following css to distance the menu from the icon. The icon is using the SPAN tag instead of i tag now. Take note.

Video URL

In this tutorial, we will learn on how to add icons (Glyphicon/Font awesome) as filter in the textarea and field.
 

Video URL

In this tutorial, we will create a contact us with webform module, create different form components and fix an email component issue for Bootstrap theme.

Video URL

In this tutorial we will create a custom copyright's block for the footer and use the token to output the year dynamically.

Video URL

Finally, we come to an end of the project, we are going to finish off some final works, close it and celebrate ! 

Video URL

In this tutorial, we are going to change the template variable assignment from small grid to medium grid so that on the small screen, the sidebars and main content column will stack one on top of a

Video URL

In this tutorial, we are going to change the template variable assignment from small grid to medium grid so that on the small screen, the sidebars and main content column will stack one on top of a

Video URL

n this tutorial, we will reorder the main content columns and the left sidebar so that the main content column will be displayed on top of the sidebars on the small screen.

Video URL

Earlier on I have introduced on how you can enable bootswatch to change theme of colors and design for your bootstrap when you are using CDN.

Video URL

In this tutorial we are going to add a menu to the left sidebar without the dropdown function which Bootstrap theme has overridden for all menus.