Bootstrap 4 HEADS UP AUG 2017__ BOOTSTRAP 4 BETA IS OUT! Support Changes v4 is now only IE10+ and iOS 7+ Added official support for Android v5.0 Lollipop’s Browser and WebView. Grid Has Changed Looking back at Bootstrap 3, the 4 grid tiers (‘xs’, ’sm’, ‘md’ and ‘lg’ breakpoints) . The smallest breakpoint has a wide range of devices less than 768px in width. Bootstrap 4 Grid Introducing the new XL grid tier There are 5 tiers (or breakpoints) to support typical portrait and landscape screen widths. New grid breakpoint with the col-xl-* classes Breakpoints: The XL breakpoint is screen widths > 1200px The LG breakpoint is screen widths > 992px The MD breakpoint is screen widths > 768px The SM breakpoint is screen widths > 544px The XS breakpoint is screen widths < 544px Utilities Width w-25%, w-50%,w-75%, w-100% Height h-25%, h-50%,h-75%, h-100% Padding p Margin m Margin-top or padding-top t Margin-bottom or padding-bottom b Margin-left or padding-left l Margin-right or padding-right r for classes that set both *-left and *-right x for classes that set both *-top and *-bottom y for the classes that set on all four sides (margin and padding) blank Border – borders, colors and radius Colors Headings and paragraphs Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing. Display Headings** A larger, slightly more opinionated heading style. Blockquotes Wrap <blockquote class="blockquote"> around any HTML as the quote. Add a <footer class="blockquote-footer"> for identifying the source. Add .blockquote-reverse for a blockquote with right-aligned content. Lists .list-unstyled removes the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items. Inline: Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item. Images Renamed .img-respnsive to .img-fluid Renamed .img-rounded to .rounded Renamed img-circle to .rounded-circle .img-thumbnail to give an image a rounded 1px border appearance. Tables Responsive tables no longer require a wrapping element. Instead, just put the .table-responsive right on the <table>. Renamed .table-condensed to .table-sm for consistency. Added a new .table-inverse option. Added table header modifiers: .thead-default and .thead-inverse. Renamed contextual classes to have a .table--prefix. Hence .active, .success, .warning, .danger and .table-info to .tableactive, .table-success, .table-warning, .table-danger and .table-info. Figures included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive. Aligning the figure’s caption is easy with text utilities. Alerts For proper styling, use one of the four required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin. Link Color: Use the .alert-link utility class to quickly provide matching colored links within any alert. Alerts can also contain additional HTML elements like headings, paragraphs and dividers. Alert Dismissing Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Add a dismiss button and the .alertdismissible class, which adds extra padding to the right of the alert and positions the .close button. On the dismiss button, add the datadismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the .fade and .show classes. Alerts JavaScript Behaviour Method Description Event Description $().alert() Makes an alert listen for click events on descendant elements which have the datadismiss="alert" attribute. (Not necessary when using the dataapi’s auto-initialization.) close.bs.alert This event fires immediately when the close instance method is called. closed.bs.alert This event is fired when the alert has been closed (will wait for CSS transitions to complete). $().alert('close') Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed. Button tags Outline buttons Button Sizes and Actives States Button Sizes Add .btn-lg or .btn-sm for additional sizes. Create block level buttons—those that span the full width of a parent—by adding .btn-block. Active and Disabled States active appearance with .active Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. .disabled class to make it visually appear disabled. 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. Card titles are used by adding .card-title Card subtitles used by adding .card-subtitle .card-img-top places an image to the top of the card Mix and match multiple content types to create the card you need, or throw everything in there. an optional header and/or footer within a card an be added Cards Cards can include top and bottom “image caps”—images at the top or bottom of a card. Image overlays Turn an image into a card background and overlay your card’s text Cards include various options for customizing their backgrounds, borders, and color. Includes a few options for laying out series of cards. Collapse Toggle the visibility of content across your project with a few classes and our JavaScript plugins. Examples .collapse hides content .collapsing is applied during transitions .collapse.show shows content You can use a link with the href attribute, or a button with the datatarget attribute. In both cases, the data-toggle="collapse" is required. Multiple targets Multiple <button> or <a> can show and hide an element if they each reference it with their ‘href’ or ‘data-target’ attribute Collapse with JavaScript Methods .collapse(options) .collapse('toggle') - Returns to the caller before the collapsible element has actually been shown or hidden .collapse('show') - Returns to the caller before the collapsible element has actually been shown .collapse('hide') - Returns to the caller before the collapsible element has actually been hidden Collapse with JavaScript Events Event Type Description show.bs.collapse This event fires immediately when the show instance method is called. shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). hide.bs.collapse This event is fired immediately when the hide method has been called. hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). $('#myCollapsible').on('hidden.bs.collapse', function () { // do something… }) Forms Renamed .control-label to .form-control-label. Renamed .input-lg and .input-sm to .form-control-lg and .form-control-sm, respectively. Dropped .form-group-* classes for simplicity’s sake. Use .form-control-* classes instead now. Dropped .help-block and replaced it with .form-text for block-level help text. For inline help text and other flexible options, use utility classes like .text-muted. Horizontal forms overhauled: Dropped the .form-horizontal class requirement. .form-group no longer applies styles from the .row, so .row is now required for horizontal grid layouts (e.g., <div class="form-group row">). Added new .form-control-label class to vertically center labels with .form-controls. Added custom forms support (for checkboxes, radios, selects, and file inputs). Jumbotron Lightweight, flexible component for showcasing hero unit style content. To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within. Navs - Alignments Centered with .justify-content-center Right-aligned with .justify-content-end Vertical : By changing the flex item direction with the .flex-column Tabs : Uses .nav-tabs class to generate a tabbed interface. Pills : Use .nav-pills class to generate a pilled interface To proportionately fill all available space with your .nav-items, use .nav-fill For equal-width elements, use .nav-justified Toggble Navs and Pills Can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Via JavaScript $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) Activate individual tabs in several ways $('#myTab a[href="#profile"]').tab('show') // Select tab by name $('#myTab a:first').tab('show') // Select first tab $('#myTab a:last').tab('show') // Select last tab $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) Nav - Events When showing a new tab, the events fire in the following order: hide.bs.tab (on the current active tab) show.bs.tab (on the to-be-shown tab) hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event) shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event) Navbar .navbar-nav for a full-height and lightweight navigation We can avoid the list-based approach entirely by using classes for navs. .navbar-text for adding vertically centered strings of text. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link. Navbars Place various form controls and components within a navbar with .forminline. Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text. Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Navbar Responsive behaviour Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{sm|-md|-lg|-xl} classes to change when their content collapses behind a button. With a toggler on the left and brand name on the right: With a brand name shown on the left and toggler on the right: Popover Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js in order for popovers to work! Popovers require the tooltip plugin as a dependency. Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc). Triggering popovers on hidden elements will not work. Popovers for .disabled or disabled elements must be triggered on a wrapper element. Popover Everywhere initialize all popovers on a page would be to select them by their data-toggle attribute: $(function () { $('[data-toggle="popover"]').popover() }) Using the container option $(function () { $('.example-popover').popover({ container: 'body' }) }) Dismiss on next click Use the focus trigger to dismiss popovers on the next click that the user makes. <a tabindex="0" class="btn btn-lg btn-danger" role="button" datatoggle="popover" data-trigger="focus" title="Dismissible popover" datacontent="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> Or $('.popover-dismiss').popover({ trigger: 'focus' }) Scrollspy It must to be used on a Bootstrap nav component or list group. Scrollspy requires position: relative; on the element you’re spying on, usually the <body>. When spying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied. Anchors (<a>) are required and must point to an element with that id. Scrollspy - with nested nav and listgroup Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change. Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change. Nested Nav List-group Scrollspy - Using JavaScript After adding position: relative; in your CSS, call the scrollspy via JavaScript: $('body').scrollspy({ target: '#navbar-example' }) Methods $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }) Options and Events Options can be passed via data attributes or JavaScript. Name offset Type number Default 10 activate.bs.scrollspy Pixels to offset from top when calculating position of scroll. Events Event Type Description Description This event fires whenever a new item becomes activated by the scrollspy. $('#myScrollspy').on('activate.bs.scrollspy', function () { // do something… }) Embeds - Aspect ratios Aspect ratios can be customized with modifier classes. Flex Direction Use .flex-row to set a horizontal direction (the browser default), or .flexrow-reverse to start the horizontal direction from the opposite side. Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side. Justify content Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis - start (browser default), end, center, between, or around. Flex - Alignments Align items Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default). Align Self Use align-self utilities on flexbox items to individually change their alignment on the cross axis Flex - Auto margins With justify-content move all flex items to one side, but keep another on the opposite end by mixing justify-content with margin-right: auto or margin-left: auto. With align-items move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or marginbottom: auto. Flex - Wrap Flex - Align content Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. Float Toggle floats on any element, across any breakpoint, using our responsive float utilities. Text Text transform <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p> Font weight and italics <p class="font-weight-bold">Bold text.</p> <p class="font-weight-normal">Normal weight text.</p> <p class="font-italic">Italic text.</p>