2. Support Changes
v4 is now only IE10+ and iOS 7+
Added official support for Android v5.0 Lollipop’s Browser and WebView.
3. 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.
4. 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
5. 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
10. 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.
11. 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.
12. 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.
13. 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.
14. 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.
15. 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.
16. 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.
17. Alerts JavaScript Behaviour
Method Description
$().alert() Makes an alert listen for click
events on descendant elements
which have the data-
dismiss="alert" attribute. (Not
necessary when using the data-
api’s auto-initialization.)
$().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.
Event Description
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).
20. 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.
21. 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
22. 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.
23. 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
24. 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
25. 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…
})
26. 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).
27. 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.
28. 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
29. 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')
})
30. 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)
31. 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)
32. 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.
33. 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.
34. 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:
35. 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.
36. 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'
})
})
37. 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'
})
38. 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.
39. 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.
41. Scrollspy - Using JavaScript
After adding position: relative; in your CSS, call the scrollspy via JavaScript:
Methods
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
$('body').scrollspy({ target: '#navbar-example' })
42. Options and Events
Options can be passed via data attributes or JavaScript.
Events
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
Name Type Default Description
offset number 10 Pixels to offset from top when calculating position of
scroll.
Event Type Description
activate.bs.scrollspy This event fires whenever a new item becomes
activated by the scrollspy.
43. Embeds - Aspect ratios
Aspect ratios can be customized with modifier classes.
44. 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.
45. 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
46. 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.
48. 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.
49. Float
Toggle floats on any element, across any breakpoint, using our responsive float
utilities.
50. 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>
Editor's Notes
Methods: $(".alert").alert('close')
Events: $('#myAlert').on('closed.bs.alert', function () { // do something… })