Use of BootstrapVue "About Bootstrap Tool Styles ----- Display"

BootstrapOfficial Production:BootstrapVueCheck it out on the official website

About tool styles,Official Documentation (Fast Gate)

About display, examples of common tool styles（Bootstrap Version>=v4）

• Regarding display, specify the type of rendered frame of the element,Official Documentation (Fast Gate), common are:
  Specified as an inline element

  1	<div class="d-inline">d-inline</div>

  Specified as a stream element

  1	<div class="d-flex">d-flex</div>

  The following definition can be found in _variables.scss, see the previous blog post on how to find this file:

  1	$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;

  Usage: The optional value of value is the category defined in scss above, and the optional value of breakpoint is sm,md,lg,xl, which means that it takes effect only in the case of {breakpoint}

  1 2	.d-{value} for xs .d-{breakpoint}-{value} for sm, md, lg, and xl.

  Examples are as follows:

  Render effect	Style
  Hide	.d-none
  Hide only if the screen size meets xs	.d-none .d-sm-block`
  Hide only if the screen size meets sm	.d-sm-none .d-md-block
  Hide only if the screen size meets xl	.d-xl-none
  Visible	.d-block
  Visible only if the screen size meets lg	.d-none .d-lg-block .d-xl-none

• Regarding the flex type in display, [Official Documentation (Fast Gate)] (https://getbootstrap.com/docs/4.3/utilities/flex/), common ones are:
  Specifies the container as the stream type

  1	<div class="d-flex">I'm a flexbox container!</div>

  Specifies the container unit as the stream type

  1	<div class="d-inline-flex">I'm an inline flexbox container!</div>

  Specify the flow direction for the flow type:

  1 2 3 4 5

  <div class="d-flex flex-row"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

  Usage: The optional value of value is row/column, if the direction is reversed, reverse is appended to the end of the style, and the optional value of breakpoint is sm,md,lg,xl, which means that it takes effect only in the case of {breakpoint}

  1 2	.flex-{value} for xs .flex-{breakpoint}-{value} for sm, md, lg, and xl.

  Examples are as follows:

  Render effect	Style
  Horizontal	.flex-row
  Reverse the horizontal	.flex-row-reverse
  Reverse the vertical direction	.flex-column-reverse
  Only vertically if the screen pixel size meets sm	.flex-sm-column
  Reverse vertical direction only if the screen pixel size meets sm	.flex-sm-column-reverse

  Specify the major axis (x-axis, y-axis direction) alignment for the stream type:
  Center alignment:

  1	<div class="d-flex justify-content-center">...</div>

  Usage: The optional value of value is start/end/center/between/around, and the optional value of breakpoint is sm,md,lg,xl, which means that it takes effect only when {breakpoint}

  1 2	.justify-content-{value} for xs .justify-content-{breakpoint}-{value} for sm, md, lg, and xl.

  Render effect	style
  Center align	.justify-content-center
  Only center align if the screen pixel size meets sm	.justify-content-sm-center

  Specify the cross-axis (x-axis, y-axis) alignment for the flow type:

  1	<div class="d-flex align-items-start">...</div>

  Usage: The optional value of value is start/end/center/baseline/stretch, and the optional value of breakpoint is sm,md,lg,xl, which means that it takes effect only when {breakpoint}

  1 2	.align-items-{value} for xs .align-items-{breakpoint}-{value} for sm, md, lg, and xl.

  Rendering effect	style
  Center align	.align-items-center
  Only center align if the screen pixel size meets sm	.align-items-sm-center

The commonly used display-related styles are written here for the time being.

---

• Next Post →

---

---