Bootstrap4

bootstrap

Cheat sheet - Continue with https://getbootstrap.com/docs/4.0/layout/grid/

Boilerplate stuff:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
  crossorigin="anonymous"/>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
  integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
  integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
  crossorigin="anonymous"></script>

We use jQuery’s slim build, but the full version is also supported. If we are curious which components explicitly require jQuery, our JS, and Popper.js, visit https://getbootstrap.com/docs/4.0/getting-started/introduction/ and click on the "Show components requiring JavaScript" link (which is about 1/4 down from the top of the page).

What is box-sizing?

For more straightforward sizing in CSS, we switch the global box-sizing value 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. On the rare occasion you need to override it, use something like the following:

.selector-for-some-widget {
  box-sizing: content-box;
}

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget. Learn more about box model and sizing at https://css-tricks.com/box-sizing/

What is Reboot?

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

How can we disable data attributes?

Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality). Be sure to only use one set of data attributes on a single element (e.g., you cannot trigger a tooltip and modal from the same button.). However, in some situations it may be desirable to disable this functionality. To disable the data attribute API, unbind all events on the document namespaced with data-api like so:

$(document).off('.data-api');

Alternatively, to target a specific plugin, just include the plugin’s name as a namespace along with the data-api namespace like this:

$(document).off('.alert.data-api')

How can we use the Bootstrap JavaScript programmatic API?

All public APIs are single, chainable methods, and return the collection acted upon:

$('.btn.danger').button('toggle').addClass('fat')

All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

How can we access the raw constructor of each plugin?

Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Constructor.

How can we retrieve a particular plugin instance?

If you’d like to get a particular plugin instance, retrieve it directly from an element:

$('[rel="popover"]').data('popover')

How can we execute some code when a transition is finished?

All programmatic API methods are asynchronous and returns to the caller once the transition is started but before it ends. In order to execute an action once the transition is complete, you can listen to the corresponding event.

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

A method call on a transitioning component will be ignored.

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

How can we change the default settings for a plugin?

We can change the default settings for a plugin by modifying the plugin’s Constructor.Default object:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

How can we use Bootstrap with other UI framework without conflicts?

Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

How can we determine the version number for each plugin?

The version of each of Bootstrap’s jQuery plugins can be accessed via the VERSION property of the plugin’s constructor. For example, for the tooltip plugin:

$.fn.tooltip.Constructor.VERSION // => "4.0.0"

What is the purpose of utils.js part of Bootstrap?

All Bootstrap’s JavaScript files depend on util.js and it has to be included alongside the other JavaScript files. If you’re using the compiled (or minified) bootstrap.js, there is no need to include this—it’s already there. util.js includes utility functions and a basic helper for transitionEnd events as well as a CSS transition emulator. It’s used by the other plugins to check for CSS transition support and to catch hanging transitions.

Why does Bootstrap use Autoprefixer?

Bootstrap uses Autoprefixer (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3. We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository.

How can we contribute to Bootstrap?

See https://getbootstrap.com/docs/4.0/getting-started/build-tools/

How can we use Bootstrap with Webpack?

  1. Install Bootstrap as an npm module: npm install bootstrap. See https://getbootstrap.com/docs/4.0/getting-started/download/#npm
  2. Import Bootstrap’s JavaScript by adding this line to your app’s entry point (usually index.js or app.js): import 'bootstrap';

Alternatively, you may import plugins individually as needed:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...

Bootstrap is dependent on jQuery and Popper, these are defined as peerDependencies, this means that you will have to make sure to add both of them to your package.json using:

npm install --save jquery popper.js

Notice that if you chose to import plugins individually, you must also install exports-loader. See https://getbootstrap.com/docs/4.0/getting-started/webpack/

How can we import the precompiled Sass?

To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project’s bundling process. First, create your own _custom.scss and use it to override the built-in custom variables. Then, use your main sass file to import your custom variables, followed by Bootstrap:

@import "custom";
@import "~bootstrap/scss/bootstrap";

For Bootstrap to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer. With minimal setup, your webpack config should include this rule or similar:

  ...
  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
    }]
  },
  ...

How can we import pre-compiled CSS?

Alternatively, you may use Bootstrap’s ready-to-use css by simply adding this line to your project’s entry point:

import 'bootstrap/dist/css/bootstrap.min.css';

In this case you may use your existing rule for css without any special modifications to webpack config except you don’t need sass-loader just style-loader and css-loader.

  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  ...
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License