How to use custom bootstrap libraries for bootstrap subthemes
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY alfred.paul
4 years ago
Bootstrap
0
comments comment

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first websites. This framework is also a popular star in drupal themes. There are a lot of drupal themes based on bootstrap, using bootstrap library or subthemes created from bootstrap base theme. Its mobile ready design and predefined classes makes it easier to create a beautifully customized responsive theme.

While working on a project I had a requirement to make permanent hamburger menu (That's right, the button with three lines at the top of any mobile page created using bootstrap) regardless of the viewport resolution. Default behaviour of bootstrap is like this, when the viewport width become less than 768 pixels, the main menu will collapse into hamburger button. I had to change this behaviour.

This can be done by customizing the bootstrap library from http://getbootstrap.com/customize/

The break point at which main menu collapses to hamburger menu is defined inside @grid-float-breakpoint variable in the bootstrap customization page. We can set that to any screen width. Main menu will be collapsed to hamburger if viewport width is less than the width specified here. I placed 9999px in that field (Hoping nobody is using such resolution devices for browsing!!). This will change the grid-float-breakpoint and hamburger menu will always show. We can download the customized library and replace our bootstrap library to see the changes. Easy right?

Well not that easy, because the bootstrap base theme is getting the bootstrap library (CSS and JS) from bootstrap CDN and here we are using a customized bootstrap library. Bootstrap theme does not allow using custom library for bootstrap. Well, there is a module for everything in drupal.

Here I am using a module called bootstrap_library which basically does nothing other than allow us to use custom bootstrap libraries to our bootstrap sub-themes.

1. Disable the Bootstrap CDN from our sub-theme by going to Appearence > Select settings of our subtheme > Advanced and disable the CDN.

2. Copy the extracted custom bootstrap library to sites/all/libraries/bootstrap. The bootstrap.min.js file location must be sites/all/libraries/bootstrap/js/bootstrap.min.js so that it is detected properly by the module.

3. Enable module bootstrap_library and goto "admin/config/development/bootstrap_library" and select bootstrap and our sub-theme from the multi-select box in the "Theme Visibility" fieldset and save.

That's it. The above steps will enable us to use any customized version of bootstrap. Happy bootstrapping folks. :)


RELATED ARTICLE

more_horiz
close

on 25th March 2015 / by akhila.vn
I had a requirement to add a multi-level responsive drop down menu in a Zyxware theme. Please do refer the below reference links to know more about responsive themes and free Drupal themes. So I need to edit page.tpl.php, page--front.tpl.php, style.css, template.php etc. Bootstrap Drupal Leave a reply Your email address will not be published. Required fields are marker * doug (not verified) access_time 17 Jul 2019 - 14:39 Thank you. I was so shocked when I realized that the bootstrap theme did not have more than 2 levels of nav. Wow Your code worked right away. I need to minimally re-work my theme, but it is all good. this - '\n'; should be this - ''; I did not have to add this ' print render($main_menu); ' to the page.tpl and page--front.tpl Add new comment
more_horiz
close

on 01st April 2015 / by aby.va
Bootstrap twitter is includes a responsive, mobile or tablet first fluid grid system that ... it is styling on small and medium devices but also on large devices if a .col-lg-* class is not present. My company has a lot of free Drupal themes developed. But there is a problem i.e these are not responsive. So we started to change this themes in responsive and For that we suggest the new bootstrap framework for responsive. We success fully converted the plane html code in to bootstrap grid format. Bootstrap Leave a reply Your email address will not be published. Required fields are marker *
more_horiz
close

on 21st April 2015 / by alfred.paul
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first websites. This framework is also a popular star in drupal themes. There are a lot of drupal themes based on bootstrap, using bootstrap library or subthemes created from bootstrap base theme. Its mobile ready design and predefined classes makes it easier to create a beautifully customized responsive theme. Bootstrap Leave a reply Your email address will not be published. Required fields are marker *
Leave a reply
Your email address will not be published. Required fields are marker *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.