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 LESS files. Current Bootstrap version is 3.3.7, the latest and the most stable at the moment. Once 4.0 version will be stable, I'll add a separate version based on version 4.0. It'll take some time, because all plugins will require modifications in order to support a new version. Currently Bootstrap is in pre-stable Alpha version.

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
Glyphicons Icon font. Includes over 250 glyphs in font format from the Glyphicon Halflings set
Dropdowns Toggleable, contextual menu for displaying lists of links
Button groups Group a series of buttons together on a single line with the button group
Button dropdowns Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup
Input groups Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>
Navs Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style
Navbar Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases
Breadcrumbs Indicate the current page's location within a navigational hierarchy
Pagination Provide pagination links for your site or app with the multi-page pagination component
Pager Simpler pagination component alternative
Labels Easily highlight new or unread items by adding a <span class="label"> to links, Bootstrap navs, and more
Badges Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more
Jumbotron Will be added in upcoming versions. A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site
Page header A simple shell for h1 - h6 to appropriately space out and segment sections of content on a page. It can utilize the heading's default small element, as well as most other components (with additional styles)
Thumbnails Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more
Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages
Progress bars Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars
Media object Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content
List group List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content
Panels While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component
Responsive embed Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device. Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes
Wells Use the well as a simple effect on an element to give it an inset effect
Bootstrap plugins

Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.:

Component Description
Transitions Transition.js is 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
Modals Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults
Dropdowns Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills
ScrollSpy The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well
Togglable tabs Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported
Tooltips Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage. Tooltips with zero-length titles are never displayed
Popovers Add small overlays of content, like those on the iPad, to any element for housing secondary information. Popovers whose both title and content are zero-length are never displayed
Alert messages Add dismiss functionality to all alert messages with this plugin. When using a .close button, it must be the first child of the .alert-dismissible and no text content may come before it in the markup
Buttons Do more with buttons. Control button states or create groups of buttons for more components like toolbars
Collapse Flexible plugin that utilizes a handful of classes for easy toggle behavior
Carousel Will be added in upcoming versions. A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported
Affix The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of the affix plugin
Getting started
HTML5 doctype

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

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

To get started, include 2 CSS files: native bootstrap styling and Limitless template overrides. 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/core.css">

Then include jQuery library and Bootstrap itself. File ordering matters:

<!-- jQuery library -->
<script src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="assets/js/core/libraries/bootstrap.min.js"></script>

Now you are up and running. All template files MUST contain these 4 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.

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
Media queries

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

// Extra small devices (phones, less than 768px)
// No media query since this is the default in Bootstrap

// Small devices (tablets, 769px and up)
@media (min-width: @screen-sm-min) { ... }

// Medium devices (desktops, 1025px and up)
@media (min-width: @screen-md-min) { ... }

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

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

// Media queries
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Grid options

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

Extra small devices Phones (<768px) Small devices Tablets (≥769px) Medium devices Desktops (≥1025px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 769px 1025px 1200px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 20px (10px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes
Important notice

Limitless template uses modified breakpoints. So it's important to recompile your core bootstrap.min.css file using Limitless LESS variables overrides. Keep that in mind when compile LESS: bootstrap.less - includes default core Bootstrap styling with variables overrides; core.less - overrides for Bootstrap components; components.less - components, plugins, extensions, custom pages and other stylings; colors.less - custom color system (optional). See LESS and CSS page for more details.

Bootstrap documentation

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