The use of BootstrapVue "About Bootstrap Tool Styles ----- Margin Correlation"

BootstrapOfficial Production:BootstrapVueCheck it out on the official website

About tool styles,Official Documentation (Fast Gate)

About margins,Official Documentation (Fast Gate)Examples of common tool styles（Bootstrap Version>=v4）

• marginMargins：
  The first sub-div is 0.25rem above and right margin, as follows

  1 2 3 4 5

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

• paddingPaddings：
  The first sub-div is 0.25rem from the lower left padding, as follows

  1 2 3 4 5

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

  Usage: The optional values of property are m/p for margin and padding, the optional values for sides are t/b/l/r/x/y for up/down/left/right/horizontal/vertical respectively, and the optional values for breakpoint are sm, md, lg, xl, which means to take effect in the case of breakpoint

  1 2	.{property}{sides}-{size} for xs .{property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

  The optional value of size is 0/1/2/3/4/5/auto, which can be found in _variables.scss, as shown below:**

  As can be seen from the picture, 0 corresponds to no margin, 1 corresponds to 0.25rem, 2 corresponds to 0.5rem, 3 corresponds to 1rem, 4 corresponds to 1.5rem, and 5 corresponds to 3rem
  While auto is defined directly in _spacing.scss under the utilities folder, auto is exclusive to margin, and padding is not supported

Commonly used margin-related styles, for the time being, I wrote here.

That’s all for the commonly used tool styles. For more information, please check out Official Documentation (Fast Gate)

---

• ← Previous Post
• Next Post →

---

---