mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-15 06:08:57 +03:00
1642 lines
67 KiB
HTML
1642 lines
67 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<title>
|
||
|
||
Migrating to v4 · Bootstrap Material Design
|
||
|
||
</title>
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:site" content="@FezVrasta">
|
||
<meta name="twitter:creator" content="@FezVrasta">
|
||
|
||
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="Migrating to v4">
|
||
<meta name="twitter:description" content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
|
||
<meta name="twitter:image" content="https://fezvrasta.github.io/assets/brand/bootstrap-social-logo.png">
|
||
|
||
|
||
<!-- Facebook -->
|
||
|
||
<meta property="og:url" content="https://fezvrasta.github.io/docs/4.0/migration/">
|
||
<meta property="og:title" content="Migrating to v4">
|
||
<meta property="og:description" content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
|
||
<meta property="og:type" content="website">
|
||
|
||
<meta property="og:image" content="http://fezvrasta.github.io/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:secure_url" content="https://fezvrasta.github.io/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:type" content="image/png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
|
||
<!-- Meta -->
|
||
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
|
||
<meta name="author" content="Federico Zivolo and Bootstrap contributors">
|
||
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
|
||
<link href="/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel="stylesheet">
|
||
|
||
|
||
<!-- Documentation extras -->
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||
|
||
<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" href="/bootstrap-material-design/apple-touch-icon.png">
|
||
<link rel="icon" href="/bootstrap-material-design/favicon.ico">
|
||
|
||
<script>
|
||
(function (i, s, o, g, r, a, m) {
|
||
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
|
||
(i[r].q = i[r].q || []).push(arguments)
|
||
}, i[r].l = 1 * new Date(); a = s.createElement(o),
|
||
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
|
||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||
ga('create', 'UA-80431047-1', 'auto');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
|
||
</head>
|
||
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||
<div class="container">
|
||
<span class="skiplink-text">Skip to main content</span>
|
||
</div>
|
||
</a>
|
||
|
||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||
<a class="navbar-brand mr-0 mr-md-2" href="/bootstrap-material-design/" aria-label="Bootstrap">
|
||
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
|
||
|
||
</a>
|
||
|
||
<div class="navbar-nav-scroll">
|
||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/bootstrap-material-design/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="/bootstrap-material-design/docs/4.0/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
v4.0
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active" href="/bootstrap-material-design/docs/4.0/">Latest (4.x)</a>
|
||
<a class="dropdown-item" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html">v3.x</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://github.com/FezVrasta/bootstrap-material-design" target="_blank" rel="noopener" aria-label="GitHub">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://twitter.com/FezVrasta" target="_blank" rel="noopener" aria-label="Twitter">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/FezVrasta/bootstrap-material-design/releases">Download</a>
|
||
</header>
|
||
|
||
|
||
<div class="container-fluid">
|
||
<div class="row flex-xl-nowrap">
|
||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||
<form class="bd-search d-flex align-items-center">
|
||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
|
||
<button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
|
||
<svg class="" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
|
||
|
||
</button>
|
||
</form>
|
||
|
||
<nav class="collapse bd-links" id="bd-docs-nav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
|
||
Getting started
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
|
||
Introduction
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/download/">
|
||
Download
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/contents/">
|
||
Contents
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/browsers-devices/">
|
||
Browsers & devices
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/">
|
||
JavaScript
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
|
||
Options
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/build-tools/">
|
||
Build tools
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/webpack/">
|
||
Webpack
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/accessibility/">
|
||
Accessibility
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/layout/overview/">
|
||
Layout
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/overview/">
|
||
Overview
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/grid/">
|
||
Grid
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/media-object/">
|
||
Media object
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/utilities-for-layout/">
|
||
Utilities for layout
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/content/reboot/">
|
||
Content
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/reboot/">
|
||
Reboot
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/typography/">
|
||
Typography
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/code/">
|
||
Code
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/images/">
|
||
Images
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/tables/">
|
||
Tables
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/figures/">
|
||
Figures
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
|
||
Components
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
|
||
Alerts
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
|
||
Badge
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
|
||
Breadcrumb
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
|
||
Buttons
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
|
||
Button group
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/card/">
|
||
Card
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
|
||
Carousel
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
|
||
Collapse
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
|
||
Dropdowns
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
|
||
Forms
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
|
||
Input group
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
|
||
Jumbotron
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
|
||
List group
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
|
||
Modal
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
|
||
Navs
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
|
||
Navbar
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
|
||
Pagination
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
|
||
Popovers
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
|
||
Progress
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
|
||
Scrollspy
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
|
||
Tooltips
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
|
||
Material Design
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
|
||
Buttons
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/collapse-inline/">
|
||
Collapse inline
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/drawers/">
|
||
Drawers
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/extensions/">
|
||
Extensions
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/forms/">
|
||
Forms
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/labels/">
|
||
Labels
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/list-groups/">
|
||
List groups
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/menus/">
|
||
Menus
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/navs/">
|
||
Navs
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/selections/">
|
||
Selections
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/snackbars/">
|
||
Snackbars
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
|
||
Utilities
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/borders/">
|
||
Borders
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/clearfix/">
|
||
Clearfix
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/close-icon/">
|
||
Close icon
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/colors/">
|
||
Colors
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/display/">
|
||
Display
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/embed/">
|
||
Embed
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/flex/">
|
||
Flex
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/float/">
|
||
Float
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/image-replacement/">
|
||
Image replacement
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/position/">
|
||
Position
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/screenreaders/">
|
||
Screenreaders
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/sizing/">
|
||
Sizing
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">
|
||
Spacing
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/text/">
|
||
Text
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/vertical-align/">
|
||
Vertical align
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/visibility/">
|
||
Visibility
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
|
||
Extend
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
|
||
Icons
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/migration/">
|
||
Migration
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||
<ul class="section-nav">
|
||
<li class="toc-entry toc-h2"><a href="#summary">Summary</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#browser-support">Browser support</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#global-changes">Global changes</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#grid-system">Grid system</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#components">Components</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#by-component">By component</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#reboot">Reboot</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#typography">Typography</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#images">Images</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#tables">Tables</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#forms">Forms</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#buttons">Buttons</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#button-group">Button group</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#dropdowns">Dropdowns</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#grid-system-1">Grid system</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#list-groups">List groups</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#modal">Modal</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#navs">Navs</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#navbar">Navbar</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#pagination">Pagination</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#breadcrumbs">Breadcrumbs</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#labels-and-badges">Labels and badges</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#panels-thumbnails-and-wells">Panels, thumbnails, and wells</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#panels">Panels</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#carousel">Carousel</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#tables-1">Tables</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#utilities">Utilities</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#vendor-prefix-mixins">Vendor prefix mixins</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#documentation">Documentation</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#responsive-utilities">Responsive utilities</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||
<h1 class="bd-title" id="content">Migrating to v4</h1>
|
||
<p class="bd-lead">Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.</p>
|
||
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
|
||
|
||
<div class="bd-callout bd-callout-info">
|
||
<p><strong>Heads up!</strong> This will be in flux as work on the v4 alphas progresses. Until then consider it incomplete, and we’d love pull requests to help keep it up to date.</p>
|
||
</div>
|
||
|
||
<h2 id="summary">Summary</h2>
|
||
|
||
<p>Here are the big ticket items you’ll want to be aware of when moving from v3 to v4.</p>
|
||
|
||
<h3 id="browser-support">Browser support</h3>
|
||
|
||
<ul>
|
||
<li>Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.</li>
|
||
<li>Added official support for Android v5.0 Lollipop’s Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.</li>
|
||
</ul>
|
||
|
||
<h3 id="global-changes">Global changes</h3>
|
||
|
||
<ul>
|
||
<li><strong>Flexbox is enabled by default.</strong> In general this means a move away from floats and more across our components.</li>
|
||
<li>Switched from <a href="http://lesscss.org/">Less</a> to <a href="http://sass-lang.com/">Sass</a> for our source CSS files.</li>
|
||
<li>Switched from <code class="highlighter-rouge">px</code> to <code class="highlighter-rouge">rem</code> as our primary CSS unit, though pixels are still used for media queries and grid behavior as device viewports are not affected by type size.</li>
|
||
<li>Global font-size increased from <code class="highlighter-rouge">14px</code> to <code class="highlighter-rouge">16px</code>.</li>
|
||
<li>Revamped grid tiers to add a fifth option (addressing smaller devices at <code class="highlighter-rouge">576px</code> and below) and removed the <code class="highlighter-rouge">-xs</code> infix from those classes. Example: <code class="highlighter-rouge">.col-6.col-sm-4.col-md-3</code>.</li>
|
||
<li>Replaced the separate optional theme with configurable options via SCSS variables (e.g., <code class="highlighter-rouge">$enable-gradients: true</code>).</li>
|
||
<li>Build system overhauled to use a series of npm scripts instead of Grunt. See <code class="highlighter-rouge">package.json</code> for all scripts, or our project readme for local development needs.</li>
|
||
<li>Non-responsive usage of Bootstrap is no longer supported.</li>
|
||
<li>Dropped the online Customizer in favor of more extensive setup documentation and customized builds.</li>
|
||
<li>Added dozens of new <a href="/bootstrap-material-design/docs/4.0/utilities/">utility classes</a> for common CSS property-value pairs and margin/padding spacing shortcuts.</li>
|
||
</ul>
|
||
|
||
<h3 id="grid-system">Grid system</h3>
|
||
|
||
<ul>
|
||
<li><strong>Moved to flexbox.</strong>
|
||
<ul>
|
||
<li>Added support for flexbox in the grid mixins and predefined classes.</li>
|
||
<li>As part of flexbox, included support for vertical and horizontal alignment classes.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Updated grid class names and a new grid tier.</strong>
|
||
<ul>
|
||
<li>Added a new <code class="highlighter-rouge">sm</code> grid tier below <code class="highlighter-rouge">768px</code> for more granular control. We now have <code class="highlighter-rouge">xs</code>, <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>. This also means every tier has been bumped up one level (so <code class="highlighter-rouge">.col-md-6</code> in v3 is now <code class="highlighter-rouge">.col-lg-6</code> in v4).</li>
|
||
<li><code class="highlighter-rouge">xs</code> grid classes have been modified to not require the infix to more accurately represent that they start applying styles at <code class="highlighter-rouge">min-width: 0</code> and not a set pixel value. Instead of <code class="highlighter-rouge">.col-xs-6</code>, it’s now <code class="highlighter-rouge">.col-6</code>. All other grid tiers require the infix (e.g., <code class="highlighter-rouge">sm</code>).</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Updated grid sizes, mixins, and variables.</strong>
|
||
<ul>
|
||
<li>Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.</li>
|
||
<li>Updated grid mixins to utilize a <code class="highlighter-rouge">make-col-ready</code> prep mixin and a <code class="highlighter-rouge">make-col</code> to set the <code class="highlighter-rouge">flex</code> and <code class="highlighter-rouge">max-width</code> for individual column sizing.</li>
|
||
<li>Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by <code class="highlighter-rouge">12</code> at their max width.</li>
|
||
<li>Grid breakpoints and container widths are now handled via Sass maps (<code class="highlighter-rouge">$grid-breakpoints</code> and <code class="highlighter-rouge">$container-max-widths</code>) instead of a handful of separate variables. These replace the <code class="highlighter-rouge">@screen-*</code> variables entirely and allow you to fully customize the grid tiers.</li>
|
||
<li>Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have <code class="highlighter-rouge">@include media-breakpoint-up/down/only</code>. Now, instead of writing <code class="highlighter-rouge">@media (min-width: @screen-sm-min) { ... }</code>, you can write <code class="highlighter-rouge">@include media-breakpoint-up(sm) { ... }</code>.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<h3 id="components">Components</h3>
|
||
|
||
<ul>
|
||
<li><strong>Dropped panels, thumbnails, and wells</strong> for a new all-encompassing component, <a href="/bootstrap-material-design/docs/4.0/components/cards/">cards</a>.</li>
|
||
<li><strong>Dropped the Glyphicons icon font.</strong> If you need icons, some options are:
|
||
<ul>
|
||
<li>the upstream version of <a href="https://glyphicons.com/">Glyphicons</a></li>
|
||
<li><a href="https://octicons.github.com/">Octicons</a></li>
|
||
<li><a href="http://fontawesome.io/">Font Awesome</a></li>
|
||
<li>See the <a href="/bootstrap-material-design/docs/4.0/extend">Extend page</a> for a list of alternatives. Have additional suggestions? Please open an issue or PR.</li>
|
||
</ul>
|
||
</li>
|
||
<li>Dropped the Affix jQuery plugin.
|
||
<ul>
|
||
<li>We recommend using <code class="highlighter-rouge">position: sticky</code> instead. <a href="http://html5please.com/#sticky">See the HTML5 Please entry</a> for details and specific polyfill recommendations. One suggestion is to use an <code class="highlighter-rouge">@supports</code> rule for implementing it (e.g., <code class="highlighter-rouge">@supports (position: sticky) { ... }</code>)/</li>
|
||
<li>If you were using Affix to apply additional, non-<code class="highlighter-rouge">position</code> styles, the polyfills might not support your use case. One option for such uses is the third-party <a href="https://github.com/acch/scrollpos-styler">ScrollPos-Styler</a> library.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Dropped the pager component</strong> as it was essentially slightly customized buttons.</li>
|
||
<li><strong>Refactored nearly all components</strong> to use more un-nested class selectors instead of over-specific children selectors.</li>
|
||
</ul>
|
||
|
||
<h2 id="by-component">By component</h2>
|
||
|
||
<p>This list highlights key changes by component between v3.x.x and v4.0.0.</p>
|
||
|
||
<h3 id="reboot">Reboot</h3>
|
||
|
||
<p>New to Bootstrap 4 is the <a href="/bootstrap-material-design/docs/4.0/content/reboot/">Reboot</a>, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the <code class="highlighter-rouge">box-sizing: border-box</code> change, moving from <code class="highlighter-rouge">em</code> to <code class="highlighter-rouge">rem</code> units on many elements, link styles, and many form element resets.</p>
|
||
|
||
<h3 id="typography">Typography</h3>
|
||
|
||
<ul>
|
||
<li>Moved all <code class="highlighter-rouge">.text-</code> utilities to the <code class="highlighter-rouge">_utilities.scss</code> file.</li>
|
||
<li>Dropped <code class="highlighter-rouge">.page-header</code> as, aside from the border, all its styles can be applied via utilities.</li>
|
||
<li><code class="highlighter-rouge">.dl-horizontal</code> has been dropped. Instead, use <code class="highlighter-rouge">.row</code> on <code class="highlighter-rouge"><dl></code> and use grid column classes (or mixins) on its <code class="highlighter-rouge"><dt></code> and <code class="highlighter-rouge"><dd></code> children.</li>
|
||
<li>Custom <code class="highlighter-rouge"><blockquote></code> styling has moved to classes—<code class="highlighter-rouge">.blockquote</code> and the <code class="highlighter-rouge">.blockquote-reverse</code> modifier.</li>
|
||
<li><code class="highlighter-rouge">.list-inline</code> now requires that its children list items have the new <code class="highlighter-rouge">.list-inline-item</code> class applied to them.</li>
|
||
</ul>
|
||
|
||
<h3 id="images">Images</h3>
|
||
|
||
<ul>
|
||
<li>Renamed <code class="highlighter-rouge">.img-responsive</code> to <code class="highlighter-rouge">.img-fluid</code>.</li>
|
||
<li>Renamed <code class="highlighter-rouge">.img-rounded</code> to <code class="highlighter-rouge">.rounded</code></li>
|
||
<li>Renamed <code class="highlighter-rouge">.img-circle</code> to <code class="highlighter-rouge">.rounded-circle</code></li>
|
||
</ul>
|
||
|
||
<h3 id="tables">Tables</h3>
|
||
|
||
<ul>
|
||
<li>Nearly all instances of the <code class="highlighter-rouge">></code> selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.</li>
|
||
<li>Responsive tables no longer require a wrapping element. Instead, just put the <code class="highlighter-rouge">.table-responsive</code> right on the <code class="highlighter-rouge"><table></code>.</li>
|
||
<li>Renamed <code class="highlighter-rouge">.table-condensed</code> to <code class="highlighter-rouge">.table-sm</code> for consistency.</li>
|
||
<li>Added a new <code class="highlighter-rouge">.table-inverse</code> option.</li>
|
||
<li>Added table header modifiers: <code class="highlighter-rouge">.thead-default</code> and <code class="highlighter-rouge">.thead-inverse</code>.</li>
|
||
<li>Renamed contextual classes to have a <code class="highlighter-rouge">.table-</code>-prefix. Hence <code class="highlighter-rouge">.active</code>, <code class="highlighter-rouge">.success</code>, <code class="highlighter-rouge">.warning</code>, <code class="highlighter-rouge">.danger</code> and <code class="highlighter-rouge">.table-info</code> to <code class="highlighter-rouge">.table-active</code>, <code class="highlighter-rouge">.table-success</code>, <code class="highlighter-rouge">.table-warning</code>, <code class="highlighter-rouge">.table-danger</code> and <code class="highlighter-rouge">.table-info</code>.</li>
|
||
</ul>
|
||
|
||
<h3 id="forms">Forms</h3>
|
||
|
||
<ul>
|
||
<li>Moved element resets to the <code class="highlighter-rouge">_reboot.scss</code> file.</li>
|
||
<li>Renamed <code class="highlighter-rouge">.control-label</code> to <code class="highlighter-rouge">.form-control-label</code>.</li>
|
||
<li>Renamed <code class="highlighter-rouge">.input-lg</code> and <code class="highlighter-rouge">.input-sm</code> to <code class="highlighter-rouge">.form-control-lg</code> and <code class="highlighter-rouge">.form-control-sm</code>, respectively.</li>
|
||
<li>Dropped <code class="highlighter-rouge">.form-group-*</code> classes for simplicity’s sake. Use <code class="highlighter-rouge">.form-control-*</code> classes instead now.</li>
|
||
<li>Dropped <code class="highlighter-rouge">.help-block</code> and replaced it with <code class="highlighter-rouge">.form-text</code> for block-level help text. For inline help text and other flexible options, use utility classes like <code class="highlighter-rouge">.text-muted</code>.</li>
|
||
<li>Dropped <code class="highlighter-rouge">.radio-inline</code> and <code class="highlighter-rouge">.checkbox-inline</code>.</li>
|
||
<li>Horizontal forms overhauled:
|
||
<ul>
|
||
<li>Dropped the <code class="highlighter-rouge">.form-horizontal</code> class requirement.</li>
|
||
<li><code class="highlighter-rouge">.form-group</code> no longer applies styles from the <code class="highlighter-rouge">.row</code> via mixin, so <code class="highlighter-rouge">.row</code> is now required for horizontal grid layouts (e.g., <code class="highlighter-rouge"><div class="form-group row"></code>).</li>
|
||
<li>Added new <code class="highlighter-rouge">.form-control-label</code> class to vertically center labels with <code class="highlighter-rouge">.form-control</code>s.</li>
|
||
<li>Added new <code class="highlighter-rouge">.form-row</code> for compact form layouts with the grid classes (swap your <code class="highlighter-rouge">.row</code> for a <code class="highlighter-rouge">.form-row</code> and go).</li>
|
||
</ul>
|
||
</li>
|
||
<li>Added custom forms support (for checkboxes, radios, selects, and file inputs).</li>
|
||
<li>Added HTML5 form validation support via CSS’s <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> pseudo-classes.</li>
|
||
<li>Renamed <code class="highlighter-rouge">.has-error</code> to <code class="highlighter-rouge">.has-danger</code>.</li>
|
||
<li>Renamed <code class="highlighter-rouge">.form-control-static</code> to <code class="highlighter-rouge">.form-control-plaintext</code>.</li>
|
||
</ul>
|
||
|
||
<h3 id="buttons">Buttons</h3>
|
||
|
||
<ul>
|
||
<li>Renamed <code class="highlighter-rouge">.btn-default</code> to <code class="highlighter-rouge">.btn-secondary</code>.</li>
|
||
<li>Dropped the <code class="highlighter-rouge">.btn-xs</code> class entirely as <code class="highlighter-rouge">.btn-sm</code> is proportionally much smaller than v3’s.</li>
|
||
<li>The <a href="https://getbootstrap.com/javascript/#buttons-methods">stateful button</a> feature of the <code class="highlighter-rouge">button.js</code> jQuery plugin has been dropped. This includes the <code class="highlighter-rouge">$().button(string)</code> and <code class="highlighter-rouge">$().button('reset')</code> methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
|
||
<ul>
|
||
<li>Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.</li>
|
||
</ul>
|
||
</li>
|
||
<li>Change buttons’ <code class="highlighter-rouge">[disabled]</code> to <code class="highlighter-rouge">:disabled</code> as IE9+ supports <code class="highlighter-rouge">:disabled</code>. However <code class="highlighter-rouge">fieldset[disabled]</code> is still necessary because <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility">native disabled fieldsets are still buggy in IE11</a>.</li>
|
||
</ul>
|
||
|
||
<h3 id="button-group">Button group</h3>
|
||
|
||
<ul>
|
||
<li>Rewrote component with flexbox.</li>
|
||
<li>Removed <code class="highlighter-rouge">.btn-group-justified</code>.</li>
|
||
<li>Dropped the <code class="highlighter-rouge">.btn-group-xs</code> class entirely given removal of <code class="highlighter-rouge">.btn-xs</code>.</li>
|
||
<li>Removed explicit spacing between button groups in button toolbars; use margin utilities now.</li>
|
||
<li>Improved documentation for use with other components.</li>
|
||
</ul>
|
||
|
||
<h3 id="dropdowns">Dropdowns</h3>
|
||
|
||
<ul>
|
||
<li>Switched from parent selectors to singular classes for all components, modifiers, etc.</li>
|
||
<li>Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu.</li>
|
||
<li>Dropdowns can be built with <code class="highlighter-rouge"><div></code>s or <code class="highlighter-rouge"><ul></code>s now.</li>
|
||
<li>Rebuilt dropdown styles and markup to provide easy, built-in support for <code class="highlighter-rouge"><a></code> and <code class="highlighter-rouge"><button></code> based dropdown items.</li>
|
||
<li>Renamed <code class="highlighter-rouge">.divider</code> to <code class="highlighter-rouge">.dropdown-divider</code>.</li>
|
||
<li>Dropdown items now require <code class="highlighter-rouge">.dropdown-item</code>.</li>
|
||
<li>Dropdown toggles no longer require an explicit <code class="highlighter-rouge"><span class="caret"></span></code>; this is now provided automatically via CSS’s <code class="highlighter-rouge">::after</code> on <code class="highlighter-rouge">.dropdown-toggle</code>.</li>
|
||
</ul>
|
||
|
||
<h3 id="grid-system-1">Grid system</h3>
|
||
|
||
<ul>
|
||
<li>Added a new <code class="highlighter-rouge">576px</code> grid breakpoint as <code class="highlighter-rouge">sm</code>, meaning there are now five total tiers (<code class="highlighter-rouge">xs</code>, <code class="highlighter-rouge">sm</code>, <code class="highlighter-rouge">md</code>, <code class="highlighter-rouge">lg</code>, and <code class="highlighter-rouge">xl</code>).</li>
|
||
<li>Renamed the responsive grid modifier classes from <code class="highlighter-rouge">.col-{breakpoint}-{modifier}-{size}</code> to <code class="highlighter-rouge">.{modifier}-{breakpoint}-{size}</code> for simpler grid classes. For example, instead of <code class="highlighter-rouge">.col-md-3.col-md-push-9</code> it’s <code class="highlighter-rouge">.col-md-3.push-md-9</code>.</li>
|
||
<li>Added flexbox utility classes for grid system and components.</li>
|
||
</ul>
|
||
|
||
<h3 id="list-groups">List groups</h3>
|
||
|
||
<ul>
|
||
<li>Rewrote component with flexbox.</li>
|
||
<li>Replaced <code class="highlighter-rouge">a.list-group-item</code> with an explicit class, <code class="highlighter-rouge">.list-group-item-action</code>, for styling link and button versions of list group items.</li>
|
||
<li>Added <code class="highlighter-rouge">.list-group-flush</code> class for use with cards.</li>
|
||
</ul>
|
||
|
||
<h3 id="modal">Modal</h3>
|
||
|
||
<ul>
|
||
<li>Rewrote component with flexbox.</li>
|
||
<li>Given move to flexbox, alignment of dismiss icons in the header is likely broken as we’re no longer using floats. Floated content comes first, but with flexbox that’s no longer the case. Update your dismiss icons to come after modal titles to fix.</li>
|
||
<li>The <code class="highlighter-rouge">remote</code> option (which could be used to automatically load and inject external content into a modal) and the corresponding <code class="highlighter-rouge">loaded.bs.modal</code> event were removed. We recommend instead using client-side templating or a data binding framework, or calling <a href="https://api.jquery.com/load/">jQuery.load</a> yourself.</li>
|
||
</ul>
|
||
|
||
<h3 id="navs">Navs</h3>
|
||
|
||
<ul>
|
||
<li>Rewrote component with flexbox.</li>
|
||
<li>Dropped nearly all <code class="highlighter-rouge">></code> selectors for simpler styling via un-nested classes.</li>
|
||
<li>Instead of HTML-specific selectors like <code class="highlighter-rouge">.nav > li > a</code>, we use separate classes for <code class="highlighter-rouge">.nav</code>s, <code class="highlighter-rouge">.nav-item</code>s, and <code class="highlighter-rouge">.nav-link</code>s. This makes your HTML more flexible while bringing along increased extensibility.</li>
|
||
</ul>
|
||
|
||
<h3 id="navbar">Navbar</h3>
|
||
|
||
<p>The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.</p>
|
||
|
||
<ul>
|
||
<li>Responsive navbar behaviors are now applied to the <code class="highlighter-rouge">.navbar</code> class via the <strong>required</strong> <code class="highlighter-rouge">.navbar-expand-{breakpoint}</code> where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.</li>
|
||
<li><code class="highlighter-rouge">.navbar-default</code> is now <code class="highlighter-rouge">.navbar-light</code>, though <code class="highlighter-rouge">.navbar-dark</code> remains the same. <strong>One of these is required on each navbar.</strong> However, these classes no longer set <code class="highlighter-rouge">background-color</code>s; instead they essentially only affect <code class="highlighter-rouge">color</code>.</li>
|
||
<li>Navbars now require a background declaration of some kind. Choose from our background utilities (<code class="highlighter-rouge">.bg-*</code>) or set your own with the light/inverse classes above <a href="/bootstrap-material-design/docs/4.0/components/navbar/#color-schemes">for mad customization</a>.</li>
|
||
<li>Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.</li>
|
||
<li><code class="highlighter-rouge">.navbar-toggle</code> is now <code class="highlighter-rouge">.navbar-toggler</code> and has different styles and inner markup (no more three <code class="highlighter-rouge"><span></code>s).</li>
|
||
<li>Dropped the <code class="highlighter-rouge">.navbar-form</code> class entirely. It’s no longer necessary; instead, just use <code class="highlighter-rouge">.form-inline</code> and apply margin utilities as necessary.</li>
|
||
<li>Navbars no longer include <code class="highlighter-rouge">margin-bottom</code> or <code class="highlighter-rouge">border-radius</code> by default. Use utilities as necessary.</li>
|
||
<li>All examples featuring navbars have been updated to include new markup.</li>
|
||
</ul>
|
||
|
||
<h3 id="pagination">Pagination</h3>
|
||
|
||
<ul>
|
||
<li>Rewrote component with flexbox.</li>
|
||
<li>Explicit classes (<code class="highlighter-rouge">.page-item</code>, <code class="highlighter-rouge">.page-link</code>) are now required on the descendants of <code class="highlighter-rouge">.pagination</code>s</li>
|
||
<li>Dropped the <code class="highlighter-rouge">.pager</code> component entirely as it was little more than customized outline buttons.</li>
|
||
</ul>
|
||
|
||
<h3 id="breadcrumbs">Breadcrumbs</h3>
|
||
|
||
<ul>
|
||
<li>An explicit class, <code class="highlighter-rouge">.breadcrumb-item</code>, is now required on the descendants of <code class="highlighter-rouge">.breadcrumb</code>s</li>
|
||
</ul>
|
||
|
||
<h3 id="labels-and-badges">Labels and badges</h3>
|
||
|
||
<ul>
|
||
<li>Renamed <code class="highlighter-rouge">.label</code> to <code class="highlighter-rouge">.badge</code> to disambiguate from the <code class="highlighter-rouge"><label></code> element.</li>
|
||
<li>Dropped the <code class="highlighter-rouge">.badge</code> component as it was nearly identical to labels. Use the <code class="highlighter-rouge">.badge-pill</code> modifier together with the label component instead for that rounded look.</li>
|
||
<li>Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.</li>
|
||
</ul>
|
||
|
||
<h3 id="panels-thumbnails-and-wells">Panels, thumbnails, and wells</h3>
|
||
|
||
<p>Dropped entirely for the new card component.</p>
|
||
|
||
<h3 id="panels">Panels</h3>
|
||
|
||
<ul>
|
||
<li><code class="highlighter-rouge">.panel</code> to <code class="highlighter-rouge">.card</code>, now built with flexbox.</li>
|
||
<li><code class="highlighter-rouge">.panel-default</code> removed and no replacement.</li>
|
||
<li><code class="highlighter-rouge">.panel-group</code> removed and no replacement. <code class="highlighter-rouge">.card-group</code> is not a replacement, it is different.</li>
|
||
<li><code class="highlighter-rouge">.panel-heading</code> to <code class="highlighter-rouge">.card-header</code></li>
|
||
<li><code class="highlighter-rouge">.panel-title</code> to <code class="highlighter-rouge">.card-title</code>. Depending on the desired look, you may also want to use <a href="/bootstrap-material-design/docs/4.0/content/typography/#headings">heading elements or classes</a> (e.g. <code class="highlighter-rouge"><h3></code>, <code class="highlighter-rouge">.h3</code>) or bold elements or classes (e.g. <code class="highlighter-rouge"><strong></code>, <code class="highlighter-rouge"><b></code>, <a href="/bootstrap-material-design/docs/4.0/utilities/text/#font-weight-and-italics"><code class="highlighter-rouge">.font-weight-bold</code></a>). Note that <code class="highlighter-rouge">.card-title</code>, while similarly named, produces a different look than <code class="highlighter-rouge">.panel-title</code>.</li>
|
||
<li><code class="highlighter-rouge">.panel-body</code> to <code class="highlighter-rouge">.card-body</code></li>
|
||
<li><code class="highlighter-rouge">.panel-footer</code> to <code class="highlighter-rouge">.card-footer</code></li>
|
||
<li><code class="highlighter-rouge">.panel-primary</code>, <code class="highlighter-rouge">.panel-success</code>, <code class="highlighter-rouge">.panel-info</code>, <code class="highlighter-rouge">.panel-warning</code>, and <code class="highlighter-rouge">.panel-danger</code> have been dropped for <code class="highlighter-rouge">.bg-</code>, <code class="highlighter-rouge">.text-</code>, and <code class="highlighter-rouge">.border</code> utilities generated from our <code class="highlighter-rouge">$theme-colors</code> Sass map.</li>
|
||
</ul>
|
||
|
||
<h3 id="carousel">Carousel</h3>
|
||
|
||
<ul>
|
||
<li>Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.</li>
|
||
<li>All CSS has been un-nested and renamed, ensuring each class is prefixed with <code class="highlighter-rouge">.carousel-</code>.
|
||
<ul>
|
||
<li>For carousel items, <code class="highlighter-rouge">.next</code>, <code class="highlighter-rouge">.prev</code>, <code class="highlighter-rouge">.left</code>, and <code class="highlighter-rouge">.right</code> are now <code class="highlighter-rouge">.carousel-item-next</code>, <code class="highlighter-rouge">.carousel-item-prev</code>, <code class="highlighter-rouge">.carousel-item-left</code>, and <code class="highlighter-rouge">.carousel-item-right</code>.</li>
|
||
<li><code class="highlighter-rouge">.item</code> is also now <code class="highlighter-rouge">.carousel-item</code>.</li>
|
||
<li>For prev/next controls, <code class="highlighter-rouge">.carousel-control.right</code> and <code class="highlighter-rouge">.carousel-control.left</code> are now <code class="highlighter-rouge">.carousel-control-right</code> and <code class="highlighter-rouge">.carousel-control-left</code>, meaning they no longer require a specific base class.</li>
|
||
</ul>
|
||
</li>
|
||
<li>Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.</li>
|
||
<li>Removed image overrides for images in carousel items, deferring to utilities.</li>
|
||
<li>Tweaked the Carousel example to include the new markup and styles.</li>
|
||
</ul>
|
||
|
||
<h3 id="tables-1">Tables</h3>
|
||
|
||
<ul>
|
||
<li>Removed support for styled nested tables. All table styles are now inherited in v4 for simpler selectors.</li>
|
||
<li>Added inverse table variant.</li>
|
||
</ul>
|
||
|
||
<h3 id="utilities">Utilities</h3>
|
||
|
||
<ul>
|
||
<li><strong>Display, hidden, and more:</strong>
|
||
<ul>
|
||
<li>Made display utilities responsive (e.g., <code class="highlighter-rouge">.d-none</code> and <code class="highlighter-rouge">d-{sm,md,lg,xl}-none</code>).</li>
|
||
<li>Dropped the bulk of <code class="highlighter-rouge">.hidden-*</code> utilities for new [display utilities]((/bootstrap-material-design/docs/4.0/utilities/display/). For example, instead of <code class="highlighter-rouge">.hidden-sm-up</code>, use <code class="highlighter-rouge">.d-sm-none</code>. Renamed the <code class="highlighter-rouge">.hidden-print</code> utilities to use the display utility naming scheme. <a href="#responsive-utilities">More info under the Responsive utilities section of this page.</a></li>
|
||
<li>Added <code class="highlighter-rouge">.float-{sm,md,lg,xl}-{left,right,none}</code> classes for responsive floats and removed <code class="highlighter-rouge">.pull-left</code> and <code class="highlighter-rouge">.pull-right</code> since they’re redundant to <code class="highlighter-rouge">.float-left</code> and <code class="highlighter-rouge">.float-right</code>.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Type:</strong>
|
||
<ul>
|
||
<li>Added responsive variations to our text alignment classes <code class="highlighter-rouge">.text-{sm,md,lg,xl}-{left,center,right}</code>.</li>
|
||
</ul>
|
||
</li>
|
||
<li><strong>Alignment and spacing:</strong>
|
||
<ul>
|
||
<li>Added new <a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">responsive margin and padding utilities</a> for all sides, plus vertical and horizontal shorthands.</li>
|
||
<li>Added boatload of <a href="/bootstrap-material-design/docs/4.0/utilities/flex/">flexbox utilities</a>.</li>
|
||
<li>Dropped <code class="highlighter-rouge">.center-block</code> for the new <code class="highlighter-rouge">.mx-auto</code> class.</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<h3 id="vendor-prefix-mixins">Vendor prefix mixins</h3>
|
||
|
||
<p>Bootstrap 3’s <a href="http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm">vendor prefix</a> mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, they’re no longer necessary.</p>
|
||
|
||
<p>Removed the following mixins: <code class="highlighter-rouge">animation</code>, <code class="highlighter-rouge">animation-delay</code>, <code class="highlighter-rouge">animation-direction</code>, <code class="highlighter-rouge">animation-duration</code>, <code class="highlighter-rouge">animation-fill-mode</code>, <code class="highlighter-rouge">animation-iteration-count</code>, <code class="highlighter-rouge">animation-name</code>, <code class="highlighter-rouge">animation-timing-function</code>, <code class="highlighter-rouge">backface-visibility</code>, <code class="highlighter-rouge">box-sizing</code>, <code class="highlighter-rouge">content-columns</code>, <code class="highlighter-rouge">hyphens</code>, <code class="highlighter-rouge">opacity</code>, <code class="highlighter-rouge">perspective</code>, <code class="highlighter-rouge">perspective-origin</code>, <code class="highlighter-rouge">rotate</code>, <code class="highlighter-rouge">rotateX</code>, <code class="highlighter-rouge">rotateY</code>, <code class="highlighter-rouge">scale</code>, <code class="highlighter-rouge">scaleX</code>, <code class="highlighter-rouge">scaleY</code>, <code class="highlighter-rouge">skew</code>, <code class="highlighter-rouge">transform-origin</code>, <code class="highlighter-rouge">transition-delay</code>, <code class="highlighter-rouge">transition-duration</code>, <code class="highlighter-rouge">transition-property</code>, <code class="highlighter-rouge">transition-timing-function</code>, <code class="highlighter-rouge">transition-transform</code>, <code class="highlighter-rouge">translate</code>, <code class="highlighter-rouge">translate3d</code>, <code class="highlighter-rouge">user-select</code></p>
|
||
|
||
<h2 id="documentation">Documentation</h2>
|
||
|
||
<p>Our documentation received an upgrade across the board as well. Here’s the low down:</p>
|
||
|
||
<ul>
|
||
<li>We’re still using Jekyll, but we have plugins in the mix:
|
||
<ul>
|
||
<li><code class="highlighter-rouge">bugify.rb</code> is used to efficiently list out the entries on our <a href="/bootstrap-material-design/docs/4.0/browser-bugs/">browser bugs</a> page.</li>
|
||
<li><code class="highlighter-rouge">example.rb</code> is a custom fork of the default <code class="highlighter-rouge">highlight.rb</code> plugin, allowing for easier example-code handling.</li>
|
||
<li><code class="highlighter-rouge">callout.rb</code> is a similar custom fork of that, but designed for our special docs callouts.</li>
|
||
<li><code class="highlighter-rouge">markdown-block.rb</code> is used to to render Markdown snippets within HTML elements like tables.</li>
|
||
<li><a href="https://github.com/toshimaru/jekyll-toc">jekyll-toc</a> is used to generate our table of contents.</li>
|
||
</ul>
|
||
</li>
|
||
<li>All docs content has been rewritten in Markdown (instead of HTML) for easier editing.</li>
|
||
<li>Pages have been reorganized for simpler content and a more approachable hierarchy.</li>
|
||
<li>We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.</li>
|
||
</ul>
|
||
|
||
<h3 id="responsive-utilities">Responsive utilities</h3>
|
||
|
||
<p>All <code class="highlighter-rouge">@screen-</code> variables have been removed in v4.0.0. Use the <code class="highlighter-rouge">media-breakpoint-up()</code>, <code class="highlighter-rouge">media-breakpoint-down()</code>, or <code class="highlighter-rouge">media-breakpoint-only()</code> Sass mixins or the <code class="highlighter-rouge">$grid-breakpoints</code> Sass map instead.</p>
|
||
|
||
<p>Our responsive utility classes have largely been removed in favor of explicit <code class="highlighter-rouge">display</code> utilities.</p>
|
||
|
||
<ul>
|
||
<li>The <code class="highlighter-rouge">.hidden</code> and <code class="highlighter-rouge">.show</code> classes have been removed because they conflicted with jQuery’s <code class="highlighter-rouge">$(...).hide()</code> and <code class="highlighter-rouge">$(...).show()</code> methods. Instead, try toggling the <code class="highlighter-rouge">[hidden]</code> attribute or use inline styles like <code class="highlighter-rouge">style="display: none;"</code> and <code class="highlighter-rouge">style="display: block;"</code>.</li>
|
||
<li>All <code class="highlighter-rouge">.hidden-</code> classes have been removed, save for the print utilities which have been renamed.
|
||
<ul>
|
||
<li>Removed from v3: <code class="highlighter-rouge">.hidden-xs</code> <code class="highlighter-rouge">.hidden-sm</code> <code class="highlighter-rouge">.hidden-md</code> <code class="highlighter-rouge">.hidden-lg</code> <code class="highlighter-rouge">.visible-xs-block</code> <code class="highlighter-rouge">.visible-xs-inline</code> <code class="highlighter-rouge">.visible-xs-inline-block</code> <code class="highlighter-rouge">.visible-sm-block</code> <code class="highlighter-rouge">.visible-sm-inline</code> <code class="highlighter-rouge">.visible-sm-inline-block</code> <code class="highlighter-rouge">.visible-md-block</code> <code class="highlighter-rouge">.visible-md-inline</code> <code class="highlighter-rouge">.visible-md-inline-block</code> <code class="highlighter-rouge">.visible-lg-block</code> <code class="highlighter-rouge">.visible-lg-inline</code> <code class="highlighter-rouge">.visible-lg-inline-block</code></li>
|
||
<li>Removed from v4 alphas: <code class="highlighter-rouge">.hidden-xs-up</code> <code class="highlighter-rouge">.hidden-xs-down</code> <code class="highlighter-rouge">.hidden-sm-up</code> <code class="highlighter-rouge">.hidden-sm-down</code> <code class="highlighter-rouge">.hidden-md-up</code> <code class="highlighter-rouge">.hidden-md-down</code> <code class="highlighter-rouge">.hidden-lg-up</code> <code class="highlighter-rouge">.hidden-lg-down</code></li>
|
||
</ul>
|
||
</li>
|
||
<li>Print utilities no longer start with <code class="highlighter-rouge">.hidden-</code> or <code class="highlighter-rouge">.visible-</code>, but with <code class="highlighter-rouge">.d-print-</code>.
|
||
<ul>
|
||
<li>Old names: <code class="highlighter-rouge">.visible-print-block</code>, <code class="highlighter-rouge">.visible-print-inline</code>, <code class="highlighter-rouge">.visible-print-inline-block</code>, <code class="highlighter-rouge">.hidden-print</code></li>
|
||
<li>New classes: <code class="highlighter-rouge">.d-print-block</code>, <code class="highlighter-rouge">.d-print-inline</code>, <code class="highlighter-rouge">.d-print-inline-block</code>, <code class="highlighter-rouge">.d-print-none</code></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<p>Rather than using explicit <code class="highlighter-rouge">.visible-*</code> classes, you make an element visible by simply not hiding it at that screen size. You can combine one <code class="highlighter-rouge">.d-*-none</code> class with one <code class="highlighter-rouge">.d-*-block</code> class to show an element only on a given interval of screen sizes (e.g. <code class="highlighter-rouge">.d-none.d-md-block.d-xl-none</code> shows the element only on medium and large devices).</p>
|
||
|
||
<p>Note that the changes to the grid breakpoints in v4 means that you’ll need to go one breakpoint larger to achieve the same results. The new responsive utility classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.</p>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||
<script>window.jQuery || document.write('<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
||
|
||
<script src="/bootstrap-material-design/assets/js/vendor/popper.min.js"></script>
|
||
|
||
|
||
<script src="/bootstrap-material-design/dist/js/bootstrap-material-design.js"></script>
|
||
|
||
|
||
|
||
<script src="/bootstrap-material-design/assets/js/vendor/anchor.min.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/vendor/clipboard.min.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/vendor/holder.min.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/src/application.js"></script>
|
||
|
||
|
||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||
<script src="/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js"></script>
|
||
|
||
|
||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
||
<script type="text/javascript">
|
||
var docsearch = docsearch({
|
||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||
indexName: 'bootstrap-v4',
|
||
inputSelector: '#search-input',
|
||
handleSelected: function (input, event, suggestion) {
|
||
var url = suggestion.url;
|
||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||
// If it's a title we remove the anchor so it does not jump.
|
||
window.location.href = url;
|
||
},
|
||
transformData: function (hits) {
|
||
return hits.map(function (hit) {
|
||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||
return hit;
|
||
});
|
||
},
|
||
debug: false // Set debug to true if you want to inspect the dropdown
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
Holder.addTheme('gray', {
|
||
bg: '#777',
|
||
fg: 'rgba(255,255,255,.75)',
|
||
font: 'Helvetica',
|
||
fontweight: 'normal'
|
||
})
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|