mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-24 16:52:19 +01:00
971 lines
69 KiB
HTML
971 lines
69 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.">
|
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
|
<meta name="generator" content="Hugo 0.79.0">
|
|
|
|
<meta name="docsearch:language" content="en">
|
|
<meta name="docsearch:version" content="5.0">
|
|
|
|
<title>Migrating to v5 · Bootstrap v5.0</title>
|
|
|
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/migration/">
|
|
|
|
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
|
|
|
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
|
|
|
<!-- Favicons -->
|
|
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
|
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
|
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
|
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
|
<meta name="theme-color" content="#7952b3">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:site" content="@getbootstrap">
|
|
<meta name="twitter:creator" content="@getbootstrap">
|
|
<meta name="twitter:title" content="Migrating to v5">
|
|
<meta name="twitter:description" content="Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.">
|
|
<meta name="twitter:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
|
|
|
<!-- Facebook -->
|
|
<meta property="og:url" content="https://getbootstrap.com/docs/5.0/migration/">
|
|
<meta property="og:title" content="Migrating to v5">
|
|
<meta property="og:description" content="Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:image" content="https://getbootstrap.com/docs/5.0/assets/brand/bootstrap-social.png">
|
|
<meta property="og:image:type" content="image/png">
|
|
<meta property="og:image:width" content="1000">
|
|
<meta property="og:image:height" content="500">
|
|
|
|
<script>
|
|
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
|
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
|
ga('set', 'anonymizeIp', true);
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div class="skippy overflow-hidden">
|
|
<div class="container-xl">
|
|
<a class="visually-hidden-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
|
<a class="visually-hidden-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<header class="navbar navbar-expand-md navbar-dark bd-navbar">
|
|
<nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
|
|
<a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
|
<svg class="bi" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="bdNavbar">
|
|
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2 active" aria-current="true" href="/docs/5.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="/docs/5.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<hr class="d-md-none text-white-50">
|
|
|
|
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://github.com/twbs" target="_blank" rel="noopener">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 499.36" role="img"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" 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"/></svg>
|
|
<small class="d-md-none ms-2">GitHub</small>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" 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"/></svg>
|
|
<small class="d-md-none ms-2">Twitter</small>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 512" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" 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"/></svg>
|
|
<small class="d-md-none ms-2">Slack</small>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item col-6 col-md-auto">
|
|
<a class="nav-link p-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
|
|
<small class="d-md-none ms-2">Open Collective</small>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/5.0/getting-started/download/">Download</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
|
|
|
|
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
|
<div class="container-xxl d-flex align-items-md-center">
|
|
<form class="bd-search position-relative me-auto">
|
|
<input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="5.0">
|
|
</form>
|
|
|
|
<div class="dropdown ms-3">
|
|
<button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
|
<span class="d-none d-lg-inline">Bootstrap</span> v5.0
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
|
<li><a class="dropdown-item current" aria-current="true" href="/docs/5.0/">Latest (5.0.x)</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.x</a></li>
|
|
<li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
|
|
<li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-expand" viewBox="0 0 16 16">
|
|
<title>Expand</title>
|
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
|
|
</svg>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-collapse" viewBox="0 0 16 16">
|
|
<title>Collapse</title>
|
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
|
|
</svg>
|
|
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<div class="container-xxl my-md-4 bd-layout">
|
|
<aside class="bd-sidebar">
|
|
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Docs navigation"><ul class="list-unstyled mb-0 py-3 pt-md-1">
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#getting-started-collapse" aria-expanded="false">
|
|
Getting started
|
|
</button>
|
|
<div class="collapse" id="getting-started-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/getting-started/introduction/" class="d-inline-flex align-items-center rounded">Introduction</a></li>
|
|
<li><a href="/docs/5.0/getting-started/download/" class="d-inline-flex align-items-center rounded">Download</a></li>
|
|
<li><a href="/docs/5.0/getting-started/contents/" class="d-inline-flex align-items-center rounded">Contents</a></li>
|
|
<li><a href="/docs/5.0/getting-started/browsers-devices/" class="d-inline-flex align-items-center rounded">Browsers & devices</a></li>
|
|
<li><a href="/docs/5.0/getting-started/javascript/" class="d-inline-flex align-items-center rounded">JavaScript</a></li>
|
|
<li><a href="/docs/5.0/getting-started/build-tools/" class="d-inline-flex align-items-center rounded">Build tools</a></li>
|
|
<li><a href="/docs/5.0/getting-started/webpack/" class="d-inline-flex align-items-center rounded">Webpack</a></li>
|
|
<li><a href="/docs/5.0/getting-started/accessibility/" class="d-inline-flex align-items-center rounded">Accessibility</a></li>
|
|
<li><a href="/docs/5.0/getting-started/rfs/" class="d-inline-flex align-items-center rounded">RFS</a></li>
|
|
<li><a href="/docs/5.0/getting-started/rtl/" class="d-inline-flex align-items-center rounded">RTL</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#customize-collapse" aria-expanded="false">
|
|
Customize
|
|
</button>
|
|
<div class="collapse" id="customize-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/customize/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
|
<li><a href="/docs/5.0/customize/sass/" class="d-inline-flex align-items-center rounded">Sass</a></li>
|
|
<li><a href="/docs/5.0/customize/options/" class="d-inline-flex align-items-center rounded">Options</a></li>
|
|
<li><a href="/docs/5.0/customize/color/" class="d-inline-flex align-items-center rounded">Color</a></li>
|
|
<li><a href="/docs/5.0/customize/components/" class="d-inline-flex align-items-center rounded">Components</a></li>
|
|
<li><a href="/docs/5.0/customize/css-variables/" class="d-inline-flex align-items-center rounded">CSS variables</a></li>
|
|
<li><a href="/docs/5.0/customize/optimize/" class="d-inline-flex align-items-center rounded">Optimize</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#layout-collapse" aria-expanded="false">
|
|
Layout
|
|
</button>
|
|
<div class="collapse" id="layout-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/layout/breakpoints/" class="d-inline-flex align-items-center rounded">Breakpoints</a></li>
|
|
<li><a href="/docs/5.0/layout/containers/" class="d-inline-flex align-items-center rounded">Containers</a></li>
|
|
<li><a href="/docs/5.0/layout/grid/" class="d-inline-flex align-items-center rounded">Grid</a></li>
|
|
<li><a href="/docs/5.0/layout/columns/" class="d-inline-flex align-items-center rounded">Columns</a></li>
|
|
<li><a href="/docs/5.0/layout/gutters/" class="d-inline-flex align-items-center rounded">Gutters</a></li>
|
|
<li><a href="/docs/5.0/layout/utilities/" class="d-inline-flex align-items-center rounded">Utilities</a></li>
|
|
<li><a href="/docs/5.0/layout/z-index/" class="d-inline-flex align-items-center rounded">Z-index</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#content-collapse" aria-expanded="false">
|
|
Content
|
|
</button>
|
|
<div class="collapse" id="content-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/content/reboot/" class="d-inline-flex align-items-center rounded">Reboot</a></li>
|
|
<li><a href="/docs/5.0/content/typography/" class="d-inline-flex align-items-center rounded">Typography</a></li>
|
|
<li><a href="/docs/5.0/content/images/" class="d-inline-flex align-items-center rounded">Images</a></li>
|
|
<li><a href="/docs/5.0/content/tables/" class="d-inline-flex align-items-center rounded">Tables</a></li>
|
|
<li><a href="/docs/5.0/content/figures/" class="d-inline-flex align-items-center rounded">Figures</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#forms-collapse" aria-expanded="false">
|
|
Forms
|
|
</button>
|
|
<div class="collapse" id="forms-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/forms/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
|
<li><a href="/docs/5.0/forms/form-control/" class="d-inline-flex align-items-center rounded">Form control</a></li>
|
|
<li><a href="/docs/5.0/forms/select/" class="d-inline-flex align-items-center rounded">Select</a></li>
|
|
<li><a href="/docs/5.0/forms/checks-radios/" class="d-inline-flex align-items-center rounded">Checks & radios</a></li>
|
|
<li><a href="/docs/5.0/forms/range/" class="d-inline-flex align-items-center rounded">Range</a></li>
|
|
<li><a href="/docs/5.0/forms/input-group/" class="d-inline-flex align-items-center rounded">Input group</a></li>
|
|
<li><a href="/docs/5.0/forms/floating-labels/" class="d-inline-flex align-items-center rounded">Floating labels</a></li>
|
|
<li><a href="/docs/5.0/forms/layout/" class="d-inline-flex align-items-center rounded">Layout</a></li>
|
|
<li><a href="/docs/5.0/forms/validation/" class="d-inline-flex align-items-center rounded">Validation</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#components-collapse" aria-expanded="false">
|
|
Components
|
|
</button>
|
|
<div class="collapse" id="components-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/components/accordion/" class="d-inline-flex align-items-center rounded">Accordion</a></li>
|
|
<li><a href="/docs/5.0/components/alerts/" class="d-inline-flex align-items-center rounded">Alerts</a></li>
|
|
<li><a href="/docs/5.0/components/badge/" class="d-inline-flex align-items-center rounded">Badge</a></li>
|
|
<li><a href="/docs/5.0/components/breadcrumb/" class="d-inline-flex align-items-center rounded">Breadcrumb</a></li>
|
|
<li><a href="/docs/5.0/components/buttons/" class="d-inline-flex align-items-center rounded">Buttons</a></li>
|
|
<li><a href="/docs/5.0/components/button-group/" class="d-inline-flex align-items-center rounded">Button group</a></li>
|
|
<li><a href="/docs/5.0/components/card/" class="d-inline-flex align-items-center rounded">Card</a></li>
|
|
<li><a href="/docs/5.0/components/carousel/" class="d-inline-flex align-items-center rounded">Carousel</a></li>
|
|
<li><a href="/docs/5.0/components/close-button/" class="d-inline-flex align-items-center rounded">Close button</a></li>
|
|
<li><a href="/docs/5.0/components/collapse/" class="d-inline-flex align-items-center rounded">Collapse</a></li>
|
|
<li><a href="/docs/5.0/components/dropdowns/" class="d-inline-flex align-items-center rounded">Dropdowns</a></li>
|
|
<li><a href="/docs/5.0/components/list-group/" class="d-inline-flex align-items-center rounded">List group</a></li>
|
|
<li><a href="/docs/5.0/components/modal/" class="d-inline-flex align-items-center rounded">Modal</a></li>
|
|
<li><a href="/docs/5.0/components/navs-tabs/" class="d-inline-flex align-items-center rounded">Navs & tabs</a></li>
|
|
<li><a href="/docs/5.0/components/navbar/" class="d-inline-flex align-items-center rounded">Navbar</a></li>
|
|
<li><a href="/docs/5.0/components/pagination/" class="d-inline-flex align-items-center rounded">Pagination</a></li>
|
|
<li><a href="/docs/5.0/components/popovers/" class="d-inline-flex align-items-center rounded">Popovers</a></li>
|
|
<li><a href="/docs/5.0/components/progress/" class="d-inline-flex align-items-center rounded">Progress</a></li>
|
|
<li><a href="/docs/5.0/components/scrollspy/" class="d-inline-flex align-items-center rounded">Scrollspy</a></li>
|
|
<li><a href="/docs/5.0/components/spinners/" class="d-inline-flex align-items-center rounded">Spinners</a></li>
|
|
<li><a href="/docs/5.0/components/toasts/" class="d-inline-flex align-items-center rounded">Toasts</a></li>
|
|
<li><a href="/docs/5.0/components/tooltips/" class="d-inline-flex align-items-center rounded">Tooltips</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#helpers-collapse" aria-expanded="false">
|
|
Helpers
|
|
</button>
|
|
<div class="collapse" id="helpers-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/helpers/clearfix/" class="d-inline-flex align-items-center rounded">Clearfix</a></li>
|
|
<li><a href="/docs/5.0/helpers/colored-links/" class="d-inline-flex align-items-center rounded">Colored links</a></li>
|
|
<li><a href="/docs/5.0/helpers/ratio/" class="d-inline-flex align-items-center rounded">Ratio</a></li>
|
|
<li><a href="/docs/5.0/helpers/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
|
<li><a href="/docs/5.0/helpers/visually-hidden/" class="d-inline-flex align-items-center rounded">Visually hidden</a></li>
|
|
<li><a href="/docs/5.0/helpers/stretched-link/" class="d-inline-flex align-items-center rounded">Stretched link</a></li>
|
|
<li><a href="/docs/5.0/helpers/text-truncation/" class="d-inline-flex align-items-center rounded">Text truncation</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#utilities-collapse" aria-expanded="false">
|
|
Utilities
|
|
</button>
|
|
<div class="collapse" id="utilities-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/utilities/api/" class="d-inline-flex align-items-center rounded">API</a></li>
|
|
<li><a href="/docs/5.0/utilities/borders/" class="d-inline-flex align-items-center rounded">Borders</a></li>
|
|
<li><a href="/docs/5.0/utilities/colors/" class="d-inline-flex align-items-center rounded">Colors</a></li>
|
|
<li><a href="/docs/5.0/utilities/display/" class="d-inline-flex align-items-center rounded">Display</a></li>
|
|
<li><a href="/docs/5.0/utilities/flex/" class="d-inline-flex align-items-center rounded">Flex</a></li>
|
|
<li><a href="/docs/5.0/utilities/float/" class="d-inline-flex align-items-center rounded">Float</a></li>
|
|
<li><a href="/docs/5.0/utilities/interactions/" class="d-inline-flex align-items-center rounded">Interactions</a></li>
|
|
<li><a href="/docs/5.0/utilities/overflow/" class="d-inline-flex align-items-center rounded">Overflow</a></li>
|
|
<li><a href="/docs/5.0/utilities/position/" class="d-inline-flex align-items-center rounded">Position</a></li>
|
|
<li><a href="/docs/5.0/utilities/shadows/" class="d-inline-flex align-items-center rounded">Shadows</a></li>
|
|
<li><a href="/docs/5.0/utilities/sizing/" class="d-inline-flex align-items-center rounded">Sizing</a></li>
|
|
<li><a href="/docs/5.0/utilities/spacing/" class="d-inline-flex align-items-center rounded">Spacing</a></li>
|
|
<li><a href="/docs/5.0/utilities/text/" class="d-inline-flex align-items-center rounded">Text</a></li>
|
|
<li><a href="/docs/5.0/utilities/vertical-align/" class="d-inline-flex align-items-center rounded">Vertical align</a></li>
|
|
<li><a href="/docs/5.0/utilities/visibility/" class="d-inline-flex align-items-center rounded">Visibility</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#extend-collapse" aria-expanded="false">
|
|
Extend
|
|
</button>
|
|
<div class="collapse" id="extend-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/extend/approach/" class="d-inline-flex align-items-center rounded">Approach</a></li>
|
|
<li><a href="/docs/5.0/extend/icons/" class="d-inline-flex align-items-center rounded">Icons</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="mb-1">
|
|
<button class="btn d-inline-flex align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#about-collapse" aria-expanded="false">
|
|
About
|
|
</button>
|
|
<div class="collapse" id="about-collapse">
|
|
<ul class="list-unstyled fw-normal pb-1 small">
|
|
<li><a href="/docs/5.0/about/overview/" class="d-inline-flex align-items-center rounded">Overview</a></li>
|
|
<li><a href="/docs/5.0/about/team/" class="d-inline-flex align-items-center rounded">Team</a></li>
|
|
<li><a href="/docs/5.0/about/brand/" class="d-inline-flex align-items-center rounded">Brand</a></li>
|
|
<li><a href="/docs/5.0/about/license/" class="d-inline-flex align-items-center rounded">License</a></li>
|
|
<li><a href="/docs/5.0/about/translations/" class="d-inline-flex align-items-center rounded">Translations</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="my-3 mx-4 border-top"></li>
|
|
<li class="active">
|
|
<a href="/docs/5.0/migration/" class="d-inline-flex align-items-center rounded">
|
|
Migration
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
</aside>
|
|
|
|
<main class="bd-main order-1">
|
|
<div class="bd-intro ps-lg-4">
|
|
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
|
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/migration.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
|
<h1 class="bd-title" id="content">Migrating to v5</h1>
|
|
</div>
|
|
<p class="bd-lead">Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.</p>
|
|
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
|
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
|
<nav id="TableOfContents">
|
|
<ul>
|
|
<li><a href="#v500-beta1">v5.0.0-beta1</a>
|
|
<ul>
|
|
<li><a href="#rtl">RTL</a>
|
|
<ul>
|
|
<li><a href="#sass">Sass</a>
|
|
<ul>
|
|
<li><a href="#components">Components</a></li>
|
|
<li><a href="#utilities">Utilities</a></li>
|
|
<li><a href="#mixins">Mixins</a></li>
|
|
<li><a href="#variables">Variables</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#javascript">JavaScript</a></li>
|
|
<li><a href="#sass-1">Sass</a></li>
|
|
<li><a href="#utilities-1">Utilities</a></li>
|
|
<li><a href="#components-1">Components</a>
|
|
<ul>
|
|
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
|
|
<li><a href="#toasts">Toasts</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#v500-alpha3">v5.0.0-alpha3</a>
|
|
<ul>
|
|
<li><a href="#browser-support">Browser support</a></li>
|
|
<li><a href="#sass-2">Sass</a></li>
|
|
<li><a href="#reboot">Reboot</a></li>
|
|
<li><a href="#buttons">Buttons</a></li>
|
|
<li><a href="#forms">Forms</a></li>
|
|
<li><a href="#utilities-2">Utilities</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#v500-alpha2">v5.0.0-alpha2</a>
|
|
<ul>
|
|
<li><a href="#sass-3">Sass</a></li>
|
|
<li><a href="#docs">Docs</a></li>
|
|
<li><a href="#layout">Layout</a></li>
|
|
<li><a href="#reboot-1">Reboot</a></li>
|
|
<li><a href="#colors">Colors</a></li>
|
|
<li><a href="#forms-1">Forms</a></li>
|
|
<li><a href="#components-2">Components</a>
|
|
<ul>
|
|
<li><a href="#badges">Badges</a></li>
|
|
<li><a href="#buttons-1">Buttons</a></li>
|
|
<li><a href="#carousel">Carousel</a></li>
|
|
<li><a href="#close-button">Close button</a></li>
|
|
<li><a href="#collapse">Collapse</a></li>
|
|
<li><a href="#dropdowns">Dropdowns</a></li>
|
|
<li><a href="#navs">Navs</a></li>
|
|
<li><a href="#pagination">Pagination</a></li>
|
|
<li><a href="#popovers">Popovers</a></li>
|
|
<li><a href="#toasts-1">Toasts</a></li>
|
|
<li><a href="#tooltips">Tooltips</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#helpers">Helpers</a></li>
|
|
<li><a href="#utilities-3">Utilities</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#v500-alpha1">v5.0.0-alpha1</a>
|
|
<ul>
|
|
<li><a href="#browser-support-1">Browser support</a></li>
|
|
<li><a href="#sass-4">Sass</a></li>
|
|
<li><a href="#javascript-1">JavaScript</a></li>
|
|
<li><a href="#color-system">Color system</a></li>
|
|
<li><a href="#grid-and-layout">Grid and layout</a></li>
|
|
<li><a href="#content-reboot-etc">Content, Reboot, etc</a></li>
|
|
<li><a href="#typography">Typography</a></li>
|
|
<li><a href="#forms-2">Forms</a></li>
|
|
<li><a href="#components-3">Components</a>
|
|
<ul>
|
|
<li><a href="#disabled-states">Disabled states</a></li>
|
|
<li><a href="#alerts">Alerts</a></li>
|
|
<li><a href="#badges-1">Badges</a></li>
|
|
<li><a href="#buttons-2">Buttons</a></li>
|
|
<li><a href="#cards">Cards</a></li>
|
|
<li><a href="#jumbotron">Jumbotron</a></li>
|
|
<li><a href="#navbars">Navbars</a></li>
|
|
<li><a href="#pagination-1">Pagination</a></li>
|
|
<li><a href="#popovers-1">Popovers</a></li>
|
|
<li><a href="#tooltips-1">Tooltips</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#accessibility">Accessibility</a></li>
|
|
<li><a href="#utilities-4">Utilities</a></li>
|
|
<li><a href="#grid">Grid</a></li>
|
|
<li><a href="#misc">Misc</a></li>
|
|
<li><a href="#docs-1">Docs</a></li>
|
|
<li><a href="#build-tools">Build tools</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
<div class="bd-content ps-lg-4">
|
|
|
|
|
|
<h2 id="v500-beta1">v5.0.0-beta1</h2>
|
|
<h3 id="rtl">RTL</h3>
|
|
<p><strong>The RTL feature is still experimental and will probably evolve according to user feedback.</strong> Spotted something or have an improvement to suggest? <a href="https://github.com/twbs/bootstrap/issues/new">Open an issue</a>, we’d love to get your insights.</p>
|
|
<h4 id="sass">Sass</h4>
|
|
<p>Horizontal direction sensitive variables, utilities and mixins are renamed with more logical names — <code>start</code> and <code>end</code> in lieu of <code>left</code> and <code>right</code>.</p>
|
|
<h5 id="components">Components</h5>
|
|
<ul>
|
|
<li>Renamed <code>.dropleft</code> and <code>.dropright</code> to <code>.dropstart</code> and <code>dropend</code>.</li>
|
|
<li>Renamed <code>.dropdown-menu-*-left</code> and <code>.dropdown-menu-*-right</code> to <code>.dropdown-menu-*-start</code> and <code>.dropdown-menu-*-end</code>.</li>
|
|
<li>Renamed <code>.bs-popover-left</code> and <code>.bs-popover-right</code> to <code>.bs-popover-start</code> and <code>.bs-popover-end</code>.</li>
|
|
<li>Renamed <code>.bs-tooltip-left</code> and <code>.bs-tooltip-right</code> to <code>.bs-tooltip-start</code> and <code>.bs-tooltip-end</code>.</li>
|
|
<li>Renamed <code>.carousel-item-left</code> and <code>.carousel-item-right</code> to <code>.carousel-item-start</code> and <code>.carousel-item-end</code>.</li>
|
|
</ul>
|
|
<h5 id="utilities">Utilities</h5>
|
|
<ul>
|
|
<li>Renamed <code>.left-*</code> and <code>.right-*</code> to <code>.start-*</code> and <code>.end-*</code>.</li>
|
|
<li>Renamed <code>.float-left</code> and <code>.float-right</code> to <code>.float-start</code> and <code>.float-end</code>.</li>
|
|
<li>Renamed <code>.border-left</code> and <code>.border-right</code> to <code>.border-start</code> and <code>.border-end</code>.</li>
|
|
<li>Renamed <code>.rounded-left</code> and <code>.rounded-right</code> to <code>.rounded-start</code> and <code>.rounded-end</code>.</li>
|
|
<li>Renamed <code>.ml-*</code> and <code>.mr-*</code> to <code>.ms-*</code> and <code>.me-*</code>.</li>
|
|
<li>Renamed <code>.pl-*</code> and <code>.pr-*</code> to <code>.ps-*</code> and <code>.pe-*</code>.</li>
|
|
<li>Renamed <code>.text-left</code> and <code>.text-right</code> to <code>.text-start</code> and <code>.text-end</code>.</li>
|
|
</ul>
|
|
<p>Breakpoints specific variants are consequently renamed too (eg. <code>.text-md-start</code> replaces <code>.text-md-left</code>).</p>
|
|
<h5 id="mixins">Mixins</h5>
|
|
<ul>
|
|
<li>Renamed <code>border-left-radius()</code> and <code>border-right-radius()</code> to <code>border-start-radius()</code> and <code>border-end-radius()</code> — as well as their corner relative variants (eg. <code>.border-bottom-left-radius</code> became <code>.border-bottom-start-radius</code>).</li>
|
|
<li>Renamed <code>caret-left()</code> and <code>caret-right()</code> to <code>caret-start()</code> and <code>caret-end()</code> — subsequently, the <code>caret()</code> mixin now takes <code>start</code> and <code>end</code> as arguments instead of <code>left</code> and <code>right</code>.</li>
|
|
</ul>
|
|
<h5 id="variables">Variables</h5>
|
|
<ul>
|
|
<li>New <code>$breadcrumb-divider-flipped</code> if a different breadcrumb separator is needed in RTL.</li>
|
|
<li>Renamed <code>$navbar-brand-margin-right</code> to <code>$navbar-brand-margin-end</code>.</li>
|
|
<li>Renamed <code>$pagination-margin-left</code> to <code>$pagination-margin-start</code>.</li>
|
|
<li>Renamed <code>$form-check-padding-left</code> to <code>$form-check-padding-start</code>.</li>
|
|
<li>Renamed <code>$form-switch-padding-left</code> to <code>$form-switch-padding-start</code>.</li>
|
|
<li>Renamed <code>$form-check-inline-margin-right</code> to <code>$form-check-inline-margin-end</code>.</li>
|
|
<li>Renamed <code>$form-select-feedback-icon-padding-right</code> to <code>$form-select-feedback-icon-padding-end</code>.</li>
|
|
</ul>
|
|
<h3 id="javascript">JavaScript</h3>
|
|
<ul>
|
|
<li>Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use <code>data-bs-toggle</code> instead of <code>data-toggle</code>.</li>
|
|
<li>Updated Popper to v2.x:
|
|
<ul>
|
|
<li>Removed <code>offset</code> option from our Tooltip/Popover and Dropdown plugins; this can still be achieved using the <code>popperConfig</code> parameter.</li>
|
|
<li>The <code>fallbackPlacement</code> option has become <code>fallbackPlacements</code>.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h3 id="sass-1">Sass</h3>
|
|
<ul>
|
|
<li>Renamed <code>scale-color()</code> function to <code>shift-color()</code> to avoid collision with Sass’s own color scaling function.</li>
|
|
</ul>
|
|
<h3 id="utilities-1">Utilities</h3>
|
|
<ul>
|
|
<li>Added new <code>.translate-middle-x</code> & <code>.translate-middle-y</code> utilities to horizontally or vertically center absolute/fixed positioned elements.</li>
|
|
</ul>
|
|
<h3 id="components-1">Components</h3>
|
|
<h4 id="breadcrumbs">Breadcrumbs</h4>
|
|
<ul>
|
|
<li>Simplified the default appearance of breadcrumbs by removing <code>padding</code>, <code>background-color</code>, and <code>border-radius</code>.</li>
|
|
<li>Added new CSS custom property <code>--bs-breadcrumb-divider</code> for easy customization without needing to recompile CSS.</li>
|
|
</ul>
|
|
<h4 id="toasts">Toasts</h4>
|
|
<ul>
|
|
<li>Toasts can now be <a href="/docs/5.0/components/toasts/#placement">positioned</a> in a <code>.toast-container</code> with the help of <a href="/docs/5.0/utilities/position/">positioning utilities</a>.</li>
|
|
</ul>
|
|
<h2 id="v500-alpha3">v5.0.0-alpha3</h2>
|
|
<h3 id="browser-support">Browser support</h3>
|
|
<ul>
|
|
<li>Dropped support for Microsoft Edge Legacy. See <a href="#browser-support-1">here</a> for the previous browser support changes.</li>
|
|
</ul>
|
|
<h3 id="sass-2">Sass</h3>
|
|
<ul>
|
|
<li>The color system which worked with <code>color-level()</code> and <code>$theme-color-interval</code> was removed in favor of a new color system. All <code>lighten()</code> and <code>darken()</code> functions in our codebase are replaced by <code>tint-color()</code> and <code>shade-color()</code>. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The <code>scale-color()</code> (changed to <code>shift-color()</code> in Beta 1) will either tint or shade a color depending on whether its weight parameter is positive or negative. <a href="https://github.com/twbs/bootstrap/pull/30622">See #30622</a> for more details.</li>
|
|
<li>Spinners now honor <code>prefers-reduced-motion: reduce</code> by slowing down animations. <a href="https://github.com/twbs/bootstrap/pull/31882">See #31882</a>.</li>
|
|
</ul>
|
|
<h3 id="reboot">Reboot</h3>
|
|
<ul>
|
|
<li>Introduce <code>$enable-smooth-scroll</code>, which applies <code>scroll-behavior: smooth</code> globally—except for users asking for reduced motion through <code>prefers-reduced-motion</code> media query. <a href="https://github.com/twbs/bootstrap/pull/31877">See #31877</a></li>
|
|
</ul>
|
|
<h3 id="buttons">Buttons</h3>
|
|
<ul>
|
|
<li><a href="/docs/5.0/components/buttons/#block-buttons">Dropped <code>.btn-block</code> in favor of CSS grid utility classes.</a> Instead of applying <code>.btn-block</code> to individual buttons, a group of buttons now get wrapped in a parent <code>.d-grid</code> class and can use <code>.gap-*</code> utilities for spacing. For individual “block buttons”, add <code>.w-100</code>.</li>
|
|
</ul>
|
|
<h3 id="forms">Forms</h3>
|
|
<ul>
|
|
<li>The longstanding <a href="https://github.com/twbs/bootstrap/issues/25110">Missing border radius on input group with validation feedback bug</a> is finally fixed by adding an additional <code>.has-validation</code> class to input groups with validation.</li>
|
|
<li>Promoted the Floating labels example to fully supported form component. <a href="/docs/5.0/forms/floating-labels/">See the new Floating labels page.</a></li>
|
|
<li>File inputs now use the <code>.form-control</code> class and don’t require JavaScript, additional HTML, or additional classes. <a href="https://github.com/twbs/bootstrap/pull/31955">See #31955</a>.</li>
|
|
<li>Added <code>cursor:pointer</code> to <code>.form-control-color</code> color inputs.</li>
|
|
</ul>
|
|
<h3 id="utilities-2">Utilities</h3>
|
|
<ul>
|
|
<li><strong>Text utilities:</strong>
|
|
<ul>
|
|
<li>Added <code>.fs-*</code> utilities for <code>font-size</code> utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map.</li>
|
|
<li>Renamed <code>.font-weight-*</code> utilities as <code>.fw-*</code> for brevity and consistency.</li>
|
|
<li>Renamed <code>.font-style-*</code> utilities as <code>.fst-*</code> for brevity and consistency.</li>
|
|
</ul>
|
|
</li>
|
|
<li>Added <code>.d-grid</code> to display utilities</li>
|
|
<li>Added new <code>gap</code> utilities (<code>.gap</code>) for CSS Grid layouts</li>
|
|
</ul>
|
|
<h2 id="v500-alpha2">v5.0.0-alpha2</h2>
|
|
<h3 id="sass-3">Sass</h3>
|
|
<ul>
|
|
<li>Added default parameters to each <code>border-radius</code> mixin. <a href="https://github.com/twbs/bootstrap/pull/31571">See #31571</a>.</li>
|
|
<li>Updated the next breakpoint when targeting only the <code>xs</code> breakpoint. <a href="https://github.com/twbs/bootstrap/pull/31500">See #31500</a>.</li>
|
|
<li><code>box-shadow</code> mixins now allow <code>null</code> values and drop <code>none</code> from multiple arguments. <a href="https://github.com/twbs/bootstrap/pull/30394">See #30394</a>.</li>
|
|
</ul>
|
|
<h3 id="docs">Docs</h3>
|
|
<ul>
|
|
<li>Renamed “Navs” page to “Navs & Tabs”</li>
|
|
<li>Renamed “Screen readers” helper page to “Visually hidden”, and filename to <code>visually-hidden</code></li>
|
|
<li>Renamed “Checks” page to “Checks & radios”, and filename to <code>checks-radios</code></li>
|
|
<li>Improved documentation of check/radio powered button groups</li>
|
|
<li>Improved skip links in our docs.</li>
|
|
<li>Redesigned docs navigation for larger tap targets on mobile and a streamlined subnav.</li>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31114">#31114</a>: Improved form documentation with regards to accessibility.</li>
|
|
</ul>
|
|
<h3 id="layout">Layout</h3>
|
|
<ul>
|
|
<li>Container horizontal padding updated to match the gutter size of <code>.row</code>s.</li>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31439">#31439</a>: Removed <code>flex: 1 0 100%</code> from rows due to regressions in grid behavior.</li>
|
|
</ul>
|
|
<h3 id="reboot-1">Reboot</h3>
|
|
<ul>
|
|
<li>Updated <code>th</code> styling to use a default <code>null</code> value for <code>font-weight</code> and inherit <code>text-align</code> instead of setting explicitly.</li>
|
|
</ul>
|
|
<h3 id="colors">Colors</h3>
|
|
<ul>
|
|
<li>Bumped color contrast ratio from 3:1 to 4.5:1.</li>
|
|
<li>Set <code>$black</code> as color contrast color instead of <code>$gray-900</code>.</li>
|
|
<li>Improved <code>$green</code> (and its theme alias <code>$success</code>) color to reach a new minimum color contrast (moving from <code>#28a745</code> to <code>#198754</code>).</li>
|
|
<li>Improved <code>$cyan</code> (and its theme alias <code>$info</code>) color to be more vibrant (moving from <code>#17a2b8</code> to <code>#0dcaf0</code>).</li>
|
|
</ul>
|
|
<h3 id="forms-1">Forms</h3>
|
|
<ul>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31383">#31383</a>: Resized checks and radios to be <code>1em</code> instead of <code>1.25em</code> in an effort to make them scale better with custom <code>$font-size-base</code> values and more.</li>
|
|
</ul>
|
|
<h3 id="components-2">Components</h3>
|
|
<h4 id="badges">Badges</h4>
|
|
<ul>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31132">#31132</a>: Increased default padding for badges from <code>.25em</code>/<code>.5em</code> to <code>.35em</code>/<code>.65em</code>.</li>
|
|
</ul>
|
|
<h4 id="buttons-1">Buttons</h4>
|
|
<ul>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/30639">#30639</a>: Disabled states of buttons are easier to customize thanks to additional arguments in the <code>button-variant()</code> mixin.</li>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/30989">#30989</a>: Updated buttons to ensure increased contrast on hover and active states.</li>
|
|
</ul>
|
|
<h4 id="carousel">Carousel</h4>
|
|
<ul>
|
|
<li>Replaced chevron icons for carousel controls with new SVGs from <a href="https://icons.getbootstrap.com/">Bootstrap Icons</a>.</li>
|
|
<li>Added new <a href="/docs/5.0/components/carousel/#dark-variant"><code>.carousel-dark</code> variant</a> for dark text, controls, and indicators (great for lighter backgrounds).</li>
|
|
</ul>
|
|
<h4 id="close-button">Close button</h4>
|
|
<ul>
|
|
<li>Renamed <code>.close</code> to <code>.btn-close</code> for a less generic name.</li>
|
|
<li>Close buttons now use a <code>background-image</code> (embedded SVG) instead of a <code>&times;</code> in the HTML, allowing for easier customization without the need to touch your markup.</li>
|
|
<li>Added new variables to better control the customization.</li>
|
|
<li>Added new <code>.btn-close-white</code> variant that uses <code>filter: invert(1)</code> to enable higher contrast dismiss icons against darker backgrounds.</li>
|
|
</ul>
|
|
<h4 id="collapse">Collapse</h4>
|
|
<ul>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31346">#31346</a>: Removed scroll anchoring for accordions.</li>
|
|
</ul>
|
|
<h4 id="dropdowns">Dropdowns</h4>
|
|
<ul>
|
|
<li>Added new <code>.dropdown-menu-dark</code> variant and associated variables for on-demand dark dropdowns.</li>
|
|
<li>Added new variable for <code>$dropdown-padding-x</code>.</li>
|
|
<li>Darkened the dropdown divider for improved contrast.</li>
|
|
</ul>
|
|
<h4 id="navs">Navs</h4>
|
|
<ul>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31035">#31035</a>: Added new <code>null</code> variables for <code>font-size</code>, <code>font-weight</code>, <code>color</code>, and <code>:hover</code> <code>color</code> to the <code>.nav-link</code> class.</li>
|
|
</ul>
|
|
<h4 id="pagination">Pagination</h4>
|
|
<ul>
|
|
<li>Added <code>transition</code>s to pagination links. <a href="https://github.com/twbs/bootstrap/pull/31396">See #31396</a>.</li>
|
|
</ul>
|
|
<h4 id="popovers">Popovers</h4>
|
|
<ul>
|
|
<li>Renamed <code>whiteList</code> option to <code>allowList</code>.</li>
|
|
</ul>
|
|
<h4 id="toasts-1">Toasts</h4>
|
|
<ul>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31109">#31109</a>: Made default toast duration 5 seconds.</li>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31155">#31155</a>: Clear <code>timeout</code> before showing toasts.</li>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31381">#31381</a>: Removed <code>overflow: hidden</code> from toasts and replaced with proper <code>border-radius</code>s with <code>calc()</code> functions.</li>
|
|
<li>Updated docs to include additional examples for how to customize and theme toasts.</li>
|
|
</ul>
|
|
<h4 id="tooltips">Tooltips</h4>
|
|
<ul>
|
|
<li>Renamed <code>whiteList</code> option to <code>allowList</code>.</li>
|
|
</ul>
|
|
<h3 id="helpers">Helpers</h3>
|
|
<ul>
|
|
<li>Responsive embed helpers have been renamed to <a href="/docs/5.0/helpers/ratio/">ratio helpers</a> with new class names and improved behaviors, as well as a helpful CSS variable.
|
|
<ul>
|
|
<li>Classes have been renamed to change <code>by</code> to <code>x</code> in the aspect ratio. For example, <code>.ratio-16by9</code> is now <code>.ratio-16x9</code>.</li>
|
|
<li>We’ve dropped the <code>.embed-responsive-item</code> and element group selector in favor of a simpler <code>.ratio > *</code> selector. No more class is needed, and the ratio helper now works with any HTML element.</li>
|
|
<li>The <code>$embed-responsive-aspect-ratios</code> Sass map has been renamed to <code>$aspect-ratios</code> and its values have been simplified to include the class name and the percentage as the <code>key: value</code> pair.</li>
|
|
<li>CSS variables are now generated and included for each value in the Sass map. Modify the <code>--aspect-ratio</code> variable on the <code>.ratio</code> to create any <a href="/docs/5.0/helpers/ratio/#custom-ratios">custom aspect ratio</a>.</li>
|
|
</ul>
|
|
</li>
|
|
<li>“Screen reader” classes are now <a href="/docs/5.0/helpers/visually-hidden/">“visually hidden” classes</a>.
|
|
<ul>
|
|
<li>Changed the Sass file from <code>scss/helpers/_screenreaders.scss</code> to <code>scss/helpers/_visually-hidden.scss</code></li>
|
|
<li>Renamed <code>.sr-only</code> and <code>.sr-only-focusable</code> to <code>.visually-hidden</code> and <code>.visually-hidden-focusable</code></li>
|
|
<li>Renamed <code>sr-only()</code> and <code>sr-only-focusable()</code> mixins to <code>visually-hidden()</code> and <code>visually-hidden-focusable()</code>.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h3 id="utilities-3">Utilities</h3>
|
|
<ul>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31280">#31280</a>: Added new <a href="/docs/5.0/utilities/position/#arrange-elements">position utilities</a> for <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. Values include <code>0</code>, <code>50%</code>, and <code>100%</code> for each property.
|
|
<ul>
|
|
<li>We also added new <code>translate</code> utilities to accompany those position utilities for centering elements when they’re being positioned.</li>
|
|
<li>Some great examples have been added to the docs to show these off.</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31484">#31484</a>: Added new <a href="/docs/5.0/utilities/borders/#border-width"><code>border-width</code> utility</a>.</li>
|
|
<li><a href="https://github.com/twbs/bootstrap/pull/31473">#31473</a>: The <code>.d-none</code> utility was moved in our CSS to give it more weight over other display utilities.</li>
|
|
<li>Renamed <code>.text-monospace</code> to <code>.font-monospace</code>.</li>
|
|
<li>Removed <code>.text-hide</code> as it’s an antiquated method for hiding text that shouldn’t be used anymore.</li>
|
|
<li>New <code>line-height</code> utilities: <code>.lh-1</code>, <code>.lh-sm</code>, <code>.lh-base</code> and <code>.lh-lg</code>. See <a href="/docs/5.0/utilities/text/#line-height">here</a>.</li>
|
|
</ul>
|
|
<hr>
|
|
<h2 id="v500-alpha1">v5.0.0-alpha1</h2>
|
|
<h3 id="browser-support-1">Browser support</h3>
|
|
<p>See the browser and devices page for details on what is currently supported in Bootstrap 5. Since v4, here’s what’s changed to our browser support:</p>
|
|
<ul>
|
|
<li>Dropped support for Internet Explorer 10 and 11</li>
|
|
<li>Dropped support for Microsoft Edge < 16</li>
|
|
<li>Dropped support for Firefox < 60</li>
|
|
<li>Dropped support for Safari < 10</li>
|
|
<li>Dropped support for iOS Safari < 10</li>
|
|
<li>Dropped support for Chrome < 60</li>
|
|
<li>Dropped support for Android < 6</li>
|
|
</ul>
|
|
<h3 id="sass-4">Sass</h3>
|
|
<p>Changes to our source Sass files and compiled CSS.</p>
|
|
<ul>
|
|
<li>Removed <code>hover</code>, <code>hover-focus</code>, <code>plain-hover-focus</code>, and <code>hover-focus-active</code> mixins. Use regular CSS syntax for these moving forward. <a href="https://github.com/twbs/bootstrap/pull/28267">See #28267</a>.</li>
|
|
<li>Remove previously deprecated mixins
|
|
<ul>
|
|
<li><code>float()</code></li>
|
|
<li><code>form-control-mixin()</code></li>
|
|
<li><code>nav-divider()</code></li>
|
|
<li><code>retina-img()</code></li>
|
|
<li><code>text-hide()</code> (also dropped the associated utility class, <code>.text-hide</code>)</li>
|
|
<li><code>visibility()</code></li>
|
|
<li><code>form-control-focus()</code></li>
|
|
</ul>
|
|
</li>
|
|
<li>Rearranged forms source files under <code>scss/forms/</code>. <a href="#forms">See Forms section for more details.</a></li>
|
|
<li>Removed print styles and <code>$enable-print-styles</code> variable. Print display classes, however, have remained intact. <a href="https://github.com/twbs/bootstrap/pull/28339">See #28339</a>.</li>
|
|
<li>Dropped <code>color()</code>, <code>theme-color()</code> & <code>gray()</code> functions in favor of variables. <a href="https://github.com/twbs/bootstrap/pull/29083">See #29083</a></li>
|
|
<li>The <code>theme-color-level()</code> function is renamed to <code>color-level()</code> and now accepts any color you want instead of only <code>$theme-color</code> colors. <a href="https://github.com/twbs/bootstrap/pull/29083">See #29083</a> <strong>Watch out:</strong> <code>color-level()</code> was later on dropped in <code>v5.0.0-alpha3</code>.</li>
|
|
<li><code>$enable-grid-classes</code> doesn’t disable the generation of container classes anymore <a href="https://github.com/twbs/bootstrap/pull/29146">See #29146</a></li>
|
|
<li>Renamed <code>$enable-prefers-reduced-motion-media-query</code> and <code>$enable-pointer-cursor-for-buttons</code> to <code>$enable-reduced-motion</code> and <code>$enable-button-pointers</code> for brevity.</li>
|
|
<li>Line heights are dropped from several components to simplify our codebase. The <code>button-size()</code> and <code>pagination-size()</code> do not accept line height parameters anymore. <a href="https://github.com/twbs/bootstrap/pull/29271">See #29271</a></li>
|
|
<li>The <code>button-variant()</code> mixin now accepts 3 optional color parameters, for each button state, to override the color provided by <code>color-contrast()</code>. By default, these parameters will find which color provides more contrast against the button state’s background color with <code>color-contrast()</code>.</li>
|
|
<li>The <code>button-outline-variant()</code> mixin now accepts an additional argument, <code>$active-color</code>, for setting the button’s active state text color. By default, this parameter will find which color provides more contrast against the button’s active background color with <code>color-contrast()</code>.</li>
|
|
<li>Ditch the Sass map merges, which makes it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like <code>$theme-colors</code>. Check out how to deal with <a href="/docs/5.0/customize/sass/#maps-and-loops">Sass maps</a>.</li>
|
|
<li><code>color-yiq()</code> function and related variables are renamed to <code>color-contrast()</code> since it’s not related to YIQ colorspace anymore. <a href="https://github.com/twbs/bootstrap/pull/30168/">See #30168.</a>
|
|
<ul>
|
|
<li><code>$yiq-contrasted-threshold</code> is renamed to <code>$min-contrast-ratio</code>.</li>
|
|
<li><code>$yiq-text-dark</code> and <code>$yiq-text-light</code> are respectively renamed to <code>$color-contrast-dark</code> and <code>$color-contrast-light</code>.</li>
|
|
</ul>
|
|
</li>
|
|
<li>Linear gradients are simplified when gradients are enabled and therefore, <code>gradient-bg()</code> now only accepts an optional <code>$color</code> parameter.</li>
|
|
<li>The <code>bg-gradient-variant()</code> mixin is removed since the <code>.bg-gradient</code> class can now be used to add gradients to elements instead of the <code>.bg-gradient-*</code> classes.</li>
|
|
<li>The <code>media-breakpoint-down()</code> uses the breakpoint itself instead of the next breakpoint. Use <code>media-breakpoint-down(lg)</code> instead of <code>media-breakpoint-down(md)</code> to target viewports smaller than the <code>lg</code> breakpoint.</li>
|
|
<li>The <code>media-breakpoint-between()</code> mixin’s second parameter also uses the breakpoint itself instead of the next breakpoint. Use <code>media-between(sm, lg)</code> instead of <code>media-breakpoint-between(sm, md)</code> to target viewports between the <code>sm</code> and <code>lg</code> breakpoints.</li>
|
|
<li>The <code>box-shadow()</code> mixin now better supports <code>none</code> and <code>null</code> with multiple arguments. Now you can pass multiple arguments with either value and get the expected output. <a href="https://github.com/twbs/bootstrap/pull/30394">See #30394</a>.</li>
|
|
<li>Each <code>border-radius()</code> mixin now has a default value. You can now call these mixins without specifying a border radius value and the <code>$border-radius</code> variable will be used. <a href="https://github.com/twbs/bootstrap/pull/31571">See #31571</a></li>
|
|
</ul>
|
|
<h3 id="javascript-1">JavaScript</h3>
|
|
<p>Changes to our source and compiled JavaScript files.</p>
|
|
<ul>
|
|
<li>Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.</li>
|
|
<li>Removed underscore from public static methods like <code>_getInstance()</code> → <code>getInstance()</code>.</li>
|
|
</ul>
|
|
<h3 id="color-system">Color system</h3>
|
|
<p>We’ve updated the color system that powers Bootstrap to improve color contrast and provide a much more extensive set of colors.</p>
|
|
<ul>
|
|
<li>Updated blue and pink base colors (<code>-500</code>) to ensure WCAG 2.1 AA contrast.</li>
|
|
<li>Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.</li>
|
|
<li>To support our color system, we’ve added new custom <code>tint-color()</code> and <code>shade-color()</code> functions to mix our colors appropriately.</li>
|
|
</ul>
|
|
<h3 id="grid-and-layout">Grid and layout</h3>
|
|
<p>Changes to any layout tools and our grid system.</p>
|
|
<ul>
|
|
<li>Dropped the <code>.media</code> component as it can be built with utility classes. <a href="https://github.com/twbs/bootstrap/pull/28265">See #28265</a>.</li>
|
|
<li>Remove <code>position: relative</code> from grid columns.</li>
|
|
<li>The horizontal padding is added to the direct children in a row instead of the columns themselves.
|
|
<ul>
|
|
<li>This simplifies our codebase.</li>
|
|
<li>The column classes can now be used stand-alone. Whenever they are used outside a <code>.row</code>, horizontal padding won’t be added.</li>
|
|
</ul>
|
|
</li>
|
|
<li>The responsive gutter classes can be used to control the gutter width in horizontal, vertical or both directions.</li>
|
|
<li>The gutter width is now set in <code>rem</code> and decreased from <code>30px</code> to <code>1.5rem</code> (24px).</li>
|
|
<li><code>bootstrap-grid.css</code> now only applies <code>box-sizing: border-box</code> to the column instead of resetting the global box-sizing. This way the grid system can be used, even if <code>box-sizing: border-box</code> is not applied to each element.</li>
|
|
</ul>
|
|
<h3 id="content-reboot-etc">Content, Reboot, etc</h3>
|
|
<p>Changes to Reboot, typography, tables, and more.</p>
|
|
<ul>
|
|
<li><a href="/docs/5.0/getting-started/rfs/">RFS</a> enabled for automated font size rescaling. <a href="https://github.com/twbs/bootstrap/pull/29152">See #29152</a></li>
|
|
<li>Reset default horizontal <code>padding-left</code> on <code><ul></code> and <code><ol></code> elements from browser default <code>40px</code> to <code>2rem</code>.</li>
|
|
<li>Simplified table styles (no more odd top border) and tightened cell padding.</li>
|
|
<li>Nested tables do not inherit styles anymore.</li>
|
|
<li><code>.thead-light</code> and <code>.thead-dark</code> are dropped in favor of the <code>.table-*</code> variant classes which can be used for all table elements (<code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>tr</code>, <code>th</code> and <code>td</code>).</li>
|
|
<li>The <code>table-row-variant()</code> mixin is renamed to <code>table-variant()</code> and accepts only 2 parameters: <code>$color</code> (colon name) and <code>$value</code> (color code). The border color and accent colors are automatically calculated based on the table factor variables.</li>
|
|
<li>Split table cell padding variables into <code>-y</code> and <code>-x</code>.</li>
|
|
<li>Dropped <code>.pre-scrollable</code> class. <a href="https://github.com/twbs/bootstrap/pull/29135">See #29135</a></li>
|
|
<li><code>.text-*</code> utilities do not add hover and focus states to links anymore. <code>.link-*</code> helper classes can be used instead. <a href="https://github.com/twbs/bootstrap/pull/29267">See #29267</a></li>
|
|
<li>Drop <code>.text-justify</code> class. <a href="https://github.com/twbs/bootstrap/pull/29793">See #29793</a></li>
|
|
</ul>
|
|
<h3 id="typography">Typography</h3>
|
|
<ul>
|
|
<li>Removed <code>$display-*</code> variables for a new <code>$display-font-sizes</code> Sass map.</li>
|
|
<li>Removed individual <code>$display-*-weight</code> variables for a single <code>$display-font-weight</code>.</li>
|
|
<li>Added two new <code>.display-*</code> heading styles, <code>.display-5</code> and <code>.display-6</code>.</li>
|
|
<li>Resized existing display headings for a slightly more consistent set of <code>font-size</code>s.</li>
|
|
<li>Links are underlined by default (not just on hover), unless they’re part of specific components.</li>
|
|
</ul>
|
|
<h3 id="forms-2">Forms</h3>
|
|
<ul>
|
|
<li>Rearranged form documentation under its own top-level section.
|
|
<ul>
|
|
<li>Split out old Forms page into several subpages</li>
|
|
<li>Moved input groups docs under the new Forms section</li>
|
|
</ul>
|
|
</li>
|
|
<li>Rearranged source Sass files under <code>scss/forms/</code>, including moving over input group styles.</li>
|
|
<li>Combined native and custom checkboxes and radios into a single <code>.form-check</code> class.
|
|
<ul>
|
|
<li>New checks support sizing via <code>em</code>/<code>font-size</code> or explicit modifier classes now.</li>
|
|
<li>New checks now appear larger by default for improved usability.</li>
|
|
<li>Dropped <code>.custom-control</code> and associated classes.</li>
|
|
<li>Renamed most <code>$custom-control</code> variables to <code>$form-control</code> ones.</li>
|
|
</ul>
|
|
</li>
|
|
<li>Combined native and custom selects into <code>.form-select</code>.
|
|
<ul>
|
|
<li>Dropped <code>.custom-select</code> and associated classes.</li>
|
|
<li>Renamed most <code>$custom-select</code> variables to <code>$form-select</code> ones.</li>
|
|
</ul>
|
|
</li>
|
|
<li>Updated file input component with the same overall design, but improved HTML.
|
|
<ul>
|
|
<li>Refactored <code>.form-file</code> markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.</li>
|
|
<li>Dropped native <code>.form-control-file</code> and <code>.form-control-range</code> components entirely.</li>
|
|
<li>Renamed <code>.custom-file</code> to <code>.form-file</code> (including variables). <strong>Watch out:</strong> <code>.form-file</code> was later on dropped in <code>v5.0.0-alpha3</code>, now you can use <code>.form-control</code>.</li>
|
|
<li>Added support for <code>:focus</code> and <code>:disabled</code> styles.</li>
|
|
</ul>
|
|
</li>
|
|
<li>Renamed <code>.custom-range</code> to <code>.form-range</code> (including variables).</li>
|
|
<li>Dropped <code>.form-group</code> for margin utilities (we’ve replaced our docs examples with <code>.mb-3</code>).</li>
|
|
<li>Dropped <code>.form-row</code> for the more flexible grid gutters.</li>
|
|
<li>Dropped <code>.form-inline</code> for the more flexible grid.</li>
|
|
<li>Dropped support for <code>.form-control-plaintext</code> inside <code>.input-group</code>s.</li>
|
|
<li>Dropped <code>.input-group-append</code> and <code>.input-group-prepend</code>. You can now just add buttons and <code>.input-group-text</code> as direct children of the input groups.</li>
|
|
<li>Form labels now require the <code>.form-label</code> class. Sass variables are now available to style form labels to your needs. <a href="https://github.com/twbs/bootstrap/pull/30476">See #30476</a></li>
|
|
</ul>
|
|
<h3 id="components-3">Components</h3>
|
|
<ul>
|
|
<li>Unified <code>padding</code> values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our <code>$spacer</code> variable. <a href="https://github.com/twbs/bootstrap/pull/30564">See #30564</a>.</li>
|
|
</ul>
|
|
<h4 id="disabled-states">Disabled states</h4>
|
|
<ul>
|
|
<li>Disabled states of the buttons, close button, pagination link & form range now have <code>pointer-events: none</code> added. This simplifies our codebase and makes it easier to override active states in CSS. <a href="https://github.com/twbs/bootstrap/pull/29296">#29296</a>.</li>
|
|
</ul>
|
|
<h4 id="alerts">Alerts</h4>
|
|
<ul>
|
|
<li>Removed auto-darkening of <code><hr></code> elements in <code>.alert-*</code> class variants. <code><hr></code>s use <code>rgba()</code> for their color, so these should naturally blend anyway.</li>
|
|
</ul>
|
|
<h4 id="badges-1">Badges</h4>
|
|
<p>Badges were overhauled to better differentiate themselves from buttons and to better utilize utility classes.</p>
|
|
<ul>
|
|
<li>Removed and replaced <code>.badge</code> modifier classes with background utility classes (e.g., use <code>.bg-primary</code> instead of <code>.badge-primary</code>)</li>
|
|
<li>Removed <code>.badge-pill</code> for the <code>.rounded-pill</code> utility class</li>
|
|
<li>Removed badge’s hover and focus styles for <code>a.badge</code> and <code>button.badge</code>.</li>
|
|
</ul>
|
|
<h4 id="buttons-2">Buttons</h4>
|
|
<ul>
|
|
<li>The checkbox/radio toggle is removed from the button plugin in favor of a CSS only solution, which is documented in the <a href="/docs/5.0/forms/checks-radios/#toggle-buttons">form checks and radios</a> docs. The <code>.btn-check</code> class can be added to inputs, any label with <code>.btn</code> and modifier class can be used to theme the labels. <a href="https://github.com/twbs/bootstrap/pull/30650">See #30650</a>.</li>
|
|
</ul>
|
|
<h4 id="cards">Cards</h4>
|
|
<ul>
|
|
<li>Removed the card columns in favor of a Masonry grid <a href="https://github.com/twbs/bootstrap/pull/28922">See #28922</a>.</li>
|
|
<li>Removed card decks in favor of the grid which adds more flexibility over responsive behavior.</li>
|
|
</ul>
|
|
<h4 id="jumbotron">Jumbotron</h4>
|
|
<ul>
|
|
<li>The jumbotron component is removed in favor of utility classes like <code>.bg-light</code> for the background color and <code>.p-*</code> classes to control padding.</li>
|
|
</ul>
|
|
<h4 id="navbars">Navbars</h4>
|
|
<ul>
|
|
<li>All navbars now require a container within. This drastically simplifies spacing requirements and removes the need for extensive CSS overrides we added for responsive containers in v4.</li>
|
|
</ul>
|
|
<h4 id="pagination-1">Pagination</h4>
|
|
<ul>
|
|
<li>Pagination links now have customizable <code>margin-left</code> that are dynamically rounded on all corners when separated from one another.</li>
|
|
</ul>
|
|
<h4 id="popovers-1">Popovers</h4>
|
|
<ul>
|
|
<li>Renamed <code>.arrow</code> to <code>.popover-arrow</code></li>
|
|
</ul>
|
|
<h4 id="tooltips-1">Tooltips</h4>
|
|
<ul>
|
|
<li>Renamed <code>.arrow</code> to <code>.tooltip-arrow</code></li>
|
|
</ul>
|
|
<h3 id="accessibility">Accessibility</h3>
|
|
<ul>
|
|
<li>Unlike the old <code>.sr-only-focusable</code>, which only worked in combination with <code>.sr-only</code>, <code>.sr-only-focusable</code> can be used as a standalone class without <code>.sr-only</code>. <a href="https://github.com/twbs/bootstrap/pull/28720">See #28720</a>.</li>
|
|
</ul>
|
|
<h3 id="utilities-4">Utilities</h3>
|
|
<h3 id="grid">Grid</h3>
|
|
<ul>
|
|
<li>Decreased the number of responsive order utilities per breakpoint. The highest order utility with a number now is <code>.order-5</code> instead of <code>.order-12</code>. <a href="https://github.com/twbs/bootstrap/pull/28874">See #28874</a>.</li>
|
|
</ul>
|
|
<h3 id="misc">Misc</h3>
|
|
<ul>
|
|
<li>Added <code>.bg-body</code> for quickly setting the <code><body></code>’s background to additional elements.</li>
|
|
<li>Negative margin utilities are disabled by default. You can re-enable them by setting <code>$enable-negative-margins: true</code>, but keep in mind this can increase the file size quite a lot.</li>
|
|
</ul>
|
|
<h3 id="docs-1">Docs</h3>
|
|
<ul>
|
|
<li>Removed “Wall of browser bugs” page because it has become obsolete</li>
|
|
<li>Switched from Jekyll to Hugo</li>
|
|
</ul>
|
|
<h3 id="build-tools">Build tools</h3>
|
|
<ul>
|
|
<li>Updated all devDependencies</li>
|
|
<li>We support only the latest Node.js LTS releases which are 10 and 12 at the time of writing</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
|
|
<div class="container">
|
|
<ul class="bd-footer-links ps-0 mb-3">
|
|
<li class="d-inline-block"><a href="https://github.com/twbs">GitHub</a></li>
|
|
<li class="d-inline-block ms-3"><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/examples/">Examples</a></li>
|
|
<li class="d-inline-block ms-3"><a href="/docs/5.0/about/overview/">About</a></li>
|
|
</ul>
|
|
<p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/5.0/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
|
<p class="mb-0">Currently v5.0.0-beta1. Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
|
|
|
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|