#### Limitless - Bootstrap

##### Bootstrap overview

###### Overview

Limitless web application kit is fully based on Bootstrap framework. It includes almost all native Bootstrap components, grid system, original markup (except a few components where markup was slightly modified) and native classes. It is also based on original Bootstrap SCSS files. Current Bootstrap version is `4.1.1`, the latest and the most stable at the moment. Due to limited support of flexbox model in older browsers, if you need IE9/IE10 support use Bootstrap 3.3.7 version included in the package.

###### About Bootstrap framework

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. The framework makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

###### Bootstrap components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more. Limitless template includes (almost) all of them:

Component | Description
--- | ---
Alerts | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages
Badges | Small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units
Breadcrumbs | Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Buttons | Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Button dropdowns | Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper menu markup
Button groups | Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
Cards | A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
Collapse | Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Dropdowns | Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Forms | Form control styles, layout options, and custom components for creating a wide variety of forms.
Input groups | Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
List group | List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Modal | Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Navs | Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
Navbar | Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Pagination | Component for showing pagination to indicate a series of related content exists across multiple pages
Popover | Add Bootstrap popovers, like those found in iOS, to any element on your site. Popovers rely on the 3rd party library `Popper.js` for positioning. You must include `popper.min.js` before `bootstrap.js` or use `bootstrap.bundle.min.js` which contains Popper.js in order for popovers to work!
Progress bars | Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Scrollspy | Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
Tooltips | Custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Media object | Media object to construct highly repetitive components like blog comments, tweets, and the like.
Tables | Opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Responsive embed | Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

##### Getting started

###### HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

    <!-- Markup -->
    <!DOCTYPE html>
    <html lang="en">
      ...
    </html>

###### Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale 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 `<head>`.

    <!-- Meta tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

###### Basic usage

Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS. File ordering matters:

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <!-- Limitless overrides -->
    <link rel="stylesheet" href="assets/css/bootstrap_limitless.min.css">

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.. File ordering matters:

    <!-- jQuery library -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="../../../../global_assets/js/main/bootstrap.bundle.min.js"></script>

Now you are up and running. All template files MUST contain these 5 files in your page's `<head>` element. All other files are optional, except `app.js`, which contains template's JS base. Also keep correct load ordering: first - dependencies, then - components. You can place JS paths either in `<head>` or before `<body>` closing tag, it's up to you. I prefer 1st option.

##### Bootstrap documentation

Bootstrap documentation available online on Official Bootstrap website. Below you can find different links and sources related to the framework:

Link | Description
--- | ---
http://getbootstrap.com/ | Official website
https://github.com/twbs/bootstrap | Github project
https://github.com/twbs/bootstrap/issues | Issue tracker
http://blog.getbootstrap.com/ | Blog
https://bootstrap-slack.herokuapp.com/ | Slack room

##### Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

###### Introduction

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together. Here’s how it works

- Containers provide a means to center and horizontally pad your site’s contents. Use `.container` for a responsive pixel width or `.container-fluid` for `width: 100%` across all viewport and device sizes.
- Rows are wrappers for columns. Each column has horizontal `padding` (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
- In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
- Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of `.col-sm` will each automatically be 25% wide from the small breakpoint and up
- Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use `.col-4`.
- Column `width`s are set in percentages, so they’re always fluid and sized relative to their parent element.
- Columns have horizontal `padding` to create the gutters between individual columns, however, you can remove the `marginM` from rows and `padding` from columns with `.no-gutters` on the `.row`.
- To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
- Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., `.col-sm-4` applies to small, medium, large, and extra large devices, but not the first `xs` breakpoint).
- You can use predefined grid classes (like `.col-4`) or Sass mixins for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

###### Media queries

We use the following media queries in our SCSS files to create the key breakpoints in our grid system.

    // No media query for all breakpoints since this is the default in Bootstrap

    // Small devices (tablets, 576px)
    @include media-breakpoint-up(sm) { ... }
    @include media-breakpoint-down(sm) { ... }

    // Medium devices (desktops, 768px)
    @include media-breakpoint-up(md) { ... }
    @include media-breakpoint-down(md) { ... }

    // Large devices (large desktops, 992px)
    @include media-breakpoint-up(lg) { ... }
    @include media-breakpoint-down(lg) { ... }

    // Extra large devices (extra large desktops, 1200px)
    @include media-breakpoint-up(xl) { ... }
    @include media-breakpoint-down(xl) { ... }

We occasionally expand on these media queries to include a `max-width` to limit CSS to a narrower set of devices.

    // Media queries
    // Small devices (tablets, up to 576px)
    @include media-breakpoint-down(sm) { ... }

    // Medium devices (desktops, up to 768px)
    @include media-breakpoint-down(md) { ... }

    // Large devices (large desktops, up to 992px)
    @include media-breakpoint-down(lg) { ... }

    // Extra large devices (extra large desktops, up to 1200px)
    @include media-breakpoint-down(xl) { ... }

###### Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table:

| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px
--- | --- | --- | --- | --- | ---
Max container width | None (auto) | 540px | 720px | 960px | 1140px
Class prefix | `.col-` | `.col-sm-` | `.col-md-` | `.col-lg-` | `.col-xl-`
# of columns | 12
Gutter width | 40px (20px on each side of a column)
Nestable | Yes
Column ordering | Yes