Bootstrap framework

Overview

Limitless web application kit is fully based on Bootstrap framework. It includes 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 5.1.0, the latest and the most stable at the moment.

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 plugins written in pure JS with no dependencies.

Bootstrap framwork has a very extensive documentation with examples and clear explanation of all utilities, styling options and components. You can read them all on its official website.

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

Link	Description
https://getbootstrap.com/	Official website
https://github.com/twbs/bootstrap	Github project
https://github.com/twbs/bootstrap/issues	Issue tracker
https://blog.getbootstrap.com/	Blog

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
Accordion	Build vertically collapsing accordions in combination with our Collapse JavaScript plugin
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.
Carousel	A slideshow component for cycling through elements—images or slides of text—like a carousel.
Close button	A generic close button for dismissing content like modals and alerts.
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.
Navbar	Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Navs and tabs	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.
Offcanvas	Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin
Pagination	Component for showing pagination to indicate a series of related content exists across multiple pages
Placeholders	Use loading placeholders for your components or pages to indicate something may still be loading
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.
Spinners	Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Toasts	Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Tooltips	Custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Tables	Opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

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 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:

											
												<!-- 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. You can add JS paths either in <head> or before <body> closing tag, it's up to you. Here is the list of Bootstrap components that require Javascript:

Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors
Navs with the Tab plugin for toggling content panes
Offcanvases for displaying, positioning, and scroll behavior
Scrollspy for scroll behavior and navigation updates
Toasts for displaying and dismissing
Tooltips and popovers for displaying and positioning (also requires Popper)

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

Our grid supports six responsive breakpoints. Breakpoints are based on min-width media queries, meaning they affect that breakpoint and all those above it (e.g., .col-sm-4 applies to sm, md, lg, xl, and xxl). This means you can control container and column sizing and behavior by each breakpoint.
Containers center and horizontally pad your content. Use .container for a responsive pixel width, .container-fluid for width: 100% across all viewports and devices, or a responsive container (e.g., .container-md) for a combination of fluid and pixel widths.
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 to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.
Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four). widths are set in percentages so you always have the same relative sizing.
Gutters are also responsive and customizable. Gutter classes are available across all breakpoints, with all the same sizes as our margin and padding spacing. Change horizontal gutters with .gx-* classes, vertical gutters with .gy-*, or all gutters with .g-* classes. .g-0 is also available to remove gutters.
Sass variables, maps, and mixins power the grid. If you don’t want to use the predefined grid classes in Bootstrap, you can use our grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.

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

Media queries

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Min-width

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.

											
												// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
												@include media-breakpoint-up(sm) { ... }
												@include media-breakpoint-up(md) { ... }
												@include media-breakpoint-up(lg) { ... }
												@include media-breakpoint-up(xl) { ... }
												@include media-breakpoint-up(xxl) { ... }

												// Usage

												// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
												.custom-class {
													display: none;
												}
												@include media-breakpoint-up(sm) {
													.custom-class {
														display: block;
													}
												}

These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:

											
												// X-Small devices (portrait phones, less than 576px)
												// No media query for `xs` since this is the default in Bootstrap

												// Small devices (landscape phones, 576px and up)
												@media (min-width: 576px) { ... }

												// Medium devices (tablets, 768px and up)
												@media (min-width: 768px) { ... }

												// Large devices (desktops, 992px and up)
												@media (min-width: 992px) { ... }

												// X-Large devices (large desktops, 1200px and up)
												@media (min-width: 1200px) { ... }

												// XX-Large devices (larger desktops, 1400px and up)
												@media (min-width: 1400px) { ... }

Max-width

We occasionally use media queries that go in the other direction (the given screen size or smaller):

											
												// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
												@include media-breakpoint-down(sm) { ... }
												@include media-breakpoint-down(md) { ... }
												@include media-breakpoint-down(lg) { ... }
												@include media-breakpoint-down(xl) { ... }
												@include media-breakpoint-down(xxl) { ... }

												// Example: Style from medium breakpoint and down
												@include media-breakpoint-down(md) {
													.custom-class {
														display: block;
													}
												}

These mixins take those declared breakpoints, subtract .02px from them, and use them as our max-width values. For example:

											
												// `xs` returns only a ruleset and no media query
												// ... { ... }

												// `sm` applies to x-small devices (portrait phones, less than 576px)
												@media (max-width: 575.98px) { ... }

												// `md` applies to small devices (landscape phones, less than 768px)
												@media (max-width: 767.98px) { ... }

												// `lg` applies to medium devices (tablets, less than 992px)
												@media (max-width: 991.98px) { ... }

												// `xl` applies to large devices (desktops, less than 1200px)
												@media (max-width: 1199.98px) { ... }

												// `xxl` applies to x-large devices (large desktops, less than 1400px)
												@media (max-width: 1399.98px) { ... }

Single breakpoint

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

											
												@include media-breakpoint-only(xs) { ... }
												@include media-breakpoint-only(sm) { ... }
												@include media-breakpoint-only(md) { ... }
												@include media-breakpoint-only(lg) { ... }
												@include media-breakpoint-only(xl) { ... }
												@include media-breakpoint-only(xxl) { ... }

For example the @include media-breakpoint-only(md) { ... } will result in:

											
												@media (min-width: 768px) and (max-width: 991.98px) { ... }

Between breakpoints

Similarly, media queries may span multiple breakpoint widths:

											
												@include media-breakpoint-between(md, xl) { ... }

Which results in:

											
												// Example
												// Apply styles starting from medium devices and up to extra large devices
												@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Grid options

Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:

Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

Limitless