सीमाएँ

कोनों तत्व कें सीमा आ सीमा-त्रिज्या कें जल्दी सं स्टाइल करय कें लेल सीमा उपयोगिताक कें उपयोग करूं. छवि, बटन, या कोनो अन्य तत्व के लेल बढ़िया।

इस पेज पर

बॉर्डर

कोनों तत्व कें सीमा जोड़य या हटावय कें लेल सीमा उपयोगिताक कें उपयोग करूं. सब सीमा मे स चुनू या एक-एक कए।

एडिटिव

कस्टम तत्व मे सीमा जोड़ू:

एचटीएमएल

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

घटाव वाला

अथवा सीमा हटाउ:

एचटीएमएल

<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>

रंग

हमर थीम रंग पर निर्मित उपयोगिताक उपयोग कए सीमा रंग बदलू।

एचटीएमएल

<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>

border-colorअथवा कोनो घटक क पूर्वनिर्धारित कए संशोधित करू :

ईमेल पता

खतरनाक हेडिंग

सीमा रंग आ चौड़ाई बदलब

एचटीएमएल

<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Dangerous heading
</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>

अस्पष्टता

v5.2.0 मे जोड़ा गेल

बूटस्ट्रैप border-{color}उपयोगिताक कें CSS चर कें उपयोग करयत Sass कें साथ जेनरेट करल गेलय छै. ई बिना संकलन आरू गतिशील अल्फा पारदर्शिता परिवर्तन के वास्तविक समय के रंग परिवर्तन के अनुमति दै छै.

कोना काज करैत अछि

हमर डिफ़ॉल्ट .border-successउपयोगिता पर विचार करू।

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

--bs-successहम अपनऽ (क मान के साथ ) CSS चर केरऽ एक RGB संस्करण के उपयोग करय छै आरू अल्फा पारदर्शिता के लेलऽ 25, 135, 84एक दोसरऽ CSS चर, , संलग्न करय छै ( एक स्थानीय CSS चर के बदौलत एक डिफ़ॉल्ट मान के साथ) । मतलब आब कोनो समय अहाँ उपयोग करब, अहाँक गणना मान अछि . प्रत्येक वर्ग कें अंदर स्थानीय CSS चर विरासत मुद्दाक सं बचयत छै अइ कें लेल उपयोगिताक कें नेस्टेड इंस्टेंस मे स्वचालित रूप सं संशोधित अल्फा पारदर्शिता नहि होयत छै.--bs-border-opacity1.border-successcolorrgba(25, 135, 84, 1).border-*

उदाहरण

ओहि अस्पष्टता केँ बदलबाक लेल, --bs-border-opacityकस्टम शैली अथवा इनलाइन शैली क माध्यम सँ ओवरराइड करू.

ई डिफ़ॉल्ट सफलता सीमा अछि

ई 50% अस्पष्टता सफलता सीमा अछि

एचटीएमएल

<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>

.border-opacityअथवा, कोनों उपयोगिता मे सं चुनू :

ई डिफ़ॉल्ट सफलता सीमा अछि

ई 75% अस्पष्टता सफलता सीमा अछि

ई 50% अस्पष्टता सफलता सीमा अछि

ई 25% अस्पष्टता सफलता सीमा अछि

ई 10% अस्पष्टता सफलता सीमा अछि

एचटीएमएल

<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>

चौड़ाई

एचटीएमएल

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

त्रिज्या

कोनो तत्व मे क्लास जोड़ू जाहि सँ ओकर कोन आसानी सँ गोल भ' सकय.

एचटीएमएल

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">

आकार के

पैघ या छोट गोल कोन कें लेल स्केलिंग क्लास कें उपयोग करूं. आकार सं 0, 5आ उपयोगिता एपीआई कें संशोधित करयत कॉन्फ़िगर कैल जा सकय छै.

एचटीएमएल

<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
<img src="..." class="rounded-4" alt="...">
<img src="..." class="rounded-5" alt="...">

सीएसएस

चर

v5.2.0 मे जोड़ा गेल

  --#{$prefix}border-width: #{$border-width};
  --#{$prefix}border-style: #{$border-style};
  --#{$prefix}border-color: #{$border-color};
  --#{$prefix}border-color-translucent: #{$border-color-translucent};

  --#{$prefix}border-radius: #{$border-radius};
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
  --#{$prefix}border-radius-pill: #{$border-radius-pill};

सस्स चर

$border-width:                1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
);

$border-style:                solid;
$border-color:                $gray-300;
$border-color-translucent:    rgba($black, .175);

$border-radius:               .375rem;
$border-radius-sm:            .25rem;
$border-radius-lg:            .5rem;
$border-radius-xl:            1rem;
$border-radius-2xl:           2rem;
$border-radius-pill:          50rem;

सस मिक्सिन

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius($radius);
  }
}

उपयोगिता एपीआई

सीमा उपयोगिता हमर उपयोगिता एपीआई मे घोषित अछि scss/_utilities.scss. उपयोगिता एपीआई क उपयोग करब सीखू।

    "border": (
      property: border,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-top": (
      property: border-top,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-end": (
      property: border-right,
      class: border-end,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-bottom": (
      property: border-bottom,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-start": (
      property: border-left,
      class: border-start,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-color": (
      property: border-color,
      class: border,
      local-vars: (
        "border-opacity": 1
      ),
      values: $utilities-border-colors
    ),
    "border-width": (
      css-var: true,
      css-variable-name: border-width,
      class: border,
      values: $border-widths
    ),
    "border-opacity": (
      css-var: true,
      class: border-opacity,
      values: (
        10: .1,
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),

    "rounded": (
      property: border-radius,
      class: rounded,
      values: (
        null: var(--#{$prefix}border-radius),
        0: 0,
        1: var(--#{$prefix}border-radius-sm),
        2: var(--#{$prefix}border-radius),
        3: var(--#{$prefix}border-radius-lg),
        4: var(--#{$prefix}border-radius-xl),
        5: var(--#{$prefix}border-radius-2xl),
        circle: 50%,
        pill: var(--#{$prefix}border-radius-pill)
      )
    ),
    "rounded-top": (
      property: border-top-left-radius border-top-right-radius,
      class: rounded-top,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-end": (
      property: border-top-right-radius border-bottom-right-radius,
      class: rounded-end,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-bottom": (
      property: border-bottom-right-radius border-bottom-left-radius,
      class: rounded-bottom,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-start": (
      property: border-bottom-left-radius border-top-left-radius,
      class: rounded-start,
      values: (null: var(--#{$prefix}border-radius))
    ),