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 .table-
active, .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 .alert-
dismissible class, which adds extra padding
to the right of the alert and positions the
.close button.
 On the dismiss button, add the data-
dismiss="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 close.bs.alert This event fires immediately
events on descendant elements when the close instance
which have the data- method is called.
dismiss="alert" attribute. (Not
necessary when using the data-
api’s auto-initialization.)
closed.bs.alert This event is fired when the
alert has been closed (will
$().alert('close') Closes an alert by removing it wait for CSS transitions to
from the DOM. If complete).
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 Active and Disabled States

 active appearance with .active

 Add .btn-lg or .btn-sm for additional  Buttons will appear pressed (with a
sizes. darker background, darker border,
and inset shadow) when active.
 Create block level buttons—those that
span the full width of a parent—by  .disabled class to make it visually
adding .btn-block. 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 data-
target 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 .form-
inline.
 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" data-

toggle="popover" data-trigger="focus" title="Dismissible popover" data-
content="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 list-
group

 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 Type Default Description

offset number 10 Pixels to offset from top when calculating position of
scroll.

 Events

Event Type Description

activate.bs.scrollspy 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 .flex-
row-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 margin-
bottom: 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>