Bootstrap V2.3.1

[Dallas Querry]

Ihave been working on a rails application a while ago and adapted Bootstrap v2.3.1 and built the application on the framework. Now today, I brought in the newest versions of bootstrap (v3.2.0) through bower and implemented some features using it.

Due to the bootstrap upgrade, some styles implemented with the previous version got messy. (mainly css issues),I fixed most of these issues by overriding the css to restore the original style, but Modal boxes (in particular) appear to be a pain to override.

I am assuming that you are utilising the WCM Core Component V2 Page to construct your base page. What you need to do is to overlay the customfooterlibs.html to include your client library, CSS or JS configuration. The customfooterlibs.com is designed in the Core Page component for us developers to overlay the script to include our own client library, CSS or JS configuration; these resources will be loaded right before the closing tag of . Similarly, there is a customheaderlibs.html script where you can overlay as well, so that your client library, CSS or JS configuration loads within the of the HTML element.

2. Vendor Client Library: Overlay customfooterlibs.html or customheaderlibs.html to include the client library that should be loaded into the page: (this method will ensure that your scripts and CSS will be loaded within your own AEM environment, using your own system resources); Create a new client library with a unique category name (e.g. bootstrap.v2.3.1) with all the vendor scripts and CSS, setup like this -Marketing-Cloud/aem-sample-we-retail/tree/master/ui.apps/src/main/content/j...

AEM provides various mechanisms to enable you to customize the page authoring functionality (and the consoles ) of your authoring instance. You can create a new client library that is only active via page editor. From there you can start adding new functionality the page editor.

Then put your editor.html specific CSS in your new clientlib and it should load when /editor.html is loaded. You can also use this approach if you want to load custom javascript on /editor.html. One advantage to this approach is that this CSS is separate from the rest of your CSS and page code so it isn't present on your published pages. Adobe describes this approach in more detail at:

Problem:

I would like to migrate a Client System from one Katello environment to another with the bootstrap.py script.

This works perfect when I migrate to the new Katello System, but when I try to migrate to a Smart Proxy in the new environment the script fails with the following error.

Our fix was to take a copy of the new bootstrap.py script, find the differences we had in our customised bootstrap-custom.py script (using kdiff).

Then add our customisation to the new copy, and save with our original customised script name so dependent scripts can use it.

In many of the examples shown in BootstrapVue's documentation, you may see the use of CSS classes such as ml-2, py-1, etc. These are Bootstrap v4.6 utility classes that help control padding, margins, positioning, and more. You can find information on these classes in the Utility Classes reference section.

Many of the examples in this documentation are live and can be edited in-place for an enhanced learning experience (note some examples may not work in IE 11 due to use of ES6 JavaScript code in the sections).

Bootstrap v4 CSS employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Refer to the following sub-sections for details.

Bootstrap is optimized for mobile devices first and then scales up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .

For more straightforward sizing in CSS, the global box-sizing value is switched from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

Most likely you are using module bundlers like Webpack, Parcel or rollup.js, which makes it easy to directly include the package into your project. To do this, use npm or yarn to get the latest version of Vue.js, Bootstrap v4 and BootstrapVue:

Note: If your project has multiple webpack config files (i.e. webpack.config.js, webpack.renderer.config.js, webpack.vendor.config.js, webpack.server.config.js, webpack.client.config.js, etc.), you will need to set the appropriate alias in all of them.

When using a module bundler you can optionally import only specific components groups (plugins), components and/or directives. Note that tree shaking only applies to the JavaScript code and not CSS/SCSS.

When importing as plugins, all subcomponents and related directives are imported in most cases. i.e. When importing , all the sub components are also included, as well all dropdown sub components. Component shorthand aliases (if any) are also included in the plugin. Refer to the component and directive documentation for details.

There are two additional helper plugins for providing the $bvModal and $bvToast injections (if you are not using the ModalPlugin or ToastPlugin plugins) which are available for import from 'bootstrap-vue':

You can override the use of the esm/ build by aliasing 'bootstrap-vue' to use the BootstrapVue source files, and whitelisting node_modules/bootstrap-vue/src/* for transpilation by your build process, in your module bundler config. This will allow you to transpile BootstrapVue for your target browsers/environments and potentially reduce bundle sizes (and will only include the babel helper utils once) at the expense of slightly longer build times.

BootstrapVue's custom SCSS relies on Bootstrap SCSS variables and mixins, and any variable overrides you may have set. You can include Bootstrap and BootstrapVue SCSS in your project's custom SCSS file:

If you wish to reduce your production bundle size because you only use a subset of the available BootstrapVue plugins, you can configure the list of BootstrapVue componentPlugins or directivePlugins you want to globally install in your Nuxt.js project. Note tree shaking only applies to the JavaScript code and not CSS/SCSS.

There are two additional helper plugins for providing the $bvModal and $bvToast injections (if you are not using the ModalPlugin or ToastPlugin plugins) that are available in the componentPlugins option:

Refer to the reference section at the bottom of each of the component and directive docs for details on the plugin names available (and which components and directives are included in each plugin) and component and/or directive import names.

If you want to import individual BootstrapVue components into specific pages and/or components of your Nuxt app, you may want to bypass the Nuxt.js module and, instead, follow the module bundlers and Tree shaking with module bundlers sections above. Alternatively you may want to to just import a few plugins (such as LayoutPlugin) in your Nuxt.js module config, and then import additional components or plugins in the pages where needed.

You can override this option using usePretranspiled option. Setting to true always uses the pre-transpiled versions, while setting it to false will always use src/. By default usePretranspiled is enabled in development mode only. You should not need to use this option as the default is most optimal for performance.

For additional configuration for Vue CLI 3 for using project relative paths for image src props on various BootstrapVue components, refer to the Vue CLI 3 section of the Image Src Resolving reference page.

Note the UMD (browser) variant does not include BootstrapVue icons support. All other variants listed above do include the BootstrapVueIcons (IconsPlugin) plugin (note the icons plugin is not automatically installed, and must explicitly installed via Vue.use(). See the Icons usage section for more details.

All of the build variants listed above have been pre-transpiled targeting the browsers supported by BootstrapVue. However, if you are targeting only modern browsers, you may want to import BootstrapVue from src/index.js, (by aliasing bootstrap-vue to bootstrap-vue/src/index.js) and whitelisting bootstrap-vue/src for transpilation via your own project. This can potentially reduce final project bundle sizes. See the Using BootstrapVue source code for smaller bundles section above for more details.

3a8082e126