mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-18 03:11:19 +02:00
update to 4.2.1
This commit is contained in:
Mark Otto
573
docs/4.2/utilities/borders/index.html
Normal file
573
docs/4.2/utilities/borders/index.html
Normal file
@@ -0,0 +1,573 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Borders · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Borders">
|
||||
<meta name="twitter:description" content="Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/borders/">
|
||||
<meta property="og:title" content="Borders">
|
||||
<meta property="og:description" content="Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></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="#border">Border</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#additive">Additive</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#subtractive">Subtractive</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#border-color">Border color</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#border-radius">Border-radius</a></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">Borders</h1>
|
||||
<p class="bd-lead">Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="border">Border</h2>
|
||||
|
||||
<p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
|
||||
|
||||
<h3 id="additive">Additive</h3>
|
||||
|
||||
<div class="bd-example-border-utils">
|
||||
|
||||
<div class="bd-example">
|
||||
<span class="border"></span>
|
||||
<span class="border-top"></span>
|
||||
<span class="border-right"></span>
|
||||
<span class="border-bottom"></span>
|
||||
<span class="border-left"></span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"border"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border-top"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border-right"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border-bottom"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border-left"</span><span class="nt">></span></span></code></pre></figure>
|
||||
|
||||
</div>
|
||||
|
||||
<h3 id="subtractive">Subtractive</h3>
|
||||
|
||||
<div class="bd-example-border-utils bd-example-border-utils-0">
|
||||
|
||||
<div class="bd-example">
|
||||
<span class="border-0"></span>
|
||||
<span class="border-top-0"></span>
|
||||
<span class="border-right-0"></span>
|
||||
<span class="border-bottom-0"></span>
|
||||
<span class="border-left-0"></span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"border-0"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border-top-0"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border-right-0"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border-bottom-0"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border-left-0"</span><span class="nt">></span></span></code></pre></figure>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="border-color">Border color</h2>
|
||||
|
||||
<p>Change the border color using utilities built on our theme colors.</p>
|
||||
|
||||
<div class="bd-example-border-utils">
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<span class="border border-primary"></span>
|
||||
<span class="border border-secondary"></span>
|
||||
<span class="border border-success"></span>
|
||||
<span class="border border-danger"></span>
|
||||
<span class="border border-warning"></span>
|
||||
<span class="border border-info"></span>
|
||||
<span class="border border-light"></span>
|
||||
<span class="border border-dark"></span>
|
||||
<span class="border border-white"></span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"border border-primary"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border border-secondary"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border border-success"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border border-danger"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border border-warning"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border border-info"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border border-light"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border border-dark"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"border border-white"</span><span class="nt">></span></span></code></pre></figure>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 id="border-radius">Border-radius</h2>
|
||||
|
||||
<p>Add classes to an element to easily round its corners.</p>
|
||||
|
||||
<div class="bd-example bd-example-images"><svg class="bd-placeholder-img rounded" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example rounded image: 75x75"><title>Example rounded image</title><rect fill="#868e96" width="100%" height="100%" /><text fill="#dee2e6" dy=".3em" x="50%" y="50%">75x75</text></svg><svg class="bd-placeholder-img rounded-top" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example top rounded image: 75x75"><title>Example top rounded image</title><rect fill="#868e96" width="100%" height="100%" /><text fill="#dee2e6" dy=".3em" x="50%" y="50%">75x75</text></svg><svg class="bd-placeholder-img rounded-right" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example right rounded image: 75x75"><title>Example right rounded image</title><rect fill="#868e96" width="100%" height="100%" /><text fill="#dee2e6" dy=".3em" x="50%" y="50%">75x75</text></svg><svg class="bd-placeholder-img rounded-bottom" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example bottom rounded image: 75x75"><title>Example bottom rounded image</title><rect fill="#868e96" width="100%" height="100%" /><text fill="#dee2e6" dy=".3em" x="50%" y="50%">75x75</text></svg><svg class="bd-placeholder-img rounded-left" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example left rounded image: 75x75"><title>Example left rounded image</title><rect fill="#868e96" width="100%" height="100%" /><text fill="#dee2e6" dy=".3em" x="50%" y="50%">75x75</text></svg><svg class="bd-placeholder-img rounded-circle" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Completely round image: 75x75"><title>Completely round image</title><rect fill="#868e96" width="100%" height="100%" /><text fill="#dee2e6" dy=".3em" x="50%" y="50%">75x75</text></svg><svg class="bd-placeholder-img rounded-pill" width="150" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Rounded pill image: 150x75"><title>Rounded pill image</title><rect fill="#868e96" width="100%" height="100%" /><text fill="#dee2e6" dy=".3em" x="50%" y="50%">150x75</text></svg><svg class="bd-placeholder-img rounded-0" width="75" height="75" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Example non-rounded image (overrides rounding applied elsewhere): 75x75"><title>Example non-rounded image (overrides rounding applied elsewhere)</title><rect fill="#868e96" width="100%" height="100%" /><text fill="#dee2e6" dy=".3em" x="50%" y="50%">75x75</text></svg></div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-top"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-right"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-bottom"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-left"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-circle"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-pill"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded-0"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
509
docs/4.2/utilities/clearfix/index.html
Normal file
509
docs/4.2/utilities/clearfix/index.html
Normal file
@@ -0,0 +1,509 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Quickly and easily clear floated content within a container by adding a clearfix utility.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Clearfix · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Clearfix">
|
||||
<meta name="twitter:description" content="Quickly and easily clear floated content within a container by adding a clearfix utility.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/clearfix/">
|
||||
<meta property="og:title" content="Clearfix">
|
||||
<meta property="og:description" content="Quickly and easily clear floated content within a container by adding a clearfix utility.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
</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">Clearfix</h1>
|
||||
<p class="bd-lead">Quickly and easily clear floated content within a container by adding a clearfix utility.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Easily clear <code class="highlighter-rouge">float</code>s by adding <code class="highlighter-rouge">.clearfix</code> <strong>to the parent element</strong>. Can also be used as a mixin.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"clearfix"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Mixin itself</span>
|
||||
<span class="k">@mixin</span> <span class="nf">clearfix</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="err">&</span><span class="p">:</span><span class="o">:</span><span class="n">after</span> <span class="p">{</span>
|
||||
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
|
||||
<span class="nl">content</span><span class="p">:</span> <span class="s2">""</span><span class="p">;</span>
|
||||
<span class="nl">clear</span><span class="p">:</span> <span class="nb">both</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// Usage as a mixin</span>
|
||||
<span class="nc">.element</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">clearfix</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="bg-info clearfix">
|
||||
<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
|
||||
<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"bg-info clearfix"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary float-left"</span><span class="nt">></span>Example Button floated left<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary float-right"</span><span class="nt">></span>Example Button floated right<span class="nt"></button></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
489
docs/4.2/utilities/close-icon/index.html
Normal file
489
docs/4.2/utilities/close-icon/index.html
Normal file
@@ -0,0 +1,489 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use a generic close icon for dismissing content like modals and alerts.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Close icon · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Close icon">
|
||||
<meta name="twitter:description" content="Use a generic close icon for dismissing content like modals and alerts.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/close-icon/">
|
||||
<meta property="og:title" content="Close icon">
|
||||
<meta property="og:description" content="Use a generic close icon for dismissing content like modals and alerts.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
</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">Close icon</h1>
|
||||
<p class="bd-lead">Use a generic close icon for dismissing content like modals and alerts.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p><strong>Be sure to include text for screen readers</strong>, as we’ve done with <code class="highlighter-rouge">aria-label</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></span>
|
||||
<span class="nt"></button></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
594
docs/4.2/utilities/colors/index.html
Normal file
594
docs/4.2/utilities/colors/index.html
Normal file
@@ -0,0 +1,594 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Colors · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Colors">
|
||||
<meta name="twitter:description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/colors/">
|
||||
<meta property="og:title" content="Colors">
|
||||
<meta property="og:description" content="Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></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="#color">Color</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#background-color">Background color</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#background-gradient">Background gradient</a></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">Colors</h1>
|
||||
<p class="bd-lead">Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="color">Color</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<p class="text-primary">.text-primary</p>
|
||||
<p class="text-secondary">.text-secondary</p>
|
||||
<p class="text-success">.text-success</p>
|
||||
<p class="text-danger">.text-danger</p>
|
||||
<p class="text-warning">.text-warning</p>
|
||||
<p class="text-info">.text-info</p>
|
||||
<p class="text-light bg-dark">.text-light</p>
|
||||
<p class="text-dark">.text-dark</p>
|
||||
<p class="text-body">.text-body</p>
|
||||
<p class="text-muted">.text-muted</p>
|
||||
<p class="text-white bg-dark">.text-white</p>
|
||||
<p class="text-black-50">.text-black-50</p>
|
||||
<p class="text-white-50 bg-dark">.text-white-50</p>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-primary"</span><span class="nt">></span>.text-primary<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-secondary"</span><span class="nt">></span>.text-secondary<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">></span>.text-success<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">></span>.text-danger<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-warning"</span><span class="nt">></span>.text-warning<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-info"</span><span class="nt">></span>.text-info<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-light bg-dark"</span><span class="nt">></span>.text-light<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-dark"</span><span class="nt">></span>.text-dark<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-body"</span><span class="nt">></span>.text-body<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>.text-muted<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-white bg-dark"</span><span class="nt">></span>.text-white<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-black-50"</span><span class="nt">></span>.text-black-50<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-white-50 bg-dark"</span><span class="nt">></span>.text-white-50<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<p>Contextual text classes also work well on anchors with the provided hover and focus states. <strong>Note that the <code class="highlighter-rouge">.text-white</code> and <code class="highlighter-rouge">.text-muted</code> class has no additional link styling beyond underline.</strong></p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<p><a href="#" class="text-primary">Primary link</a></p>
|
||||
<p><a href="#" class="text-secondary">Secondary link</a></p>
|
||||
<p><a href="#" class="text-success">Success link</a></p>
|
||||
<p><a href="#" class="text-danger">Danger link</a></p>
|
||||
<p><a href="#" class="text-warning">Warning link</a></p>
|
||||
<p><a href="#" class="text-info">Info link</a></p>
|
||||
<p><a href="#" class="text-light bg-dark">Light link</a></p>
|
||||
<p><a href="#" class="text-dark">Dark link</a></p>
|
||||
<p><a href="#" class="text-muted">Muted link</a></p>
|
||||
<p><a href="#" class="text-white bg-dark">White link</a></p>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-primary"</span><span class="nt">></span>Primary link<span class="nt"></a></p></span>
|
||||
<span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-secondary"</span><span class="nt">></span>Secondary link<span class="nt"></a></p></span>
|
||||
<span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">></span>Success link<span class="nt"></a></p></span>
|
||||
<span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-danger"</span><span class="nt">></span>Danger link<span class="nt"></a></p></span>
|
||||
<span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-warning"</span><span class="nt">></span>Warning link<span class="nt"></a></p></span>
|
||||
<span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-info"</span><span class="nt">></span>Info link<span class="nt"></a></p></span>
|
||||
<span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-light bg-dark"</span><span class="nt">></span>Light link<span class="nt"></a></p></span>
|
||||
<span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-dark"</span><span class="nt">></span>Dark link<span class="nt"></a></p></span>
|
||||
<span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Muted link<span class="nt"></a></p></span>
|
||||
<span class="nt"><p><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-white bg-dark"</span><span class="nt">></span>White link<span class="nt"></a></p></span></code></pre></figure>
|
||||
|
||||
<h2 id="background-color">Background color</h2>
|
||||
|
||||
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities <strong>do not set <code class="highlighter-rouge">color</code></strong>, so in some cases you’ll want to use <code class="highlighter-rouge">.text-*</code> utilities.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
|
||||
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
|
||||
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
|
||||
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
|
||||
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
|
||||
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
|
||||
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
|
||||
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
|
||||
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
|
||||
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-primary text-white"</span><span class="nt">></span>.bg-primary<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-secondary text-white"</span><span class="nt">></span>.bg-secondary<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-success text-white"</span><span class="nt">></span>.bg-success<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-danger text-white"</span><span class="nt">></span>.bg-danger<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-warning text-dark"</span><span class="nt">></span>.bg-warning<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-info text-white"</span><span class="nt">></span>.bg-info<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-light text-dark"</span><span class="nt">></span>.bg-light<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-dark text-white"</span><span class="nt">></span>.bg-dark<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-white text-dark"</span><span class="nt">></span>.bg-white<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 mb-2 bg-transparent text-dark"</span><span class="nt">></span>.bg-transparent<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="background-gradient">Background gradient</h2>
|
||||
|
||||
<p>When <code class="highlighter-rouge">$enable-gradients</code> is set to <code class="highlighter-rouge">true</code> (default is <code class="highlighter-rouge">false</code>), you can use <code class="highlighter-rouge">.bg-gradient-</code> utility classes. <a href="/docs/4.2/getting-started/theming/#sass-options">Learn about our Sass options</a> to enable these classes and more.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-primary</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-secondary</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-success</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-danger</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-warning</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-info</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-light</code></li>
|
||||
<li><code class="highlighter-rouge">.bg-gradient-dark</code></li>
|
||||
</ul>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<h4 id="dealing-with-specificity">Dealing with specificity</h4>
|
||||
|
||||
<p>Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <code class="highlighter-rouge"><div></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
|
||||
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
631
docs/4.2/utilities/display/index.html
Normal file
631
docs/4.2/utilities/display/index.html
Normal file
@@ -0,0 +1,631 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Display property · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Display property">
|
||||
<meta name="twitter:description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/display/">
|
||||
<meta property="og:title" content="Display property">
|
||||
<meta property="og:description" content="Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></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="#how-it-works">How it works</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#notation">Notation</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#hiding-elements">Hiding elements</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#display-in-print">Display in print</a></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">Display property</h1>
|
||||
<p class="bd-lead">Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
|
||||
<p>Change the value of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display"><code class="highlighter-rouge">display</code> property</a> with our responsive display utility classes. We purposely support only a subset of all possible values for <code class="highlighter-rouge">display</code>. Classes can be combined for various effects as you need.</p>
|
||||
|
||||
<h2 id="notation">Notation</h2>
|
||||
|
||||
<p>Display utility classes that apply to all <a href="/docs/4.2/layout/overview/#responsive-breakpoints">breakpoints</a>, from <code class="highlighter-rouge">xs</code> to <code class="highlighter-rouge">xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code class="highlighter-rouge">min-width: 0;</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
|
||||
|
||||
<p>As such, the classes are named using the format:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.d-{value}</code> for <code class="highlighter-rouge">xs</code></li>
|
||||
<li><code class="highlighter-rouge">.d-{breakpoint}-{value}</code> for <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>
|
||||
</ul>
|
||||
|
||||
<p>Where <em>value</em> is one of:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">none</code></li>
|
||||
<li><code class="highlighter-rouge">inline</code></li>
|
||||
<li><code class="highlighter-rouge">inline-block</code></li>
|
||||
<li><code class="highlighter-rouge">block</code></li>
|
||||
<li><code class="highlighter-rouge">table</code></li>
|
||||
<li><code class="highlighter-rouge">table-cell</code></li>
|
||||
<li><code class="highlighter-rouge">table-row</code></li>
|
||||
<li><code class="highlighter-rouge">flex</code></li>
|
||||
<li><code class="highlighter-rouge">inline-flex</code></li>
|
||||
</ul>
|
||||
|
||||
<p>The media queries effect screen widths with the given breakpoint <em>or larger</em>. For example, <code class="highlighter-rouge">.d-lg-none</code> sets <code class="highlighter-rouge">display: none;</code> on both <code class="highlighter-rouge">lg</code> and <code class="highlighter-rouge">xl</code> screens.</p>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
|
||||
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-inline p-2 bg-primary text-white"</span><span class="nt">></span>d-inline<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-inline p-2 bg-dark text-white"</span><span class="nt">></span>d-inline<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<span class="d-block p-2 bg-primary text-white">d-block</span>
|
||||
<span class="d-block p-2 bg-dark text-white">d-block</span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"d-block p-2 bg-primary text-white"</span><span class="nt">></span>d-block<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"d-block p-2 bg-dark text-white"</span><span class="nt">></span>d-block<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<h2 id="hiding-elements">Hiding elements</h2>
|
||||
|
||||
<p>For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.</p>
|
||||
|
||||
<p>To hide elements simply use the <code class="highlighter-rouge">.d-none</code> class or one of the <code class="highlighter-rouge">.d-{sm,md,lg,xl}-none</code> classes for any responsive screen variation.</p>
|
||||
|
||||
<p>To show an element only on a given interval of screen sizes you can combine one <code class="highlighter-rouge">.d-*-none</code> class with a <code class="highlighter-rouge">.d-*-*</code> class, for example <code class="highlighter-rouge">.d-none .d-md-block .d-xl-none</code> will hide the element for all screen sizes except on medium and large devices.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Screen Size</th>
|
||||
<th>Class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Hidden on all</td>
|
||||
<td><code class="highlighter-rouge">.d-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on xs</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on sm</td>
|
||||
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on md</td>
|
||||
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on lg</td>
|
||||
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hidden only on xl</td>
|
||||
<td><code class="highlighter-rouge">.d-xl-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible on all</td>
|
||||
<td><code class="highlighter-rouge">.d-block</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on xs</td>
|
||||
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on sm</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on md</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on lg</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Visible only on xl</td>
|
||||
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-lg-none">hide on screens wider than lg</div>
|
||||
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-lg-none"</span><span class="nt">></span>hide on screens wider than lg<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block"</span><span class="nt">></span>hide on screens smaller than lg<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="display-in-print">Display in print</h2>
|
||||
|
||||
<p>Change the <code class="highlighter-rouge">display</code> value of elements when printing with our print display utility classes. Includes support for the same <code class="highlighter-rouge">display</code> values as our responsive <code class="highlighter-rouge">.d-*</code> utilities.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.d-print-none</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-inline</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-inline-block</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-block</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-table</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-table-row</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-table-cell</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-print-inline-flex</code></li>
|
||||
</ul>
|
||||
|
||||
<p>The print and display classes can be combined.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-print-none">Screen Only (Hide on print only)</div>
|
||||
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
|
||||
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-print-none"</span><span class="nt">></span>Screen Only (Hide on print only)<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-print-block"</span><span class="nt">></span>Print Only (Hide on screen only)<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-none d-lg-block d-print-block"</span><span class="nt">></span>Hide up to large on screen, but always show on print<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
533
docs/4.2/utilities/embed/index.html
Normal file
533
docs/4.2/utilities/embed/index.html
Normal file
@@ -0,0 +1,533 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Embeds · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Embeds">
|
||||
<meta name="twitter:description" content="Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/embed/">
|
||||
<meta property="og:title" content="Embeds">
|
||||
<meta property="og:description" content="Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></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="#about">About</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#aspect-ratios">Aspect ratios</a></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">Embeds</h1>
|
||||
<p class="bd-lead">Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="about">About</h2>
|
||||
|
||||
<p>Rules are directly applied to <code class="highlighter-rouge"><iframe></code>, <code class="highlighter-rouge"><embed></code>, <code class="highlighter-rouge"><video></code>, and <code class="highlighter-rouge"><object></code> elements; optionally use an explicit descendant class <code class="highlighter-rouge">.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
|
||||
|
||||
<p><strong>Pro-Tip!</strong> You don’t need to include <code class="highlighter-rouge">frameborder="0"</code> in your <code class="highlighter-rouge"><iframe></code>s as we override that for you.</p>
|
||||
|
||||
<h2 id="example">Example</h2>
|
||||
|
||||
<p>Wrap any embed like an <code class="highlighter-rouge"><iframe></code> in a parent element with <code class="highlighter-rouge">.embed-responsive</code> and an aspect ratio. The <code class="highlighter-rouge">.embed-responsive-item</code> isn’t strictly required, but we encourage it.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-16by9"</span><span class="nt">></span>
|
||||
<span class="nt"><iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"https://www.youtube.com/embed/zpOULjyy-n8?rel=0"</span> <span class="na">allowfullscreen</span><span class="nt">></iframe></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="aspect-ratios">Aspect ratios</h2>
|
||||
|
||||
<p>Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- 21:9 aspect ratio --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-21by9"</span><span class="nt">></span>
|
||||
<span class="nt"><iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">></iframe></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- 16:9 aspect ratio --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-16by9"</span><span class="nt">></span>
|
||||
<span class="nt"><iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">></iframe></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- 4:3 aspect ratio --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-4by3"</span><span class="nt">></span>
|
||||
<span class="nt"><iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">></iframe></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- 1:1 aspect ratio --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"embed-responsive embed-responsive-1by1"</span><span class="nt">></span>
|
||||
<span class="nt"><iframe</span> <span class="na">class=</span><span class="s">"embed-responsive-item"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">></iframe></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Within <code class="highlighter-rouge">_variables.scss</code>, you can change the aspect ratios you want to use. Here’s an example of the <code class="highlighter-rouge">$embed-responsive-aspect-ratios</code> list:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$embed-responsive-aspect-ratios</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="p">(</span><span class="m">21</span> <span class="m">9</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">(</span><span class="m">16</span> <span class="m">9</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">(</span><span class="m">3</span> <span class="m">4</span><span class="p">)</span><span class="o">,</span>
|
||||
<span class="p">(</span><span class="m">1</span> <span class="m">1</span><span class="p">)</span>
|
||||
<span class="p">)</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1291
docs/4.2/utilities/flex/index.html
Normal file
1291
docs/4.2/utilities/flex/index.html
Normal file
File diff suppressed because it is too large
Load Diff
547
docs/4.2/utilities/float/index.html
Normal file
547
docs/4.2/utilities/float/index.html
Normal file
@@ -0,0 +1,547 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Toggle floats on any element, across any breakpoint, using our responsive float utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Float · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Float">
|
||||
<meta name="twitter:description" content="Toggle floats on any element, across any breakpoint, using our responsive float utilities.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/float/">
|
||||
<meta property="og:title" content="Float">
|
||||
<meta property="og:description" content="Toggle floats on any element, across any breakpoint, using our responsive float utilities.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></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="#overview">Overview</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></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">Float</h1>
|
||||
<p class="bd-lead">Toggle floats on any element, across any breakpoint, using our responsive float utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="overview">Overview</h2>
|
||||
|
||||
<p>These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">CSS <code class="highlighter-rouge">float</code> property</a>. <code class="highlighter-rouge">!important</code> is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no affect on flex items.</p>
|
||||
|
||||
<h2 id="classes">Classes</h2>
|
||||
|
||||
<p>Toggle a float with a class:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="float-left">Float left on all viewport sizes</div><br />
|
||||
<div class="float-right">Float right on all viewport sizes</div><br />
|
||||
<div class="float-none">Don't float on all viewport sizes</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"float-left"</span><span class="nt">></span>Float left on all viewport sizes<span class="nt"></div><br></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"float-right"</span><span class="nt">></span>Float right on all viewport sizes<span class="nt"></div><br></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"float-none"</span><span class="nt">></span>Don't float on all viewport sizes<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="mixins">Mixins</h2>
|
||||
|
||||
<p>Or by Sass mixin:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.element</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">float-left</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nc">.another-element</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">float-right</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nc">.one-more</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">float-none</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<h2 id="responsive">Responsive</h2>
|
||||
|
||||
<p>Responsive variations also exist for each <code class="highlighter-rouge">float</code> value.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br />
|
||||
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br />
|
||||
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br />
|
||||
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br />
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"float-sm-left"</span><span class="nt">></span>Float left on viewports sized SM (small) or wider<span class="nt"></div><br></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"float-md-left"</span><span class="nt">></span>Float left on viewports sized MD (medium) or wider<span class="nt"></div><br></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"float-lg-left"</span><span class="nt">></span>Float left on viewports sized LG (large) or wider<span class="nt"></div><br></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"float-xl-left"</span><span class="nt">></span>Float left on viewports sized XL (extra-large) or wider<span class="nt"></div><br></span></code></pre></figure>
|
||||
|
||||
<p>Here are all the support classes;</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.float-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-none</code></li>
|
||||
<li><code class="highlighter-rouge">.float-sm-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-sm-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-sm-none</code></li>
|
||||
<li><code class="highlighter-rouge">.float-md-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-md-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-md-none</code></li>
|
||||
<li><code class="highlighter-rouge">.float-lg-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-lg-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-lg-none</code></li>
|
||||
<li><code class="highlighter-rouge">.float-xl-left</code></li>
|
||||
<li><code class="highlighter-rouge">.float-xl-right</code></li>
|
||||
<li><code class="highlighter-rouge">.float-xl-none</code></li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
502
docs/4.2/utilities/image-replacement/index.html
Normal file
502
docs/4.2/utilities/image-replacement/index.html
Normal file
@@ -0,0 +1,502 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Swap text for background images with the image replacement class.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Image replacement · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Image replacement">
|
||||
<meta name="twitter:description" content="Swap text for background images with the image replacement class.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/image-replacement/">
|
||||
<meta property="og:title" content="Image replacement">
|
||||
<meta property="og:description" content="Swap text for background images with the image replacement class.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
</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">Image replacement</h1>
|
||||
<p class="bd-lead">Swap text for background images with the image replacement class.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
|
||||
<div class="bd-callout bd-callout-warning">
|
||||
<h5 id="warning">Warning</h5>
|
||||
|
||||
<p>The <code class="highlighter-rouge">text-hide()</code> class and mixin has been deprecated as of v4.1. It will be removed entirely in v5.</p>
|
||||
</div>
|
||||
|
||||
<p>Utilize the <code class="highlighter-rouge">.text-hide</code> class or mixin to help replace an element’s text content with a background image.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"text-hide"</span><span class="nt">></span>Custom heading<span class="nt"></h1></span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Usage as a mixin</span>
|
||||
<span class="nc">.heading</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">text-hide</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.text-hide</code> class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a <code class="highlighter-rouge">background-image</code> instead of text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<h1 class="text-hide" style="background-image: url('/docs/4.2/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"text-hide"</span> <span class="na">style=</span><span class="s">"background-image: url('..');"</span><span class="nt">></span>Bootstrap<span class="nt"></h1></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
11
docs/4.2/utilities/index.html
Normal file
11
docs/4.2/utilities/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting…</title>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.2/utilities/borders/">
|
||||
<script>location="https://getbootstrap.com/docs/4.2/utilities/borders/"</script>
|
||||
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.2/utilities/borders/">
|
||||
<meta name="robots" content="noindex">
|
||||
<h1>Redirecting…</h1>
|
||||
<a href="https://getbootstrap.com/docs/4.2/utilities/borders/">Click here if you are not redirected.</a>
|
||||
</html>
|
||||
493
docs/4.2/utilities/overflow/index.html
Normal file
493
docs/4.2/utilities/overflow/index.html
Normal file
@@ -0,0 +1,493 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use these shorthand utilities for quickly configuring how content overflows an element.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Overflow · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Overflow">
|
||||
<meta name="twitter:description" content="Use these shorthand utilities for quickly configuring how content overflows an element.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/overflow/">
|
||||
<meta property="og:title" content="Overflow">
|
||||
<meta property="og:description" content="Use these shorthand utilities for quickly configuring how content overflows an element.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
</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">Overflow</h1>
|
||||
<p class="bd-lead">Use these shorthand utilities for quickly configuring how content overflows an element.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Barebones <code class="highlighter-rouge">overflow</code> functionality is provided for two values by default, and they are not responsive.</p>
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
|
||||
</div>
|
||||
<div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 100px;">
|
||||
This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"overflow-auto"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"overflow-hidden"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Using Sass variables, you may customize the overflow utilities by changing the <code class="highlighter-rouge">$overflows</code> variable in <code class="highlighter-rouge">_variables.scss</code>.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
512
docs/4.2/utilities/position/index.html
Normal file
512
docs/4.2/utilities/position/index.html
Normal file
@@ -0,0 +1,512 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use these shorthand utilities for quickly configuring the position of an element.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Position · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Position">
|
||||
<meta name="twitter:description" content="Use these shorthand utilities for quickly configuring the position of an element.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/position/">
|
||||
<meta property="og:title" content="Position">
|
||||
<meta property="og:description" content="Use these shorthand utilities for quickly configuring the position of an element.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></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="#common-values">Common values</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#fixed-top">Fixed top</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#fixed-bottom">Fixed bottom</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sticky-top">Sticky top</a></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">Position</h1>
|
||||
<p class="bd-lead">Use these shorthand utilities for quickly configuring the position of an element.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="common-values">Common values</h2>
|
||||
|
||||
<p>Quick positioning classes are available, though they are not responsive.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"position-static"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"position-relative"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"position-absolute"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"position-fixed"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"position-sticky"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="fixed-top">Fixed top</h2>
|
||||
|
||||
<p>Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"fixed-top"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="fixed-bottom">Fixed bottom</h2>
|
||||
|
||||
<p>Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"fixed-bottom"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="sticky-top">Sticky top</h2>
|
||||
|
||||
<p>Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The <code class="highlighter-rouge">.sticky-top</code> utility uses CSS’s <code class="highlighter-rouge">position: sticky</code>, which isn’t fully supported in all browsers.</p>
|
||||
|
||||
<p><strong>IE11 and IE10 will render <code class="highlighter-rouge">position: sticky</code> as <code class="highlighter-rouge">position: relative</code>.</strong> As such, we wrap the styles in a <code class="highlighter-rouge">@supports</code> query, limiting the stickiness to only browsers that can render it properly.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"sticky-top"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
490
docs/4.2/utilities/screenreaders/index.html
Normal file
490
docs/4.2/utilities/screenreaders/index.html
Normal file
@@ -0,0 +1,490 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use screenreader utilities to hide elements on all devices except screen readers.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Screenreaders · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Screenreaders">
|
||||
<meta name="twitter:description" content="Use screenreader utilities to hide elements on all devices except screen readers.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/screenreaders/">
|
||||
<meta property="og:title" content="Screenreaders">
|
||||
<meta property="og:description" content="Use screenreader utilities to hide elements on all devices except screen readers.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
</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">Screenreaders</h1>
|
||||
<p class="bd-lead">Use screenreader utilities to hide elements on all devices except screen readers.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Hide an element to all devices <strong>except screen readers</strong> with <code class="highlighter-rouge">.sr-only</code>. Combine <code class="highlighter-rouge">.sr-only</code> with <code class="highlighter-rouge">.sr-only-focusable</code> to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.</p>
|
||||
<div class="bd-example">
|
||||
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">class=</span><span class="s">"sr-only sr-only-focusable"</span> <span class="na">href=</span><span class="s">"#content"</span><span class="nt">></span>Skip to main content<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Usage as a mixin</span>
|
||||
<span class="nc">.skip-navigation</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">sr-only</span><span class="p">;</span>
|
||||
<span class="k">@include</span> <span class="nd">sr-only-focusable</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
488
docs/4.2/utilities/shadows/index.html
Normal file
488
docs/4.2/utilities/shadows/index.html
Normal file
@@ -0,0 +1,488 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Add or remove shadows to elements with box-shadow utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Shadows · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Shadows">
|
||||
<meta name="twitter:description" content="Add or remove shadows to elements with box-shadow utilities.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/shadows/">
|
||||
<meta property="og:title" content="Shadows">
|
||||
<meta property="og:description" content="Add or remove shadows to elements with box-shadow utilities.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</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">Shadows</h1>
|
||||
<p class="bd-lead">Add or remove shadows to elements with box-shadow utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>While shadows on components are disabled by default in Bootstrap and can be enabled via <code class="highlighter-rouge">$enable-shadows</code>, you can also quickly add or remove a shadow with our <code class="highlighter-rouge">box-shadow</code> utility classes. Includes support for <code class="highlighter-rouge">.shadow-none</code> and three default sizes (which have associated variables to match).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
|
||||
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
|
||||
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
|
||||
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow-none p-3 mb-5 bg-light rounded"</span><span class="nt">></span>No shadow<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow-sm p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Small shadow<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Regular shadow<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"shadow-lg p-3 mb-5 bg-white rounded"</span><span class="nt">></span>Larger shadow<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
539
docs/4.2/utilities/sizing/index.html
Normal file
539
docs/4.2/utilities/sizing/index.html
Normal file
@@ -0,0 +1,539 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Easily make an element as wide or as tall with our width and height utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Sizing · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Sizing">
|
||||
<meta name="twitter:description" content="Easily make an element as wide or as tall with our width and height utilities.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/sizing/">
|
||||
<meta property="og:title" content="Sizing">
|
||||
<meta property="og:description" content="Easily make an element as wide or as tall with our width and height utilities.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></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="#relative-to-the-parent">Relative to the parent</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#relative-to-the-viewport">Relative to the viewport</a></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">Sizing</h1>
|
||||
<p class="bd-lead">Easily make an element as wide or as tall with our width and height utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="relative-to-the-parent">Relative to the parent</h2>
|
||||
|
||||
<p>Width and height utilities are generated from the <code class="highlighter-rouge">$sizes</code> Sass map in <code class="highlighter-rouge">_variables.scss</code>. Includes support for <code class="highlighter-rouge">25%</code>, <code class="highlighter-rouge">50%</code>, <code class="highlighter-rouge">75%</code>, <code class="highlighter-rouge">100%</code>, and <code class="highlighter-rouge">auto</code> by default. Modify those values as you need to generate different utilities here.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
|
||||
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
|
||||
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
|
||||
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
|
||||
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-25 p-3"</span> <span class="na">style=</span><span class="s">"background-color: #eee;"</span><span class="nt">></span>Width 25%<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-50 p-3"</span> <span class="na">style=</span><span class="s">"background-color: #eee;"</span><span class="nt">></span>Width 50%<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-75 p-3"</span> <span class="na">style=</span><span class="s">"background-color: #eee;"</span><span class="nt">></span>Width 75%<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-100 p-3"</span> <span class="na">style=</span><span class="s">"background-color: #eee;"</span><span class="nt">></span>Width 100%<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-auto p-3"</span> <span class="na">style=</span><span class="s">"background-color: #eee;"</span><span class="nt">></span>Width auto<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
|
||||
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
|
||||
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
|
||||
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
|
||||
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
|
||||
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">style=</span><span class="s">"height: 100px; background-color: rgba(255,0,0,0.1);"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"h-25 d-inline-block"</span> <span class="na">style=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="nt">></span>Height 25%<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"h-50 d-inline-block"</span> <span class="na">style=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="nt">></span>Height 50%<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"h-75 d-inline-block"</span> <span class="na">style=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="nt">></span>Height 75%<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"h-100 d-inline-block"</span> <span class="na">style=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="nt">></span>Height 100%<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"h-auto d-inline-block"</span> <span class="na">style=</span><span class="s">"width: 120px; background-color: rgba(0,0,255,.1)"</span><span class="nt">></span>Height auto<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>You can also use <code class="highlighter-rouge">max-width: 100%;</code> and <code class="highlighter-rouge">max-height: 100%;</code> utilities as needed.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<svg class="bd-placeholder-img mw-100" width="100%" height="100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Max-width 100%"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%" /><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Max-width 100%</text></svg>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"mw-100"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<div class="bd-example">
|
||||
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
|
||||
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">style=</span><span class="s">"height: 100px; background-color: rgba(255,0,0,0.1);"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mh-100"</span> <span class="na">style=</span><span class="s">"width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);"</span><span class="nt">></span>Max-height 100%<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h2 id="relative-to-the-viewport">Relative to the viewport</h2>
|
||||
|
||||
<p>You can also use utilities to set the width and height relative to the viewport.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"min-vw-100"</span><span class="nt">></span>Min-width 100vw<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"min-vh-100"</span><span class="nt">></span>Min-height 100vh<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vw-100"</span><span class="nt">></span>Width 100vw<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"vh-100"</span><span class="nt">></span>Height 100vh<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
587
docs/4.2/utilities/spacing/index.html
Normal file
587
docs/4.2/utilities/spacing/index.html
Normal file
@@ -0,0 +1,587 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Spacing · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Spacing">
|
||||
<meta name="twitter:description" content="Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/spacing/">
|
||||
<meta property="og:title" content="Spacing">
|
||||
<meta property="og:description" content="Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></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="#how-it-works">How it works</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#notation">Notation</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#horizontal-centering">Horizontal centering</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#negative-margin">Negative margin</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">Spacing</h1>
|
||||
<p class="bd-lead">Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="how-it-works">How it works</h2>
|
||||
|
||||
<p>Assign responsive-friendly <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from <code class="highlighter-rouge">.25rem</code> to <code class="highlighter-rouge">3rem</code>.</p>
|
||||
|
||||
<h2 id="notation">Notation</h2>
|
||||
|
||||
<p>Spacing utilities that apply to all breakpoints, from <code class="highlighter-rouge">xs</code> to <code class="highlighter-rouge">xl</code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code class="highlighter-rouge">min-width: 0</code> and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
|
||||
|
||||
<p>The classes are named using the format <code class="highlighter-rouge">{property}{sides}-{size}</code> for <code class="highlighter-rouge">xs</code> and <code class="highlighter-rouge">{property}{sides}-{breakpoint}-{size}</code> for <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>.</p>
|
||||
|
||||
<p>Where <em>property</em> is one of:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">m</code> - for classes that set <code class="highlighter-rouge">margin</code></li>
|
||||
<li><code class="highlighter-rouge">p</code> - for classes that set <code class="highlighter-rouge">padding</code></li>
|
||||
</ul>
|
||||
|
||||
<p>Where <em>sides</em> is one of:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">t</code> - for classes that set <code class="highlighter-rouge">margin-top</code> or <code class="highlighter-rouge">padding-top</code></li>
|
||||
<li><code class="highlighter-rouge">b</code> - for classes that set <code class="highlighter-rouge">margin-bottom</code> or <code class="highlighter-rouge">padding-bottom</code></li>
|
||||
<li><code class="highlighter-rouge">l</code> - for classes that set <code class="highlighter-rouge">margin-left</code> or <code class="highlighter-rouge">padding-left</code></li>
|
||||
<li><code class="highlighter-rouge">r</code> - for classes that set <code class="highlighter-rouge">margin-right</code> or <code class="highlighter-rouge">padding-right</code></li>
|
||||
<li><code class="highlighter-rouge">x</code> - for classes that set both <code class="highlighter-rouge">*-left</code> and <code class="highlighter-rouge">*-right</code></li>
|
||||
<li><code class="highlighter-rouge">y</code> - for classes that set both <code class="highlighter-rouge">*-top</code> and <code class="highlighter-rouge">*-bottom</code></li>
|
||||
<li>blank - for classes that set a <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> on all 4 sides of the element</li>
|
||||
</ul>
|
||||
|
||||
<p>Where <em>size</em> is one of:</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">0</code> - for classes that eliminate the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> by setting it to <code class="highlighter-rouge">0</code></li>
|
||||
<li><code class="highlighter-rouge">1</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * .25</code></li>
|
||||
<li><code class="highlighter-rouge">2</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * .5</code></li>
|
||||
<li><code class="highlighter-rouge">3</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer</code></li>
|
||||
<li><code class="highlighter-rouge">4</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * 1.5</code></li>
|
||||
<li><code class="highlighter-rouge">5</code> - (by default) for classes that set the <code class="highlighter-rouge">margin</code> or <code class="highlighter-rouge">padding</code> to <code class="highlighter-rouge">$spacer * 3</code></li>
|
||||
<li><code class="highlighter-rouge">auto</code> - for classes that set the <code class="highlighter-rouge">margin</code> to auto</li>
|
||||
</ul>
|
||||
|
||||
<p>(You can add more sizes by adding entries to the <code class="highlighter-rouge">$spacers</code> Sass map variable.)</p>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
|
||||
<p>Here are some representative examples of these classes:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.mt-0</span> <span class="p">{</span>
|
||||
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.ml-1</span> <span class="p">{</span>
|
||||
<span class="nl">margin-left</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="mi">.25</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.px-2</span> <span class="p">{</span>
|
||||
<span class="nl">padding-left</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
|
||||
<span class="nl">padding-right</span><span class="p">:</span> <span class="p">(</span><span class="nv">$spacer</span> <span class="o">*</span> <span class="mi">.5</span><span class="p">)</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.p-3</span> <span class="p">{</span>
|
||||
<span class="nl">padding</span><span class="p">:</span> <span class="nv">$spacer</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<h3 id="horizontal-centering">Horizontal centering</h3>
|
||||
|
||||
<p>Additionally, Bootstrap also includes an <code class="highlighter-rouge">.mx-auto</code> class for horizontally centering fixed-width block level content—that is, content that has <code class="highlighter-rouge">display: block</code> and a <code class="highlighter-rouge">width</code> set—by setting the horizontal margins to <code class="highlighter-rouge">auto</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
|
||||
Centered element
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"mx-auto"</span> <span class="na">style=</span><span class="s">"width: 200px;"</span><span class="nt">></span>
|
||||
Centered element
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<h3 id="negative-margin">Negative margin</h3>
|
||||
|
||||
<p>In CSS, <code class="highlighter-rouge">margin</code> properties can utilize negative values (<code class="highlighter-rouge">padding</code> cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., <code class="highlighter-rouge">1</code>, <code class="highlighter-rouge">2</code>, <code class="highlighter-rouge">3</code>, <code class="highlighter-rouge">4</code>, <code class="highlighter-rouge">5</code>). These utilities are ideal for customizing grid column gutters across breakpoints.</p>
|
||||
|
||||
<p>The syntax is nearly the same as the default, positive margin utilities, but with the addition of <code class="highlighter-rouge">n</code> before the requested size. Here’s an example class that’s the opposite of <code class="highlighter-rouge">.mt-1</code>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.mt-n1</span> <span class="p">{</span>
|
||||
<span class="nl">margin-top</span><span class="p">:</span> <span class="m">-0</span><span class="mi">.25rem</span> <span class="o">!</span><span class="n">important</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>Here’s an example of customizing the Bootstrap grid at the medium (<code class="highlighter-rouge">md</code>) breakpoint and above. We’ve increased the <code class="highlighter-rouge">.col</code> padding with <code class="highlighter-rouge">.px-md-5</code> and then counteracted that with <code class="highlighter-rouge">.mx-md-n5</code> on the parent <code class="highlighter-rouge">.row</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="row mx-md-n5">
|
||||
<div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
|
||||
<div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row mx-md-n5"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col py-3 px-md-5 border bg-light"</span><span class="nt">></span>Custom column padding<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col py-3 px-md-5 border bg-light"</span><span class="nt">></span>Custom column padding<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
631
docs/4.2/utilities/text/index.html
Normal file
631
docs/4.2/utilities/text/index.html
Normal file
@@ -0,0 +1,631 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Text · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Text">
|
||||
<meta name="twitter:description" content="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/text/">
|
||||
<meta property="og:title" content="Text">
|
||||
<meta property="og:description" content="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></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="#text-alignment">Text alignment</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#text-wrapping-and-overflow">Text wrapping and overflow</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#text-transform">Text transform</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#font-weight-and-italics">Font weight and italics</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#monospace">Monospace</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#reset-color">Reset color</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#text-decoration">Text decoration</a></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">Text</h1>
|
||||
<p class="bd-lead">Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="text-alignment">Text alignment</h2>
|
||||
|
||||
<p>Easily realign text to components with text alignment classes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-justify"</span><span class="nt">></span>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<p>For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="text-left">Left aligned text on all viewport sizes.</p>
|
||||
<p class="text-center">Center aligned text on all viewport sizes.</p>
|
||||
<p class="text-right">Right aligned text on all viewport sizes.</p>
|
||||
|
||||
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
|
||||
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
|
||||
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
|
||||
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-left"</span><span class="nt">></span>Left aligned text on all viewport sizes.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">></span>Center aligned text on all viewport sizes.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-right"</span><span class="nt">></span>Right aligned text on all viewport sizes.<span class="nt"></p></span>
|
||||
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-sm-left"</span><span class="nt">></span>Left aligned text on viewports sized SM (small) or wider.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-md-left"</span><span class="nt">></span>Left aligned text on viewports sized MD (medium) or wider.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-lg-left"</span><span class="nt">></span>Left aligned text on viewports sized LG (large) or wider.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-xl-left"</span><span class="nt">></span>Left aligned text on viewports sized XL (extra-large) or wider.<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<h2 id="text-wrapping-and-overflow">Text wrapping and overflow</h2>
|
||||
|
||||
<p>Wrap text with a <code class="highlighter-rouge">.text-wrap</code> class.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="badge badge-primary text-wrap" style="width: 6rem;">
|
||||
This text should wrap.
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"badge badge-primary text-wrap"</span> <span class="na">style=</span><span class="s">"width: 6rem;"</span><span class="nt">></span>
|
||||
This text should wrap.
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Prevent text from wrapping with a <code class="highlighter-rouge">.text-nowrap</code> class.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="text-nowrap bd-highlight" style="width: 8rem;">
|
||||
This text should overflow the parent.
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"text-nowrap bd-highlight"</span> <span class="na">style=</span><span class="s">"width: 8rem;"</span><span class="nt">></span>
|
||||
This text should overflow the parent.
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>For longer content, you can add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis. <strong>Requires <code class="highlighter-rouge">display: inline-block</code> or <code class="highlighter-rouge">display: block</code>.</strong></p>
|
||||
|
||||
<div class="bd-example">
|
||||
<!-- Block level -->
|
||||
<div class="row">
|
||||
<div class="col-2 text-truncate">
|
||||
Praeterea iter est quasdam res quas ex communi.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inline level -->
|
||||
<span class="d-inline-block text-truncate" style="max-width: 150px;">
|
||||
Praeterea iter est quasdam res quas ex communi.
|
||||
</span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Block level --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-2 text-truncate"</span><span class="nt">></span>
|
||||
Praeterea iter est quasdam res quas ex communi.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- Inline level --></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"d-inline-block text-truncate"</span> <span class="na">style=</span><span class="s">"max-width: 150px;"</span><span class="nt">></span>
|
||||
Praeterea iter est quasdam res quas ex communi.
|
||||
<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<h2 id="text-transform">Text transform</h2>
|
||||
|
||||
<p>Transform text in components with text capitalization classes.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="text-lowercase">Lowercased text.</p>
|
||||
<p class="text-uppercase">Uppercased text.</p>
|
||||
<p class="text-capitalize">CapiTaliZed text.</p>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-lowercase"</span><span class="nt">></span>Lowercased text.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-uppercase"</span><span class="nt">></span>Uppercased text.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-capitalize"</span><span class="nt">></span>CapiTaliZed text.<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<p>Note how <code class="highlighter-rouge">.text-capitalize</code> only changes the first letter of each word, leaving the case of any other letters unaffected.</p>
|
||||
|
||||
<h2 id="font-weight-and-italics">Font weight and italics</h2>
|
||||
|
||||
<p>Quickly change the weight (boldness) of text or italicize text.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="font-weight-bold">Bold text.</p>
|
||||
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
|
||||
<p class="font-weight-normal">Normal weight text.</p>
|
||||
<p class="font-weight-light">Light weight text.</p>
|
||||
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
|
||||
<p class="font-italic">Italic text.</p>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-bold"</span><span class="nt">></span>Bold text.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-bolder"</span><span class="nt">></span>Bolder weight text (relative to the parent element).<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-normal"</span><span class="nt">></span>Normal weight text.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-light"</span><span class="nt">></span>Light weight text.<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-weight-lighter"</span><span class="nt">></span>Lighter weight text (relative to the parent element).<span class="nt"></p></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"font-italic"</span><span class="nt">></span>Italic text.<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<h2 id="monospace">Monospace</h2>
|
||||
|
||||
<p>Change a selection to our monospace font stack with <code class="highlighter-rouge">.text-monospace</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="text-monospace">This is in monospace</p>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-monospace"</span><span class="nt">></span>This is in monospace<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<h2 id="reset-color">Reset color</h2>
|
||||
|
||||
<p>Reset a text or link’s color with <code class="highlighter-rouge">.text-reset</code>, so that it inherits the color from its parent.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<p class="text-muted">
|
||||
Muted text with a <a href="#" class="text-reset">reset link</a>.
|
||||
</p>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>
|
||||
Muted text with a <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-reset"</span><span class="nt">></span>reset link<span class="nt"></a></span>.
|
||||
<span class="nt"></p></span></code></pre></figure>
|
||||
|
||||
<h2 id="text-decoration">Text decoration</h2>
|
||||
|
||||
<p>Remove a text decoration with a <code class="highlighter-rouge">.text-decoration-none</code> class.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<a href="#" class="text-decoration-none">Non-underlined link</a>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-decoration-none"</span><span class="nt">></span>Non-underlined link<span class="nt"></a></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
523
docs/4.2/utilities/vertical-align/index.html
Normal file
523
docs/4.2/utilities/vertical-align/index.html
Normal file
@@ -0,0 +1,523 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Vertical alignment · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Vertical alignment">
|
||||
<meta name="twitter:description" content="Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/vertical-align/">
|
||||
<meta property="og:title" content="Vertical alignment">
|
||||
<meta property="og:description" content="Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</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">Vertical alignment</h1>
|
||||
<p class="bd-lead">Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Change the alignment of elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align"><code class="highlighter-rouge">vertical-alignment</code></a> utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.</p>
|
||||
|
||||
<p>Choose from <code class="highlighter-rouge">.align-baseline</code>, <code class="highlighter-rouge">.align-top</code>, <code class="highlighter-rouge">.align-middle</code>, <code class="highlighter-rouge">.align-bottom</code>, <code class="highlighter-rouge">.align-text-bottom</code>, and <code class="highlighter-rouge">.align-text-top</code> as needed.</p>
|
||||
|
||||
<p>With inline elements:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<span class="align-baseline">baseline</span>
|
||||
<span class="align-top">top</span>
|
||||
<span class="align-middle">middle</span>
|
||||
<span class="align-bottom">bottom</span>
|
||||
<span class="align-text-top">text-top</span>
|
||||
<span class="align-text-bottom">text-bottom</span>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><span</span> <span class="na">class=</span><span class="s">"align-baseline"</span><span class="nt">></span>baseline<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"align-top"</span><span class="nt">></span>top<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"align-middle"</span><span class="nt">></span>middle<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"align-bottom"</span><span class="nt">></span>bottom<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"align-text-top"</span><span class="nt">></span>text-top<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"align-text-bottom"</span><span class="nt">></span>text-bottom<span class="nt"></span></span></code></pre></figure>
|
||||
|
||||
<p>With table cells:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<table style="height: 100px;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="align-baseline">baseline</td>
|
||||
<td class="align-top">top</td>
|
||||
<td class="align-middle">middle</td>
|
||||
<td class="align-bottom">bottom</td>
|
||||
<td class="align-text-top">text-top</td>
|
||||
<td class="align-text-bottom">text-bottom</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><table</span> <span class="na">style=</span><span class="s">"height: 100px;"</span><span class="nt">></span>
|
||||
<span class="nt"><tbody></span>
|
||||
<span class="nt"><tr></span>
|
||||
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"align-baseline"</span><span class="nt">></span>baseline<span class="nt"></td></span>
|
||||
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"align-top"</span><span class="nt">></span>top<span class="nt"></td></span>
|
||||
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"align-middle"</span><span class="nt">></span>middle<span class="nt"></td></span>
|
||||
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"align-bottom"</span><span class="nt">></span>bottom<span class="nt"></td></span>
|
||||
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"align-text-top"</span><span class="nt">></span>text-top<span class="nt"></td></span>
|
||||
<span class="nt"><td</span> <span class="na">class=</span><span class="s">"align-text-bottom"</span><span class="nt">></span>text-bottom<span class="nt"></td></span>
|
||||
<span class="nt"></tr></span>
|
||||
<span class="nt"></tbody></span>
|
||||
<span class="nt"></table></span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
496
docs/4.2/utilities/visibility/index.html
Normal file
496
docs/4.2/utilities/visibility/index.html
Normal file
@@ -0,0 +1,496 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Control the visibility, without modifying the display, of elements with visibility utilities.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Visibility · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Visibility">
|
||||
<meta name="twitter:description" content="Control the visibility, without modifying the display, of elements with visibility utilities.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/utilities/visibility/">
|
||||
<meta property="og:title" content="Visibility">
|
||||
<meta property="og:description" content="Control the visibility, without modifying the display, of elements with visibility utilities.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/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">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</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="/" 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" role="img"><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="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</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.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" 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" role="img"><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/getbootstrap" 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" role="img"><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" 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 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-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">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" data-docs-version="4.2">
|
||||
<button class="btn 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 navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false" role="img"><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="/docs/4.2/getting-started/introduction/">
|
||||
Getting started
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/getting-started/introduction/">
|
||||
Introduction
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/download/">
|
||||
Download
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/contents/">
|
||||
Contents
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/browsers-devices/">
|
||||
Browsers & devices
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/javascript/">
|
||||
JavaScript
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/theming/">
|
||||
Theming
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/build-tools/">
|
||||
Build tools
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/webpack/">
|
||||
Webpack
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/getting-started/accessibility/">
|
||||
Accessibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/layout/overview/">
|
||||
Layout
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/layout/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/grid/">
|
||||
Grid
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/layout/utilities-for-layout/">
|
||||
Utilities for layout
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/content/reboot/">
|
||||
Content
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/content/reboot/">
|
||||
Reboot
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/typography/">
|
||||
Typography
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/code/">
|
||||
Code
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/images/">
|
||||
Images
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/tables/">
|
||||
Tables
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/content/figures/">
|
||||
Figures
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/components/alerts/">
|
||||
Components
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/components/alerts/">
|
||||
Alerts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/badge/">
|
||||
Badge
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/breadcrumb/">
|
||||
Breadcrumb
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/buttons/">
|
||||
Buttons
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/button-group/">
|
||||
Button group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/card/">
|
||||
Card
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/carousel/">
|
||||
Carousel
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/collapse/">
|
||||
Collapse
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/dropdowns/">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/forms/">
|
||||
Forms
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/input-group/">
|
||||
Input group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/jumbotron/">
|
||||
Jumbotron
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/list-group/">
|
||||
List group
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/media-object/">
|
||||
Media object
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/modal/">
|
||||
Modal
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navs/">
|
||||
Navs
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/navbar/">
|
||||
Navbar
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/pagination/">
|
||||
Pagination
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/popovers/">
|
||||
Popovers
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/progress/">
|
||||
Progress
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/scrollspy/">
|
||||
Scrollspy
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/spinners/">
|
||||
Spinners
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/toasts/">
|
||||
Toasts
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/components/tooltips/">
|
||||
Tooltips
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.2/utilities/borders/">
|
||||
Utilities
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/utilities/borders/">
|
||||
Borders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/clearfix/">
|
||||
Clearfix
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/close-icon/">
|
||||
Close icon
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/colors/">
|
||||
Colors
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/display/">
|
||||
Display
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/embed/">
|
||||
Embed
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/flex/">
|
||||
Flex
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/float/">
|
||||
Float
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/image-replacement/">
|
||||
Image replacement
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/overflow/">
|
||||
Overflow
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/position/">
|
||||
Position
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/screenreaders/">
|
||||
Screenreaders
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/shadows/">
|
||||
Shadows
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/sizing/">
|
||||
Sizing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/spacing/">
|
||||
Spacing
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/text/">
|
||||
Text
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/utilities/vertical-align/">
|
||||
Vertical align
|
||||
</a>
|
||||
</li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.2/utilities/visibility/">
|
||||
Visibility
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/extend/approach/">
|
||||
Approach
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/extend/icons/">
|
||||
Icons
|
||||
</a>
|
||||
</li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/migration/">
|
||||
Migration
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.2/about/overview/">
|
||||
About
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.2/about/overview/">
|
||||
Overview
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/team/">
|
||||
Team
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/brand/">
|
||||
Brand
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/license/">
|
||||
License
|
||||
</a>
|
||||
</li><li>
|
||||
<a href="/docs/4.2/about/translations/">
|
||||
Translations
|
||||
</a>
|
||||
</li></ul>
|
||||
</div></nav>
|
||||
|
||||
</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">Visibility</h1>
|
||||
<p class="bd-lead">Control the visibility, without modifying the display, of elements with visibility utilities.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p>Set the <code class="highlighter-rouge">visibility</code> of elements with our visibility utilities. These utility classes do not modify the <code class="highlighter-rouge">display</code> value at all and do not affect layout – <code class="highlighter-rouge">.invisible</code> elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.</p>
|
||||
|
||||
<p>Apply <code class="highlighter-rouge">.visible</code> or <code class="highlighter-rouge">.invisible</code> as needed.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"visible"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invisible"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Class</span>
|
||||
<span class="nc">.visible</span> <span class="p">{</span>
|
||||
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">visible</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nc">.invisible</span> <span class="p">{</span>
|
||||
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// Usage as a mixin</span>
|
||||
<span class="nc">.element</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">visible</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nc">.element</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">invisible</span><span class="p">(</span><span class="nb">hidden</span><span class="p">);</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user