Joomla 3.x and Bootstrap 3.0

john-doe · Post by **john-doe** » Sun May 11, 2014 2:29 pm

neeravpandya wrote: Can you please explain a little as to how do I set a custom bootstrap and get rid of spanX classes.
Please do not mind if this seems to be a very stupid question. I am a newbie.

If you are falimiar with bootstrap in the page you have a customize section where you set the colors and parameters; at the end you can download your custom bootstrap.

Then you download it to the template structure and you add the files and folders into template details.xml

In the index.php beforre doctype you se t this:

Code: Select all

<?php 
defined( '_JEXEC' ) or die;
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
// Añadiendo las hojas de estilos CSS
$doc->addStyleSheet('templates/'.$this->template.'/css/bootstrap.min.css');
$doc->addStyleSheet('templates/'.$this->template.'/css/bootstrap.css');
?>
<!DOCTYPE html>

You choose if you want the full or minified or both, either way is now your custom bootstrap.

Then you start to work in the blocks and you set instead of span-X the value col-md-x
then you can add if you want col-xs-X or col-lg-X but if you're used to BS 2.3.2 structure col-md-X will do fo you.

Don't forget to add your .js files at the end of the file this way:

Code: Select all

<?php $doc->addScript('templates/'.$this->template.'/js/bootstrap.min.js'); ?>
   </body>
</html>

This is basically how to set up a Custom Bootstrap into your custom template since you might need your custom colors for body, text, hyperlinks, gutter for the grid and column base.

neeravpandya · Post by **neeravpandya** » Mon May 12, 2014 7:13 am

Thanks for the explanation john doe. I really appreciate the time you spared to explain in such detail. Thanks again.

I am trying to get my template work in Joomla 3.3 with BS 3 but the BS navbar doesn't work.

I have the following code included in the portion above the <!doctype>

Code: Select all

// Add JavaScript Frameworks
//JHtml::_('bootstrap.framework');
$doc->addScript('templates/'.$this->template.'/js/custom.js');

// Load Bootstrap bugfixes
//JHtmlBootstrap::loadCss($includeMaincss = true);
$doc->addStyleSheet('templates/'.$this->template.'/css/bootstrap.min.css');
$doc->addStyleSheet('templates/'.$this->template.'/css/bootstrap.css');
$doc->addStyleSheet('templates/'.$this->template.'/css/custom.css');

Just before the </body> closing tag I have the inclusion for the BS js and jquery

Code: Select all

<script src="<?php echo $this->baseurl ?>/templates/prostudio/js/jquery-1.11.0.js" type="text/javascript"></script>
    <script src="<?php echo $this->baseurl ?>/templates/prostudio/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="<?php echo $this->baseurl ?>/templates/prostudio/js/custom.js" type="text/javascript"></script>

My code for the navbar within the <body> tag is here

Code: Select all

<div class="row" id="menubar">
    	<nav class="col-xs-12 navbar navbar-default " role="navigation" id="menubar-inner">
				<div class="container-fluid">
                                    <div class="navbar-header">
					<a class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
                                        <a class="navbar-brand" href="<?php echo $this->baseurl ?>" ><?php echo $logo; ?></a>
					<div class="collapse navbar-collapse ">
						<jdoc:include type="modules" name="menubar" style="html5" />
					</div>
                                    </div>
				</div>
		</nav>
    </div>

But it is not working. Attached is the screen shot of the navbar as viewed on the site.

navbar.png

What am I missing here or doing wrong? Any help will be much appreciated.

john-doe · Post by **john-doe** » Mon May 12, 2014 12:28 pm

You might need to do some css for the menu inside. NOrmally i do some nav ul li display inline block to align them, if submenu is needed there is a trick i don't have close to me right now but it works.

john-doe · Post by **john-doe** » Sat May 17, 2014 8:56 pm

Recently i have discovered that you should do an override for mod_menu by addding the bootstrap 3 classes for the main menu and you don't need to do additional CSS

neeravpandya · Post by **neeravpandya** » Sun May 18, 2014 7:14 am

How? Or rather what type of override? Can you please elaborate a little.
Thanks

john-doe · Post by **john-doe** » Sun May 18, 2014 2:23 pm

Looks like that the problem is still on going. That's good you ask since this can make your menu problem more easy to pass.

First check on Getbootstrap the structure of the navbar:

Code: Select all

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Now you need to do an override for your template. In the HTML folder of the template make a folder called mod_menu

Then go to modules/mod_menu/tmpl and open default.php and at the beginning you see this piece of code:

Code: Select all

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
?>
<?php // The menu class is deprecated. Use nav instead. ?>
<ul class="nav menu<?php echo $class_sfx;?>"<?php
	$tag = '';

	if ($params->get('tag_id') != null)
	{
		$tag = $params->get('tag_id') . '';
		echo ' id="' . $tag . '"';
	}
?>>
<?php
foreach ($list as $i => &$item)
{

If you paid attention to the bootstrap code you should change the classes at the UL tag at the beginning of the block like this:

Code: Select all

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
?>
<?php // The menu class is deprecated. Use nav instead. ?>
<ul class="nav navbar-nav<?php echo $class_sfx;?>"<?php
	$tag = '';

	if ($params->get('tag_id') != null)
	{
		$tag = $params->get('tag_id') . '';
		echo ' id="' . $tag . '"';
	}
?>>
<?php
foreach ($list as $i => &$item)
{

You save this in the HTML/mod_menu from your template as BS3-navbar.php (or the name you like), then you go to the module manager and select your menu and you check in advance for Alternative Layout and you select the override you just did.

That same thnig applies as well for pill menus and stacked pills so if you need them check the bootstrap code and try them.

Hope this works better for you.

neeravpandya · Post by **neeravpandya** » Mon May 19, 2014 11:16 am

Hi
Thanks for sparing your time and responding. I really appreciate it.
I tried the override but somehow couldn't succeed. However I finally got the BS Navbar working. Below is the approach that I followed

The code in the template.php:

Code: Select all

<div class="row" id="menubar">
<?php if($this->countModules('menubar')) : ?>
    <!-- Begin Navbar -->  
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
              <a class="navbar-brand" href="<?php echo $this->baseurl; ?>"><?php echo $logo; ?></a>
            </div>  <!-- /.navbar-header -->
              <div class="collapse navbar-collapse">
                <jdoc:include type="modules" name="menubar" style="none" />
              </div> <!-- /.navbar-collapse collapse -->
        </div> <!-- /.container-fluid -->
    </div><!-- /.navbar .navbar-inverse -->
    <?php endif ;?>
    </div>
    <!-- End Navbar -->

Then either in the custom js file or at the end of the template.php just after the </body> tag the javascript as under

Code: Select all

(function($){
    jQuery(document).ready(function(){
      $('.navbar-nav > .parent').addClass('dropdown');
      $('.navbar-nav > .parent > a').addClass('dropdown-toggle');
      $('.navbar-nav > .parent > a').attr('data-toggle', 'dropdown');
      $('.navbar-nav > .parent > a').attr('href','#');
      $('.navbar-nav > .parent > a').append('<span class="caret"></span>');
      $('.navbar-nav > .parent > ul').addClass('dropdown-menu');
    });
  })(jQuery);

And voila! the BS Navbar is working now.

I thought of sharing this as it might help somebody else.

kj100 · Post by **kj100** » Sun Jul 13, 2014 12:04 pm

In case anyone is still struggling with this here is how I have resolved the issue using Bootstrap 3.2 with Joomla 3.3.1. I had been using PHP unset to remove the Bootstrap 2.3 JavaScript but with recent Joomla releases this was not working so well.

So I have replaced the JUI bootstrap.min.js (/media/jui/js/bootstrap.min.js) with an empty file. This prevents it loading which is OK as long as you are not using any extensions that depend on Bootstrap 2.3. But it also breaks the Admin functionality as well. To resolve this load the Bootstrap 2.3 JavaScript explicitly in /administrator/templates/isis/index.php

Code: Select all

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScriptVersion('templates/' . $this->template . '/js/bootstrap.min.js');
$doc->addScriptVersion('templates/' . $this->template . '/js/template.js');

Bootstrap 2.3 is no longer supported and to me it is just not workable any more. I've been using Joomla as the mainstay of my business for over 5 years but this will be my last Joomla project, at least until this debacle is sorted out.

john-doe · Post by **john-doe** » Sun Jul 13, 2014 1:32 pm

Is a shame that this is your last project but working out some overrides would help you out. At least in my experience i haven't had any complications by setting a BS3 template. but you don't need to remove BS2.3.2 from Backend. You can keep it that way and your template can work on BS3 perfectly.

The Components if they are set for BS2.3.2 can be sorted out.

kj100 · Post by **kj100** » Sun Jul 13, 2014 2:37 pm

john-doe

If you read my post it is all about keeping Bootstrap 2.3 for the backend where legacy frameworks cause me less of an issue. Bootstrap 2.3 is just unacceptable to me in the front-end of production sites.

I too am sorry that Joomla has become so difficult to use after all this time and so many successful sites. But fighting with script conflicts has just become too time consuming and expensive for me, and frustrating for my clients.

I sincerely hope the issues get resolved and then I’ll be first in line to use Joomla again.

alancoughlin · Post by **alancoughlin** » Sat Sep 06, 2014 4:07 am

I had the exact same issue as you. I've researched, experimented, and tested. I've implemented it successfully on 3 web sites. The solution is utterly simple:

You will create overrides for the Bootstrap CSS and JavaScript files for your front-end custom template.

You will leave the back-end template alone in the default configuration. It will load the Bootstrap version 2 CSS and JavaScript files and it will function fine.

To create the overrides, do as follows:

1. Add the current Bootstrap CSS file (both .css and .min.css) from http://www.getbootstrap.com to /templates/yourtemplate/css/

2. Add the current Bootstrap JavaScript file (both .js and .min.js) from http://www.getbootstrap.com to /templates/yourtemplate/js/jui/
(You will probably have to create the "jui" folder.)

3. Include these 2 lines within PHP tages above the <!doctype html> at the top of your template's index.php file (located inside /templates/yourtemplate/):
$doc->addStyleSheet('templates/'.$this->template.'/css/bootstrap.min.css');
JHtml::_('bootstrap.framework');

Calling the Bootstrap JavaScript file with the JHtml command will allow Joomla to check for overrides in the appropriate folder in your template first before looking in /media/jui/. And it will enable the other functionality that comes with that command (i.e., enabling the jQuery framework in noConflict mode and loading the .min version normally and the non-minified version when in debug mode).

Please let me know if I got something wrong.

ysrostov · Post by **ysrostov** » Thu Oct 23, 2014 2:42 am

Using alancoughlin's advice I managed to make almost everything working but mobile mode menu in search result page. It seems that in this case the idea of separating template from the core just doesn't work since search result page loads additional piece of script from 'previous bootstrap version approach' to make drop down menu work. In my case I couldn't manage to open submenus in mobile mode. If you look at the source code in search result page you'll find piece of JS that may cause problems at the bottom of the code. I'm not versed in JS so I cant fix it. I would appreciate any advice.

alancoughlin · Post by **alancoughlin** » Thu Oct 23, 2014 2:31 pm

ysrostov,
The navbar menu on the search results page on my web site, on my phone, is working fine: http://www.creativemarketingservices.com. Can you give me a URL where you are experiencing this? Thanks.

ysrostov · Post by **ysrostov** » Thu Oct 23, 2014 3:14 pm

alancoughlin,
nice site) I am trying to make something a bit simpler so far) Mine is not in english - http://shell-volga.ru but you can try enter word "rimula" into search box, then narrow browser to mobile size and try to click any submenu after opening the main menu - no result in my case.

john-doe · Post by **john-doe** » Thu Oct 23, 2014 3:32 pm

YSRostov i was thinking that you might need set the item with a override for default_url but appears like you have it.
The only thing i might get interested from your templates is how can i make that the submenu deploys with a hover instead of clicking since all my templates have been done with overrides and so far that's the only way it worked.

Looking that way i'm not sure if the hover state might be the problem there since (my theory is) you need to click in the upper menu level so it can be deployed, but in order to do so the click needs to work as well in de full size menu. Is just an idea but now that i see it it might be the issue.

alancoughlin · Post by **alancoughlin** » Thu Oct 23, 2014 3:42 pm

ysrostov,
(Thank you. I like your site too!)
I see what you are saying about your submenu. On creativemarketingservices.com, a couple of weeks ago, I noticed the submenu quit working. I could not figure out why, so I just implemented a CSS hover solution. This is simple, but does not look good in the mobile size (you really need to have the accordian-like functionality of expanding downward for submenus on mobile). On another site I made, http://www.alancoughlin.com, which is nearly identical in the code and uses all of the same bootstrap javascript and bootstrap css versions, the submenu is still working correctly. When I have time, I will try to figure out how to fix creativemarketingservices.com so it works like alancoughlin.com. If you can figure it out first, please let me know.

ysrostov · Post by **ysrostov** » Thu Oct 23, 2014 3:49 pm

Thanks John-doe. I don't think it's the issue - I disabled hover state in mobile mode by media query.

alancoughlin, thank you for your tips, yeah sure if by chance I figure it out I'll let you know)

ysrostov · Post by **ysrostov** » Thu Nov 06, 2014 3:17 pm

If anyone is still interested I solved the main issue but am not yet satisfied with the overall result. The main challenge for me was to make navbar menu of Bootstarp 3 working smoothly on any webpage, window size etc. The reason it didn't work was piece of JS code aimed to add functionality of Bootstrap's 3 brand new navbar. If you want the navbar to work you have three options, as I see it: 1) download and install BS3Navbar Joomla module – someone created it and made it public (I haven't tested it yet), 2) adapt bootstrap's css for menu classes that Joomla associates with the menu or the third way – to insert piece of JS code that adds appropriate classes to navbar elements needed by BS3 documentation as was mentioned in this thread above.

I've chosen the third way and used similar code that was provided above. The slightly changes I made, for example, is instead of document.ready I used document.getElementsByTagName

The issue left is that Joomla still uses Bootstarp 2 classes in some cases and they just stop working in BS3 – for example the Blog layout seems to utilizes them in case of two columns. Another downside of the JS code above – if you have a page too loaded with content it may occur a short delay before menu gets properly formatted by JS and the website looks not much professional then. Anyway the idea of kind of layering, separating the backend and frontend looks promising to me.

luckyseven444 · Post by **luckyseven444** » Fri Jan 09, 2015 1:29 pm

@pikamoo

so far the best answer

nwl · Post by **nwl** » Mon Feb 09, 2015 5:32 pm

Hi all,

I'm strugling to make Bootstrap 3 full working in my custom template.

Good: I have the top menu bar working as well, all the grid is correct with the new markup, no js conflicts etc..

Bad: I found problems in login, registration and edit pages... (I have yet to check Tag component view...)
I've found an override for the user registration and it seems to work and the same logic could be applied to login, but the frontend edit page have dropdowns and modal broken !!!

Anyone with the same problems with frontend edit ? (com_content/form/edit.php)

QQtis · Post by **QQtis** » Tue Jun 07, 2016 1:35 pm

It was the best ever solution made by joomla community to use bootstrap in a core files, but it was the worst ever scenarios that the community could ever made, stick with bs2. The whole world evolved to use bs3, and joomla is still using dead bs2. That brings lots of new developer to go with more flexible tools. I my self love joomla, but keeping on it outdated framework makes it more and more unusable tool.

NickC4555 · Post by **NickC4555** » Tue Jun 07, 2016 1:43 pm

The YJSG framework from Youjoomla and all of their templates that run on top of it allow you to choose either Bootstrap 2 or 3 for your site. Unfortunately I'm still stuck on 2 because most of the third party extensions I use don't yet support 3, but it works fine with core Joomla.

cristina007 · Post by **cristina007** » Tue Jun 07, 2016 2:03 pm

This essential layout that we are making is being produced from the point of view of a designer. We can't promiss it will be a pretty layout, yet we will demonstrate to you generally accepted methods to construct a straightforward Joomla 3.0 format that works.

QQtis · Post by **QQtis** » Tue Jun 07, 2016 2:49 pm

To NickC4555: adding another framework it will give one more unwonted thing, extras css, extra js files or more PHP code. That will end up with larger website space.

I my self edited joomla core removed Mootools, bs2. Added latest version of bs, and jquery, It took me some time to make it work properly, but the size of website went down from 550kb to only 350kb. Load time from 700ms to 350ms. That's a huge difference I could say.

NickC4555 · Post by **NickC4555** » Tue Jun 07, 2016 4:48 pm

QQtis wrote:To NickC4555: adding another framework it will give one more unwonted thing, extras css, extra js files or more PHP code. That will end up with larger website space.

I my self edited joomla core removed Mootools, bs2. Added latest version of bs, and jquery, It took me some time to make it work properly, but the size of website went down from 550kb to only 350kb. Load time from 700ms to 350ms. That's a huge difference I could say.

I can't fault your logic, but you are obviously a skilled web developer with the time and experience to focus on these details. Most Joomla users wouldn't have a clue how to do the things you listed, so while I agree that they make a difference, most people need to focus on the user experience first. A pro template provides UX tools that allow someone with relatively little technical knowledge to create a really great website that achieves its business goals.

Even with an additional framework using caching (server and browser), gzip, optimized images and minified JavaScript/CSS load times can be massively reduced, all with minimal effort.

QQtis · Post by **QQtis** » Tue Jun 07, 2016 5:30 pm

I can't argue with that, but why did Joomla forget about skilled users? Why we have to do some round trips to get more flexible mobile friendly web template. It takes our time too. I could do it same with BS2 but again it will take time to write css/js code and eventually test it, fix. When its already done with bs 3

I know there is no tool for all, I do like joomla a lot. It wold be great to know about joomla plans in a future about bs 3 or 4. Is it worth to invest my time into this cms, bs 3 makes my work a lot faster. And bs4 with more flexible nav brake point that will be tool that i must have.

iamrobert · Post by **iamrobert** » Sat Jun 11, 2016 6:22 am

How did Joomla forget skilled users?

Upgrading Joomla Core to BS3/BS4 whilst nice - would require all component developers to also upgrade their code - which would be a monumental task. Even if BS wasn't part of the core...every component developer would use their own framework - which would lead to incompatibility - so I do understand why they use it.

There's a huge topic about here:
https://groups.google.com/forum/#!topic ... %5B1-25%5D

Many templates have BS3 versions.

With Joomla Template Development - you can break free of Bootstrap 2 and use your own framework.

Personally, I prefer zurb foundation over bootstrap - and so I simply overwrite Joomla output. Yes - it takes time - but at least by using bootstrap - you have Find & Replace as the output has some consistency.

Free Examples in the wild:
+ https://github.com/Bloggerschmidt/Blank ... ap-Edition - Bootstrap 3
+ https://github.com/gsuez/master-bootstrap-3 - Bootstrap 3
+ https://github.com/RemcoJanssen/foundation6-template - Zurb Foundation 6
+ https://github.com/nternetinspired/OneWeb
+ https://pure.robertwent.com/

The Joomla! Forum™

Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0

Re: Joomla 3.x and Bootstrap 3.0