Topic on Extension talk:Bootstrap

Why Vector skin change significantly when loading this extension?

Example screenshot

Off: https://i.imgur.com/GQYi5hz.png

On: https://i.imgur.com/M9Gr7wW.png

As you may notice everything is a lot more little after applying settings. Also margins and paddings are shorter between images and texts for example.

I'm not using any specific CSS code for format. What it's more strange it's why everything it's way more little

Code used:

$wgHooks['SetupAfterCache'][]=function(){

        \Bootstrap\BootstrapManager::getInstance()->addAllBootstrapModules();

        return true;

};

$wgHooks['ParserAfterParse'][]=function( Parser &$parser, &$text, StripState &$stripState ){

        $parser->getOutput()->addModuleStyles( 'ext.bootstrap.styles' );

        $parser->getOutput()->addModuleScripts( 'ext.bootstrap.scripts' );

        return true;

};

Bootstrap (the package, not the extension) contains some styles that are invoked even if no specific classes are used on the html elements, e.g. for normalization. If you want to find out about the styles on a specific element, use your browsers developer tools.

Thanks for the answer. I was supposing so. But I thought that the extension was prepared to manage Vector skin at least (without modifications).

So it's essentially common, that Vector skin by default with bootstrap extension changes the appearance that significantly?

I would like to see if someone can make a "fix" in the future, to maintain Vector appearance, despite of Bootstrap extension introduction.

I am afraid so. This extension really only pulls the Bootstrap package in. It was originally developed as a basis for other skins and extensions (for the Chameleon skin, in particular), hence the rather complicated instructions to activate it stand-alone. However, if you want to use it with Vector it should be fairly easy to pull in additional Less files to get a similar look. You'd have to make sure of course, that any changes you introduce are still compatible with Bootstrap. E.g. I suspect that Vector might use a different box-sizing and you'd have to weigh the pros and cons of using either border-box or content-box. And you'd probably have to update that Less file whenever Vector is updated.

Another approach might be to not pull in all Bootstrap modules, but only the ones you need and hoping that Vector does not get too much out of shape. But I have to admit that I never got around to do this myself and so the methods are there, but I am not sure that they work as expected.

Finally there is also Extension:BootStrap (notice the different spelling), that claims to be "Designed and tested using the Vector Skin only", but I never tried it and I don't know if it is still maintained.

In any case, whatever solution you come up with in the end, it'd be great if you keep me updated.

Yes, I also checked that extension, but there is a problem. Download links are broken.