Bootstrap 4 上的 属性 显示问题
Problems with the Display property on Bootstrap 4
我在 Bootstrap 4.3.1 上显示 属性 时遇到一些问题。这正在页面 ToyHou.se 上使用。我有一个 "kind of" 响应版本，其中包含一些小改动，使 xs 和 sm 上的阅读看起来不错。
这意味着我有这个崩溃的两个版本。在 "Color Palette" 上，我有一个用于 md 及以上 (A)，一个用于 xs 和 sm (B)。 A 版本工作正常。 B 版本似乎根本不起作用（在 767 像素或以下不显示任何内容）或使折叠变形。
我是显示器 属性 的新手，尽管我已经阅读了示例和指南，但我还是很难理解它是如何工作的。
我希望它看起来像什么： 额外的 small/small 版本会在另一张下面显示不同的卡片，居中。而中等以上会显示两行两张卡片和第三张一张卡片（就像编码一样）。
（请原谅我乱七八糟的编码，在 ToyHou.se 上你不能使用分隔的 css 除非你支付高级会员资格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FIDEO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="mx-auto w-100" style="font-size: 15px;">
<div class="row no-gutters table-responsive d-flex justify-content-center">
<!-- ACORDEON -->
<div class="accordion" id="accordion" style="width: 520px; margin: 10px 5px; display: block">
<div class="mark-palette">
<div class="text-uppercase" style="background: #8f49bb;">
<a class="btn rounded-0 text-white d-flex border-bottom-0 justify-content-between" data-toggle="collapse" data-target="#mark-palette" aria-expanded="false" aria-controls="mark-palette" style="font-size: 18px; cursor: pointer; border: 1px solid #762ea3;">Color Palette and Markings<i class="fas fa-palette fa-fw my-auto"></i></a>
</div>
<div class="collapse" data-parent="#accordion" id="mark-palette">
<div class="p-3 bg-faded table-responsive" style="height: 290px; border:1px solid #762ea3;">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;">Color Palette</p>
<!-- Blocked on SM because bugs -->
<div class="d-none d-sm-none d-md-block">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
<!-- Phone friendly version -->
<div class="d-none d-sm-none">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
</div>
<hr style="border-top: 2px solid rgba(0,0,0,.1);">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;">Markings</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus incidunt laborum ea, excepturi ducimus vel odio architecto eaque ipsum, soluta doloremque sint deserunt assumenda eos magnam rem distinctio exercitationem cupiditate.</p>
<p>| 1 | Lorem ipsum dolor sit amet.</p>
<p>| 2 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 4 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 5 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
将您的 phone 友好版本 class 更改为
<!-- Phone friendly version -->
<div class="d-sm-block d-md-none mx-auto">
...
</div>
之前您已经放置了 d-none 和 d-sm-none，这两个屏幕都隐藏了它。 mx-auto 是应用使元素居中的自动边距。
此外，将 w-100 class 添加到您的调色板 <p> 元素以保持其完整，宽度
<p style="font-weight: bold; font-size: 16px;" class="w-100">Color Palette</p>
这是工作示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FIDEO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="mx-auto w-100" style="font-size: 15px;">
<div class="row no-gutters table-responsive d-flex justify-content-center">
<!-- ACORDEON -->
<div class="accordion" id="accordion" style="width: 520px; margin: 10px 5px; display: block">
<div class="mark-palette">
<div class="text-uppercase" style="background: #8f49bb;">
<a class="btn rounded-0 text-white d-flex border-bottom-0 justify-content-between" data-toggle="collapse" data-target="#mark-palette" aria-expanded="false" aria-controls="mark-palette" style="font-size: 18px; cursor: pointer; border: 1px solid #762ea3;">Color
Palette and Markings<i class="fas fa-palette fa-fw my-auto"></i></a>
</div>
<div class="collapse" data-parent="#accordion" id="mark-palette">
<div class="p-3 bg-faded table-responsive" style="height: 290px; border:1px solid #762ea3;">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;" class="w-100">Color Palette</p>
<!-- Blocked on SM because bugs -->
<div class="d-none d-sm-none d-md-block">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
<!-- Phone friendly version -->
<div class="d-sm-block d-md-none mx-auto">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
</div>
<hr style="border-top: 2px solid rgba(0,0,0,.1);">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;">Markings</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus incidunt laborum ea, excepturi ducimus vel odio architecto eaque ipsum, soluta doloremque sint deserunt assumenda eos magnam rem distinctio exercitationem
cupiditate.
</p>
<p>| 1 | Lorem ipsum dolor sit amet.</p>
<p>| 2 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 4 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 5 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我在 Bootstrap 4.3.1 上显示 属性 时遇到一些问题。这正在页面 ToyHou.se 上使用。我有一个 "kind of" 响应版本，其中包含一些小改动，使 xs 和 sm 上的阅读看起来不错。
这意味着我有这个崩溃的两个版本。在 "Color Palette" 上，我有一个用于 md 及以上 (A)，一个用于 xs 和 sm (B)。 A 版本工作正常。 B 版本似乎根本不起作用（在 767 像素或以下不显示任何内容）或使折叠变形。
我是显示器 属性 的新手，尽管我已经阅读了示例和指南，但我还是很难理解它是如何工作的。
我希望它看起来像什么： 额外的 small/small 版本会在另一张下面显示不同的卡片，居中。而中等以上会显示两行两张卡片和第三张一张卡片（就像编码一样）。
（请原谅我乱七八糟的编码，在 ToyHou.se 上你不能使用分隔的 css 除非你支付高级会员资格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FIDEO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="mx-auto w-100" style="font-size: 15px;">
<div class="row no-gutters table-responsive d-flex justify-content-center">
<!-- ACORDEON -->
<div class="accordion" id="accordion" style="width: 520px; margin: 10px 5px; display: block">
<div class="mark-palette">
<div class="text-uppercase" style="background: #8f49bb;">
<a class="btn rounded-0 text-white d-flex border-bottom-0 justify-content-between" data-toggle="collapse" data-target="#mark-palette" aria-expanded="false" aria-controls="mark-palette" style="font-size: 18px; cursor: pointer; border: 1px solid #762ea3;">Color Palette and Markings<i class="fas fa-palette fa-fw my-auto"></i></a>
</div>
<div class="collapse" data-parent="#accordion" id="mark-palette">
<div class="p-3 bg-faded table-responsive" style="height: 290px; border:1px solid #762ea3;">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;">Color Palette</p>
<!-- Blocked on SM because bugs -->
<div class="d-none d-sm-none d-md-block">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
<!-- Phone friendly version -->
<div class="d-none d-sm-none">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
</div>
<hr style="border-top: 2px solid rgba(0,0,0,.1);">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;">Markings</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus incidunt laborum ea, excepturi ducimus vel odio architecto eaque ipsum, soluta doloremque sint deserunt assumenda eos magnam rem distinctio exercitationem cupiditate.</p>
<p>| 1 | Lorem ipsum dolor sit amet.</p>
<p>| 2 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 4 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 5 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
将您的 phone 友好版本 class 更改为
<!-- Phone friendly version -->
<div class="d-sm-block d-md-none mx-auto">
...
</div>
之前您已经放置了 d-none 和 d-sm-none，这两个屏幕都隐藏了它。 mx-auto 是应用使元素居中的自动边距。
此外，将 w-100 class 添加到您的调色板 <p> 元素以保持其完整，宽度
<p style="font-weight: bold; font-size: 16px;" class="w-100">Color Palette</p>
这是工作示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FIDEO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="mx-auto w-100" style="font-size: 15px;">
<div class="row no-gutters table-responsive d-flex justify-content-center">
<!-- ACORDEON -->
<div class="accordion" id="accordion" style="width: 520px; margin: 10px 5px; display: block">
<div class="mark-palette">
<div class="text-uppercase" style="background: #8f49bb;">
<a class="btn rounded-0 text-white d-flex border-bottom-0 justify-content-between" data-toggle="collapse" data-target="#mark-palette" aria-expanded="false" aria-controls="mark-palette" style="font-size: 18px; cursor: pointer; border: 1px solid #762ea3;">Color
Palette and Markings<i class="fas fa-palette fa-fw my-auto"></i></a>
</div>
<div class="collapse" data-parent="#accordion" id="mark-palette">
<div class="p-3 bg-faded table-responsive" style="height: 290px; border:1px solid #762ea3;">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;" class="w-100">Color Palette</p>
<!-- Blocked on SM because bugs -->
<div class="d-none d-sm-none d-md-block">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
<!-- Phone friendly version -->
<div class="d-sm-block d-md-none mx-auto">
<div class="mx-auto">
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #262424; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 1 | #262424 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #797979; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 90%">| 2 | #797979 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #eeeeee; color:#000; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 3 | #eeeeee |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #673388; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 4 | #673388 |</p>
</div>
</div>
<div class="d-flex">
<div class="card text-center rounded-0" style="background-color: #8f49bb; color:#fff; width: 230px; height: inherit; margin: 3px;">
<p class="my-auto text-uppercase" style="padding: 4px; opacity: 80%">| 5 | #8f49bb |</p>
</div>
</div>
</div>
</div>
</div>
<hr style="border-top: 2px solid rgba(0,0,0,.1);">
<div class="row no-gutters mb-2">
<p style="font-weight: bold; font-size: 16px;">Markings</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus incidunt laborum ea, excepturi ducimus vel odio architecto eaque ipsum, soluta doloremque sint deserunt assumenda eos magnam rem distinctio exercitationem
cupiditate.
</p>
<p>| 1 | Lorem ipsum dolor sit amet.</p>
<p>| 2 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 4 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>| 5 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>