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
5 years ago
Technical-Solution
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

/themes/custom/zyxpro_light/images/placeholder.png
close

on 04th April 2007 / by webmaster
Linux is the epitome of the FLOSS model. Technical Solution Linux installation Leave a reply Your email address will not be published. Required fields are marked * Dewey J. Corl (not verified) access_time 10 Jul 2020 - 11:15 Linux is not ready for the general public! (I am a Ubuntu user). For proof, 1. try to simply print labels on a Dymo label printer. It takes a LOT of work to get to the ease of label printing already available in Windows and Mac. 2. try syncing a modern Palm based PDA. Yes, jpilot and others will sync the main data, but pictures and midi files do not get transferred without a lot of extra setup. These are examples of applications that are not ready for the general public. Since an operating system only supports applications, Linux is not ready to be a common desktop for the general public. While we are waiting for the applications to catch up, keep up the good work!! Anoop John (not verified) access_time 10 Jul 2020 - 11:15 Dewey Yes you may be right. But these are not applications that a common man would use. A common man would use one of these applications - Internet browser, Chat Client, Email Client, Document Writer, Presentation Creator, Spreadsheet Editor, Movie Viewer, Music Player, CD/DVD Writer. Both examples you cited are more specific applications that only a small percentage of the whole population uses. It will take time before those hardware vendors identify the need from their perspective to address the Linux community. Krishnadas (not verified) access_time 10 Jul 2020 - 11:15 Dear Mr Anoop, Thank you very much for the free installation of LINUX done in my PC. I am getting immersed in the LINUX and seeing the versatility. To my surprise, I am able to read one of my old backup CD(wherein lot of my valuable file exist) done in DIRECT CD wizard (a custom cd writing software of Easy Cd creator in WIN98) which could not be read in XP. Installation of old version of easycd creator/direct cd program was not possible in XP. I thought that possible i lost all data. Very pleasant start! Srikanth N. S. (not verified) access_time 10 Jul 2020 - 11:15 Hi Anoop, My friend is thrilled with Ubuntu. One of his grouses with windows was that after OS installation, everything else is to be installed separately which is a real headache. WHereas if u install Linux, everything is installed as a package and he is thrilled to bits! Let linux installation spread in Trivandrum and your service in this direction is highly appreciated. Kepp up the good work Regards. PDA Freak (not verified) access_time 10 Jul 2020 - 11:15 Is it possible to install linux on a packardbell notebook ? Pagination Current page 1 Page 2 Next page Next › Last page Last » Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

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.